Skip to content

B
bem-sample
Commit 6f87e27a authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki
Browse files
Options

use Flexbox for grids. Also update README.md.

parent 273f8a96
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 142 deletions
README.md
View file @ 6f87e27a
This is a sample HTML/CSS/JavaScript that strictly follows our naming convention. This is a sample HTML/CSS/JavaScript that strictly follows our naming convention.
BEM # CSS
---
## Naming Convention
For CSS class naming, we use [BEM](https://en.bem.info/) so that we can be sure that which rule will affect which part and also which rule will NOT affect any unintended part. For CSS class naming, we use [BEM](https://en.bem.info/) so that we can be sure that which rule will affect which part and also which rule will NOT affect any unintended part.
...@@ -10,8 +11,7 @@ Once tring BEM seriously in a complicated web site, we often face similar questi ...@@ -10,8 +11,7 @@ Once tring BEM seriously in a complicated web site, we often face similar questi
* https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/ * https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
* http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ * http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
LESS ## Preprocessor : LESS
----
We use [LESS](http://lesscss.org) for faster development of CSS and also for easier maintenance, like changing colours at once etc. We use [LESS](http://lesscss.org) for faster development of CSS and also for easier maintenance, like changing colours at once etc.
...@@ -21,8 +21,15 @@ Here are some guidelines of the usage of LESS : ...@@ -21,8 +21,15 @@ Here are some guidelines of the usage of LESS :
* You don't need to care the size of generated CSS. We can anyway use optimiser to grouping similar rules. * You don't need to care the size of generated CSS. We can anyway use optimiser to grouping similar rules.
* If you are not sure which you should choose between 'mixin' and 'extend', always use 'mixin'. * If you are not sure which you should choose between 'mixin' and 'extend', always use 'mixin'.
JavaScript ## Grid : Flexbox
----------
Flexbox is currently [well supported](http://caniuse.com/#feat=flexbox). Use Flexbox as much as possible instead of fighting with float.
## Vendor prefix etc. : Pleeease
We use [Pleeease](pleeease.io). See gulpfile.js.
# JavaScript
Here are some guidelines of the usage of JavaScript : Here are some guidelines of the usage of JavaScript :
......
faq.html
View file @ 6f87e27a
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<![endif]--> <![endif]-->
</head> </head>
<body class="faq"> <body class="body">
<header class="header"> <header class="header">
<div class="l-wrapper-header"> <div class="l-wrapper-header">
<div class="header-phone">Need for support? <img src="images/phone_icon.png" alt="" class="header-phone__image" /> 1-800-123-4567</div> <div class="header-phone">Need for support? <img src="images/phone_icon.png" alt="" class="header-phone__image" /> 1-800-123-4567</div>
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
Foo is a registered trade mark of Foo Inc. Foo is a registered trade mark of Foo Inc.
</div> </div>
<div class="footer-copyright__image"> <div class="footer-copyright__image">
<img src="images/odot_logo_white_transparent.png" alt="" /> <img src="http://placehold.it/48x48?text=logo" alt="logo" class="footer-logo__image" />
</div> </div>
</div> </div>
</div> </div>
......
gulpfile.js 0 → 100644
View file @ 6f87e27a
// Requis
var gulp = require('gulp');
// Include plugins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var pleeease = require('gulp-pleeease');
var concatCss = require('gulp-concat-css');
var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var less = require('gulp-less');
var plumberErrorHandler = {
errorHandler: notify.onError({
title: 'Gulp',
message: 'Error: <%= error.message %>'
})
};
var paths = {
scripts: [
'js/main.js',
],
stylesWatchDir: [
'styles/*.less'
],
styles: [
'styles/styles.less'
],
images:'images',
dest:'dist'
};
// Lint Task
gulp.task('lint', function() {
return gulp.src(paths.scripts)
.pipe(plumber(plumberErrorHandler))
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src(paths.scripts)
.pipe(plumber(plumberErrorHandler))
.pipe(concat('all.js'))
.pipe(gulp.dest(paths.dest+'/js'))
.pipe(rename('all.min.js'))
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest(paths.dest+'/js'));
});
// Concatenate & Minify CSS
gulp.task('css', function () {
return gulp.src(paths.styles)
.pipe(plumber(plumberErrorHandler))
.pipe(less())
.pipe(pleeease({browsers: ['last 4 versions'], minifier: false}))
.pipe(concatCss('style.css'))
.pipe(gulp.dest(paths.dest+'-css/'))
.pipe(rename('style.min.css'))
.pipe(cleanCSS({}))
.pipe(gulp.dest(paths.dest+'-css/'));
});
gulp.task('images', function() {
return gulp.src(paths.images+'/**/*')
.pipe(plumber(plumberErrorHandler))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest(paths.dest+'-images/'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch(paths.scripts, ['scripts']);
gulp.watch(paths.stylesWatchDir, ['css']);
gulp.watch(paths.images+'/**/*', ['images']);
});
// Clear cache
gulp.task('clear', function(){
cache.clearAll();
});
// Default Task
gulp.task('default', ['scripts', 'css', 'images', 'watch']);
gulp.task('delivery', ['scripts', 'css', 'images']);
package.json 0 → 100644
View file @ 6f87e27a
{
"name": "gulp-tools",
"version": "0.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD-2-Clause",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-cache": "~0.4.6",
"gulp-clean-css": "^3.0.4",
"gulp-concat": "~2.6.1",
"gulp-concat-css": "~2.3.0",
"gulp-imagemin": "~3.3.0",
"gulp-jshint": "~2.0.4",
"gulp-less": "^3.3.0",
"gulp-notify": "~3.0.0",
"gulp-pleeease": "~2.0.2",
"gulp-plumber": "~1.1.0",
"gulp-rename": "~1.2.0",
"gulp-uglify": "~3.0.0"
}
}
styles/_faq.less
View file @ 6f87e27a
...@@ -18,12 +18,18 @@ body.faq { ...@@ -18,12 +18,18 @@ body.faq {
margin-right: -16px; margin-right: -16px;
} }
.faq {
display: flex;
}
.faq-side { .faq-side {
padding: 16px; padding: 16px;
flex: 1;
} }
.faq-body { .faq-body {
padding: 16px; padding: 16px;
flex: 2;
} }
.faq-menu__list { .faq-menu__list {
...@@ -98,15 +104,11 @@ body.faq { ...@@ -98,15 +104,11 @@ body.faq {
} }
} }
.faq-side {
.grid-responsive-column(4);
}
.faq-body {
.grid-responsive-column(8);
}
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
.faq {
display: block;
}
.faq-menu__item { .faq-menu__item {
width: 100%; width: 100%;
text-align: center; text-align: center;
......
styles/_footer.less
View file @ 6f87e27a
.l-wrapper-footer { .l-wrapper-footer {
.l-wrapper-main(); .l-wrapper-main();
@media (min-width: @screen-md-min) {
display: flex;
}
} }
.footer-information { .footer-information {
...@@ -12,17 +15,15 @@ ...@@ -12,17 +15,15 @@
} }
.footer-links-box { .footer-links-box {
flex: 7;
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
width: 70%; display: flex;
float: right;
} }
} }
.footer-logo { .footer-logo {
@media (min-width: @screen-md-min) { flex: 3;
width: 30%; order: -1;
float: left;
}
padding: 30px 16px; padding: 30px 16px;
} }
...@@ -48,11 +49,8 @@ ...@@ -48,11 +49,8 @@
} }
.footer-links { .footer-links {
@media (min-width: @screen-md-min) { flex: 1;
float: left; margin: 30px 16px;
width: 20%;
}
margin: 30px 5%;
} }
.footer-links__title { .footer-links__title {
...@@ -86,15 +84,14 @@ ...@@ -86,15 +84,14 @@
} }
.footer-copyright__text { .footer-copyright__text {
width: 60%;
margin: 6px 16px 0; margin: 6px 16px 0;
float: left;
text-align: right; text-align: right;
align-self: center;
} }
.footer-copyright__image { .footer-copyright__image {
width: 30%; text-align: left;
float: left; align-self: center;
} }
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
......
styles/_grids.less deleted 100644 → 0
View file @ 273f8a96
/* --------------------------------------------------------------------
Simple grid mixin supporting one break point.
Usage :
<div class="my-row">
<div class="my-column">...</div>
<div class="my-column">...</div>
<div class="my-column">...</div>
</div>
Example 1 : 3 columns grid regardless the window width
.my-row {
.grid-row();
}
.my-column {
.grid-column(4); // 12 (total columns) / 3 (number of columns) => 4
}
Example 2 : 3 columns responsive grid
.my-row {
.grid-responsive-row();
}
.my-column {
.grid-responsive-column(4);
}
Example 3 : 3 columns responsive grid regardless the window width
.my-row {
.grid-gutter-row();
}
.my-column {
.grid-gutter-column(4);
}
Example 4 : 3 columns responsive grid with gutter
.my-row {
.grid-responsive-gutter-row();
}
.my-column {
.grid-responsive-gutter-column(4);
}
-------------------------------------------------------------------- */
// variables
@grid-total-columns: 12;
@grid-gutter: 16px;
@grid-break-point: 992px;
// mixin definitions.
.grid-row() {
.clearfix();
width: auto;
margin: 0;
}
.grid-responsive-row() {
.clearfix();
width: auto;
margin: 0;
}
.grid-column(@span) {
width: 100% * (@span / @grid-total-columns);
float: left;
}
.grid-responsive-column(@span, @grid-break-point:@grid-break-point) {
@media (min-width: @grid-break-point) {
.grid-column(@span);
}
}
.grid-gutter-row() {
.clearfix();
width: auto;
margin: 0 (-@grid-gutter / 2);
}
.grid-responsive-gutter-row() {
.clearfix();
width: auto;
@media (min-width: @grid-break-point) {
margin: 0 (-@grid-gutter / 2);
}
}
.grid-gutter-column(@span) {
.grid-column(@span);
padding: (@grid-gutter / 2);
}
.grid-responsive-gutter-column(@span, @grid-break-point:@grid-break-point) {
@media (min-width: @grid-break-point) {
.grid-gutter-column(@span);
}
}
styles/styles.less
View file @ 6f87e27a
...@@ -19,7 +19,6 @@ body { ...@@ -19,7 +19,6 @@ body {
// useful mixin // useful mixin
@import "_clearfix"; @import "_clearfix";
@import "_grids";
// variables // variables
@fg-color1: #dcdfdf; @fg-color1: #dcdfdf;
...@@ -62,7 +61,7 @@ body { ...@@ -62,7 +61,7 @@ body {
// .l-* // .l-*
.l-wrapper { .l-wrapper {
.clearfix(); // .clearfix();
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
width: auto; width: auto;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7