Войти с помощью github
Форум /

Устанавливаем project-stub

  1. Устанавливаем project-stub
git clone https://github.com/bem/project-stub.git --depth 1 --branch v1.5.0 my-bem-project
cd my-bem-project
npm install # Do not use root privilege to install npm and bower dependencies.
  1. Устанавливаем bem-grid
npm i --save-dev bem-grid
bower install --save bem-grid

!!! ВАЖНО установить двумя способами через npm и bower UPD: говорят, что работает даже с одним npm

  1. Заходим в папку проекта. Редактируем файл my-bem-project/.enb/make.js Добавляем строчку
{ path: 'libs/bem-grid/common.blocks', check: false },
// make.js
...
  enbBemTechs = require('enb-bem-techs'),
    levels = [
        { path: 'libs/bem-core/common.blocks', check: false },
        { path: 'libs/bem-core/desktop.blocks', check: false },
        { path: 'libs/bem-components/common.blocks', check: false },
        { path: 'libs/bem-components/desktop.blocks', check: false },
        { path: 'libs/bem-components/design/common.blocks', check: false },
        { path: 'libs/bem-components/design/desktop.blocks', check: false },
        { path: 'libs/bem-grid/common.blocks', check: false }, // Добавили сюда
        'common.blocks',
        'desktop.blocks'
    ];
...
  1. В этом же файле находим //css и заменяем на
// make.js
...
        //css
            [techs.stylus, {
                target: '?.stylus.css',
                sourcemap: false,
                autoprefixer: {
                    browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
                }
            }],
            [require('bem-grid').enb, {
                source: '?.stylus.css',
                target: '?.css',
                config : {
                    maxWidth : '1100px',
                    gutter : '10px',
                    flex : 'flex'
                }
            }],
...
  1. Готово. Теперь можем писать так
// index.bemjson.js
...
{
    block : 'row',
    content : [
        {
            elem : 'col',
            elemMods : { mw : 6 },
            content : 'left column'
        },
        {
            elem : 'col',
            elemMods : { mw : 6 },
            content : 'right column'
        }
    ]
}
...

В итоге получим

...
<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>
...

Старался писать как можно подробней. Источник: по ссылке