Udobnaja/bem-grid

Flexbox grid for bem-projects

bem-grid

BEM methodology for Lost Grid.

Usage

Like Twitter Bootstrap:

1. bower install --save bem-grid
2. <link rel="stylesheet" href="./bower_components/bem-grid/dist/bem-grid.css">

As ENB module:

1. npm i --save-dev bem-grid
2. Add bem-grid after any css builder in your ENB config

[require('bem-grid').enb, {
    config : {
        maxWidth : '1100px',
        gutter : '10px',
        flex : 'flex'
    }
}]

As plugin for postcss:

1. npm i --save bem-grid
2. Prepend your plugins with bem-grid

var postcss = require('postcss');
var bemGrid = require('bem-grid').postcss;

postcss([bemGrid({
    maxWidth: '1100px',
    gutter: '10px',
    flex: 'flex'
})]).process('a {color: red}').then(function(result) {
    console.log(result.css);
});

Easy example

<div class="row">
    <div class="row__col row__col_mw_6">left column</div>
    <div class="row__col row__col_mw_6">right column</div>
</div>

// bemjson
{
    block : 'row',
    content : [
        {
            elem : 'col',
            elemMods : { mw : 6 },
            content : 'left column'
        },
        {
            elem : 'col',
            elemMods : { mw : 6 },
            content : '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.

MIT License