Устанавливаем project-stub
- Устанавливаем 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.
- Устанавливаем bem-grid
npm i --save-dev bem-grid
bower install --save bem-grid
!!! ВАЖНО установить двумя способами через npm и bower UPD: говорят, что работает даже с одним npm
- Заходим в папку проекта. Редактируем файл
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'
];
...
- В этом же файле находим
//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'
}
}],
...
- Готово. Теперь можем писать так
// 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>
...
Старался писать как можно подробней. Источник: по ссылке
Вроде достаточно только через
npm
. У меня заработало с таким diff-ом дляproject-stub
:https://github.com/bem/project-stub/compare/bem-grid?expand=1
@tadatuta 👍 работает с одним из вариантов)