<!-- микс блока wrapper, но можно и не миксовать, если нужно -->
<div class="header wrapper">
<!-- элемент блока wrapper -->
<div class="wrapper__left">
<!-- aside элемент блока header c модификатором pink -->
<div class="header__aside header__aside_pink"/>
</div>
<!-- элемент блока wrapper -->
<div class="wrapper__right">
<!-- aside элемент блока header c модификатором blue -->
<div class="header__aside header__aside_blue"/>
</div>
</div><div class="header">
<!-- wrappe элемент блока header -->
<div class="header__wrapper">
<!-- wrapperLeft элемент блока header -->
<div class="header__wrapperLeft">
<!-- aside элемент блока header c модификатором pink -->
<div class="header__aside header__aside_pink"/>
</div>
<!-- wrapperRight элемент блока header -->
<div class="header__wrapperRight">
<!-- aside элемент блока header c модификатором blue -->
<div class="header__aside header__aside_blue"/>
</div>
</div>
</div><div class="header">
<!-- wrapper элемент блока header c модификатором left -->
<div class="header__wrapper header__wrapper_left">
<!-- aside элемент блока header c модификатором pink -->
<div class="header__aside header__aside_pink"/>
</div>
<!-- wrapper элемент блока header c модификатором right -->
<div class="header__wrapper header__wrapper_right">
<!-- aside элемент блока header c модификатором blue -->
<div class="header__aside header__aside_blue"/>
</div>
</div><div class="mdl-card mdl-card--theme-demo mdl-card mdl-shadow--2dp"/><div class="btn btn_search">search</div><div class="btn btn_type_search">search</div>
<div class="btn btn_type_submit">submit</div>var data = [
{
'text': 'BEM — BEM Easy Makeup',
'url': 'https://ru.bem.info/',
},
];
var template = {
tag: 'a',
class: 'button button_theme_islands button_size_xl',
href: '${url}',
children: [
{
tag: 'span',
class: 'icon icon_social_twitter',
},
{
tag: 'span',
class: 'button__text',
html: '${text}',
},
]
};
document.body.innerHTML = json2html.transform( data, template );<!DOCTYPE html>
<html class="ua_js_no">
<head>
<!--[if lt IE 9]><script src="https://yastatic.net/es5-shims/0.0/es5-shims.min.js"></script><![endif]-->
<meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>bem-components dist</title>
<script>(function(e,c){e[c]=e[c].replace(/(ua_js_)no/g,"$1yes");})(document.documentElement,"className");(function(d,n){d.documentElement.className+=" ua_svg_"+(d[n]&&d[n]("http://www.w3.org/2000/svg","svg").createSVGRect?"yes":"no");})(document,"createElementNS");</script>
<!--[if gt IE 8]><!--><link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css"/>
<!--<![endif]--><!--[if lte IE 8]><link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.ie.css"/><![endif]-->
</head>
<body class="page page_theme_islands">
<!-- write your code here -->
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bh.js"></script>
</body>
</html>$ git clone https://github.com/ilyar/bem-test.git && cd bem-test && npm i
$ gulp
[14:19:01] Using gulpfile ~/lab/bem-test/gulpfile.js
[14:19:01] Starting 'default'...
[14:19:01] Finished 'default' after 146 ms
$ cat dist/index.css
.menu {
list-style: none;
color: green;
}
.menu__item {
margin-left: 10px;
}{ block: 'normalize' } не попадает в css при сборке, чтобы подключить на проект стили и скрипты блоков desctop.blocks/page/page.deps.js:[{
mustDeps: { block: 'normalize' },
}]echo "prefix=~/.local" > ~/.npmrc
echo "export NODE_PATH=\$NODE_PATH:~/.local/lib/node_modules" >> ~/.bashrc
echo "export PATH=~/.local/bin:\$PATH" >> ~/.bashrc
echo "export PATH=./node_modules/.bin:\$PATH" >> ~/.bashrc
source ~/.bashrcnpm i -g bower
npm cache clean
npm update -gbem create -l desktop.blocks/block1 -b block2 -T cssexports.baseLevelPath = require.resolve('../../../.bem/levels/blocks.js');bem create -l desktop.blocks/ -b block2 -T cssnpm install roole --save