Grid

Для базового управления версткой на страницу используется система флексов. Данный подход позволяет гибко настроить вывод контента. И для удобной настройки посредством классов мы создали вспомогательные утилиты для сетки. Далее по порядку:

Класс .g-container

Данный класс используется для установки на странице контейнера. По сути ничем не отличается от привычного подхода к формированию таких элементов на странице. Автоматически центрируется в середине посредством отступов. Чтобы его использовать, достаточно написать, например, следующее:

<section class="g-container">...</section>

Для того, чтобы контейнер с определенной шириной занял все пространство вширь, необходимо использовать вспомогательный класс .g-container__whide, следующим образом:

<section class="g-container g-container__whide">...</section>

Для чего нужен контейнер?

В процессе верстки действительно проще разделять все содержимое между шапкой и подвалов на секции. Так как внутри предполагается использование .g-row или .g-column, которые имеют отрицательный отступ наружу (это не всегда так), то контейнер предотвращает выход за видимые пределы страницы. В нем есть отступ равный отрицательному отступу строк, что при искусственном схлопывании отступов дает нулевой отступ.

Строки и колонки

Нас до сих пор удивляет отсутствие такого подхода в других библиотеках и «фреймворках», но у нас есть не только строка, но и колонка. Самая простая flex-колонка.

Классы .g-row и .g-column

Для того, чтобы можно было формировать контент, состоящий из колонок (сетки), необходимо использовать класс .g-row, в рамках совместного использования вместе с контейнером уже таким образом:

<section class="g-container g-container__whide">
    <div class="g-row">Строка</div>
    <div class="g-column">Колонка</div>
</section>

Данный пример позволяет уже внутри строки или колонки начинать набирать верстку в соответствии с макетом по сетке.

Модификаторы строки и колонки

Класс .g-row__no-offset

Все это, конечно, круто, стандартный функционал, все дела. Но гораздо удобнее иметь в запасе модификаторы, которые позволят, например, не городить конструкцию из контейнера, но получить возможность сформировать строку или колонку контента, которая не станет пытаться выйти за границы экрана, тем самым создавая горизонтальную прокрутку. Мы сделали такой модификатор, и это — .g-row__no-offset. Соответственно:

<section class="g-container">
    <div class="g-row g-row__no-offset">Строка</div>
    <div class="g-column g-column__no-offset">Колонка</div>
</section>

Это работает и для колонки. Для большего удобства мы создали одноименные модификаторы, дабы не запутаться. Впрочем, работают они одинаково. Отключают отрицательный отступ (margin).

Класс .g-row__no-inset

Также для выключения отступов для сетки внутри строки или колонки мы создали класс .g-row__no-inset. Он выключает внутренние отступы для классов типа g-cols__**, которые находятся непосредственно внутри колонки или строки. Понятнее будет на примере:

<section class="g-container">
    <div class="g-row g-row__no-inset">
        <div class="g-cols__xs-12">
            Тут выключен padding
        </div>
        <div class="g-cols__xs-12">
            <div class="g-row">
                <div class="g-cols__xs-12">
                    Тут отступ на месте
                </div>
            </div>
        </div>
    </div>
    <div class="g-column g-column__no-inset">Работает по тому же принципу, что и .g-row__no-inset</div>
</section>

Сетка

Ну и наконец поговорим о сетке. В качестве базовой мы разработали сетку на 12 колонок. Но данные параметры можно поменять в файле настроек. Вас должна интересовать переменная $grid-cols. В ней можно указать любое количество необходимых колонок. Обычно это 12 и 16.

.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1	.g-cols__xs-1
.g-cols__xs-2		.g-cols__xs-2		.g-cols__xs-2		.g-cols__xs-2		.g-cols__xs-2		.g-cols__xs-2
.g-cols__xs-3			.g-cols__xs-3			.g-cols__xs-3			.g-cols__xs-3
.g-cols__xs-4				.g-cols__xs-4				.g-cols__xs-4
.g-cols__xs-6						.g-cols__xs-6
.g-cols__xs-12