<pclass="alert alert--success">Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).</p>
<pclass="alert alert--success">Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).</p>
<p>С примесями можно сделать модульную сетку любой колоночности (на разных ширинах может быть разноколоночная сетка), с любым промежутком между ячейками (на разных ширинах могут быть разные промежутки).</p>
<p>С примесями можно сделать модульную сетку любой колоночности (на разных ширинах может быть разноколоночная сетка), с любым промежутком между ячейками (на разных ширинах могут быть разные промежутки).</p>
<pclass="alert alert--danger">Вызов примеси <code>.col(xs, 12);</code> (возможно, не 12, а какое-то своё кол-во колонок) обязателен для элементов, являющихся прямыми потомками родителя модульной сетки.</p>
<pclass="alert alert--danger">Вызов примеси <code>.col(xs, 12);</code> (возможно, не 12, а какое-то своё кол-во колонок) обязателен для элементов, являющихся прямыми потомками родителя модульной сетки.</p>
<divclass="row">
<divclass="row">
<divclass="col-lg-6">
<divclass="col-lg-6">
<pre>
<pre>
.block-name {
<codeclass="less">.block-name {</code>
.row(); // БЭМ-блок — обёртка элементов модульной сетки
<codeclass="less"> .row(); // БЭМ-блок — обёртка элементов модульной сетки</code>
<codeclass="less"></code>
&__element {
<codeclass="less">&__element {</code>
// Разные ширины элемента на разных вьюпортах
<codeclass="less"> // Разные ширины элемента на разных вьюпортах</code>
.col(xs, 6);
<codeclass="less"> .col(xs, 6);</code>
.col(sm, 5);
<codeclass="less"> .col(sm, 5);</code>
.col(md, 4);
<codeclass="less"> .col(md, 4);</code>
.col(lg, 3);
<codeclass="less"> .col(lg, 3);</code>
.col(xl, 2);
<codeclass="less"> .col(xl, 2);</code>
.col(xxl, 1);
<codeclass="less"> .col(xxl, 1);</code>
}
<codeclass="less"> }</code>
}
<codeclass="less">}</code>
</pre>
</pre>
</div>
</div>
<divclass="col-lg-6">
<divclass="col-lg-6">
<pre>
<pre>
.block-name {
<codeclass="less">.block-name {</code>
// в примесь можно передать ширину промежутка между ячейками
<codeclass="less"> // в примесь можно передать ширину промежутка между ячейками</code>
.row(10px);
<codeclass="less"> .row(10px);</code>
<codeclass="less"></code>
&__first-element {
<codeclass="less">&__first-element {</code>
// xs-сетка, 6 колонок из @grid-columns (12 по умолчанию),
<codeclass="less"> // xs-сетка, 6 колонок из @grid-columns (12 по умолчанию),</code>
// Для каждого вызова примеси указан промежуток между колонками (совпадает с тем, что у соответствующего вызова .row() для родительского элемента)
<codeclass="less"> // Для каждого вызова примеси указан промежуток между колонками (совпадает с тем, что у соответствующего вызова .row() для родительского элемента)</code>
