<p>Возможные ID сетки: xs, sm, md, lg, xl, xxl (xxl по умолчанию закомментированы). Вдохновлено Bootstrap 4.</p>
<p>Возможные ID сетки: xs, sm, md, lg, xl, xxl (xxl по умолчанию закомментированы). Вдохновлено Bootstrap 4.</p>
<p>Промежутки ячеек модульной сетки сделаны с помощью <code>padding</code> (<code>@grid-gutter-width / 2</code>), у родителя модульной сетки есть отрицательные <code>margin</code> (<code>@grid-gutter-width / -2</code>) для выравнивания левой границы контентных областей ячеек сетки по левым границам блоков вне сетки.</p>
<li>Отсутствие в стилевом файле лишних классов.</li>
<li>Отсутствие в стилевом файле лишних классов.</li>
</ul>
</ul>
<p>Абсолютно любая сетка на любой ширине. Бесплатно без регистрации и СМС.</p>
<p>Абсолютно любая сетка на любой ширине. Бесплатно без регистрации и СМС.</p>
<pclass="alert alert--danger">Примеси генерируют много медиа-выражений! Обязательно используйте конкатенатор медиа-выражений, к примеру, <strong><ahref="https://github.com/hail2u/node-css-mqpacker">этот</a></strong> (написанный с PostCSS).</p>
<h3>Работа с примесями</h3>
<p>TODO</p>
<h3>Варианты использования</h3>
<h4>Сетка с промежутками по умолчанию на любых вьюпортах и разным количеством колонок на ячейку</h4>
<p>Если промежуток отличается от 3rem (30px по умолчанию), нужно пойти и поменять значение переменной <code>@grid-gutter-width</code>.</p>
<preclass="code">
<codeclass="code__syntax less">
<spanclass="code__line">.block-name {</span>
<spanclass="code__line"> .row(); // На всех вьюпортах промежуток по умолчанию (из переменной @grid-gutter-width)</span>
<spanclass="code__line"></span>
<spanclass="code__line">&__element {</span>
<spanclass="code__line"> .col(xs, 6); // Изначально 6/12 (50%), на SM будет то же самое, т.к. нет вызова .col(sm, ЧИСЛО);</span>
<spanclass="code__line"> .col(md, 4); // Начиная с MD — 4/12 (33.33333333%)</span>
<spanclass="code__line"> .col(lg, 3); // Начиная с LG — 3/12 (25%), на XL и XXL будет то же самое</span>
<spanclass="code__line"> }</span>
<spanclass="code__line">}</span>
</code>
</pre>
<h4>Сетка, у которой на XS изменён промежуток (1rem), а на SM и далее — промежуток по умолчанию</h4>
<preclass="code">
<codeclass="code__syntax less">
<spanclass="code__line">.block-name {</span>
<spanclass="code__line"> .row(1rem); // Передаём примеси промежуток для XS (для SM и далее он будет по умолчанию)</span>
<spanclass="code__line"></span>
<spanclass="code__line">&__element {</span>
<spanclass="code__line"> .col(xs, 6, @grid-columns, 1rem); // Нужно передать изменённый промежуток колонкам тоже</span>
<spanclass="code__line"> .col(sm, 4); // Восстановления промежутка по умолчанию</span>
<spanclass="code__line"> }</span>
<spanclass="code__line">}</span>
</code>
</pre>
<h4>4. Нужна сетка, у которой на XS промежуток по умолчанию, на SM изменённый, а на MD и далее — по умолчанию</h4>
<preclass="code">
<codeclass="code__syntax less">
<spanclass="code__line">.block-name {</span>
<spanclass="code__line"> .row(@sm-grid-gutter: 1rem); // Для XS опускаем, сразу пишем для SM (вынуждены указать конкретную переменную, поскольку примесь сначала ждет переменную для XS)</span>
<spanclass="code__line"> // .row(@grid-gutter-width, 1rem); // Полностью аналогично, но с соблюдением очередности переменных при вызове</span>
<spanclass="code__line"></span>
<spanclass="code__line">&__element {</span>
<spanclass="code__line"> .col(sm, 6, @grid-columns, 1rem); // Нужно передать изменённый промежуток колонкам тоже</span>
<spanclass="code__line"> .col(md, 4); // Восстановления промежутка по умолчанию</span>
<spanclass="code__line"> }</span>
<spanclass="code__line">}</span>
</code>
</pre>
<h4>5. Нужна сетка, у которой на каждом вьюпорте свой промежуток</h4>
111
<h4>6. Нужна сетка без промежутков на любых вьюпортах</h4>
111
<h4>7. Нужна сетка без промежутков на XS, но с промежутками по умолчанию начиная с SM</h4>
111
<divclass="row">
<divclass="row">
<divclass="col-lg-6">
<divclass="col-lg-6">
<pre>
<p>Вызов примесей:</p>
<codeclass="less">.block-name {</code>
<preclass="code">
<codeclass="less"> .row(); // БЭМ-блок — обёртка элементов сетки</code>
<codeclass="code__syntax less">
<codeclass="less"></code>
<spanclass="code__line">.block-name {</span>
<codeclass="less">&__element {</code>
<spanclass="code__line"> .row(); // БЭМ-блок — обёртка элементов сетки</span>
<codeclass="less"> // Разные ширины элемента на разных вьюпортах</code>
<spanclass="code__line"></span>
<codeclass="less"> .col(xs, 6);</code>
<spanclass="code__line">&__element {</span>
<codeclass="less"> .col(sm, 5);</code>
<spanclass="code__line"> // Разные ширины элемента на разных вьюпортах</span>
<codeclass="less"> // Для каждого вызова примеси указан промежуток между колонками (совпадает с тем, что у соответствующего вызова .row() для родительского элемента)</code>
<spanclass="code__line"> // Для каждого вызова примеси указан промежуток между колонками (совпадает с тем, что у соответствующего вызова .row() для родительского элемента)</span>
