bem-grid
BEM on Lost Grid.
Usage
The easiest way:
bower install --save bem-grid
<link rel="stylesheet" href="./bower_components/bem-grid/dist/bem-grid.min.css">
As ENB module:
npm i --save-dev bem-grid
- Add
bem-grid
in your ENB config
enbconfig:columns: 12 // defaultmaxWidth: '1100px'gutter: '10px'flex: 'flex'
Note: If you have any css builder, you should change its target
and add source
to bem-grid parameters for preventing conflicts, like this:
techsstylustarget: '?.no-grid.css' // there is the changed targetsourcemap: falseautoprefixer:browsers: 'ie >= 10' 'last 2 versions' 'opera 12.1' '> 2%'enbconfig:maxWidth: '1100px'gutter: '10px'flex: 'flex'source: '?.no-grid.css' // there is the source
As plugin for postcss:
npm i --save bem-grid
- Prepend your plugins with
bem-grid
const postcss = ;const bemGrid = postcss;;
Easy example
left columnright column
block: 'row'content:elem: 'col'elemMods: mw: 6content: 'left column'elem: 'col'elemMods: mw: 6content: 'right column'
Row
Useful mods for row block:
-
(s|m|l|xl|xxl)al - align cols to left on needed displays
-
(s|m|l|xl|xxl)ac - align cols to center on needed displays
-
(s|m|l|xl|xxl)ar - align cols to right on needed displays
-
(s|m|l|xl|xxl)vat - align cols vertically to top on needed displays
-
(s|m|l|xl|xxl)vam - align cols vertically to middle on needed displays
-
(s|m|l|xl|xxl)vab - align cols vertically to bottom on needed displays
Useful mods for col element:
-
(s|m|l|xl|xxl) - auto width on needed displays
-
(s|m|l|xl|xxl)w - width on needed displays, 0 hide col on this device
-
(s|m|l|xl|xxl)o - offset on needed displays
-
(s|m|l|xl|xxl)of - order first this col on needed displays
-
(s|m|l|xl|xxl)ol - order last this col on needed displays
Authors
- Anton Winogradov (awinogradov) @awinogradov
Ideas
Please, talk about your ideas by GitHub issues.