Туториал по установке bem-grid

[cyberS7]

Устанавливаем 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>
...

---

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

[tadatuta]

Вроде достаточно только через npm. У меня заработало с таким diff-ом для project-stub:

https://github.com/bem/project-stub/compare/bem-grid?expand=1

[awinogradov]

@tadatuta 👍 работает с одним из вариантов)