Сетка Быстрого старта
Особенности сетки
- Сетка адаптивная и строится по принципу mobile-first.
- Нет фиксированной ширины ячейки. Ширина формируется автоматически на основе параметров (кол-во ячеек и ширина отступов между ячейками).
- Настраиваемая ширина отступов между ячейками для разных размеров экранов.
- Неорганиченная вложенность сетки с сохранением параметров.
- Настриваемые точки перехода (breackpoints).
- Включение, при необходимости, классов для изменения пордка следования блоков и визуального смещения.
- Можно использовать отдельно от быстого старта в любом проекте.
Параметры
| Параметр | Описание параметра | Значение по умолчанию |
|---|---|---|
| @columns | Количество колонок | 12 |
| Ширина отступов между колонок | ||
| @gutterWidthMobile | Мобильники и выше | 10px |
| @gutterWidth | Планшеты и выше | 30px |
| @gutterWidthDesktop | Десктоп и выше | 40px |
| @gutterWidthLargeDesktop | Большой десткоп | 40px |
| Уменьшаем количество css кода, если не нужен расширенный функционал (0 — откл. 1 — вкл.) | ||
| @enablePushPull | Разрешить классы перемещения (для порядка следования блоков) | 0 |
| @enableOffset | Разрешить классы смещения (для изменеия визуальной позиции блоков — смещение вправо) | 0 |
| Break-Points. Точки перехода между размерами сетки. | ||
| @screenPhone | Телефоны | 480px |
| @screenTablet | Планшеты | 768px |
| @screenDesktop | Мелкие десктопы и планшеты в горизонтальной ориентации | 992px |
| @screenLarge | Большие десктопы | 1280px |
Основные классы
.container — контейнер для блоков c классом .content, имеет 100% ширину. Можно неограниченно вкладывать один контейнер в другой.
.content — контейнер для колонок, выравнивает контент по центру, для разных разрешений имеет разную ширину, настраиваемую в less файле.
.col - базовый класс, для любой колонки сетки.
.col-mb-X — мобильники и выше.
.col-X — планшеты и выше.
.col-dt-X — десктопы и выше.
.col-ld-X — большие десктопы.
где X - число от 1 до значения, заданного в @columns (по умолчанию 12)
Классы для управления смещением колонок
Работают только тогда, когда включен параметр: @enableOffset: 1;.
Классы -offset- нужны для случаев, когда требуется добавить "отступ" справа для колонки, равный ширине одной или нескольких колонок.
.col-mb-offset-X — смещение вправо на X колонок для мобильников и выше.
.col-offset-X — смещение вправо на X колонок для планшетов и выше.
.col-dt-offset-X — смещение вправо на X колонок для десктопов и выше.
.col-ld-offset-X — смещение вправо на X колонок для больших десктопов.
где X - число от 1 до значения, заданного в @columns.
Классы для управления позиционированием колонок
Работают только тогда, когда включен параметр: @enablePushPull: 1;.
Классы -right- и -left- нужны для случаев, когда требуется визуально поменять колонки местами.
.col-mb-right-X — свободное место справа, шириной X колонок для мобильников и выше.
.col-right-X — свободное место справа, шириной X колонок для планшетов и выше.
.col-dt-right-X — свободное место справа, шириной X колонок для десктопов и выше.
.col-ld-right-X — свободное место справа, шириной X колонок для больших десктопов.
.col-mb-left-X — свободное место слева, шириной X колонок для мобильников и выше.
.col-left-X — свободное место слева, шириной X колонок для планшетов и выше.
.col-dt-left-X — свободное место слева, шириной X колонок для десктопов и выше.
.col-ld-left-X — свободное место слева, шириной X колонок для больших десктопов.
где X - число от 1 до значения, заданного в @columns.
Вспомогательные классы сетки
.center-block — выравнивание блока по центру родителя
Показ/скрытие элементов только на определённых экранах
.col-mb-hide, .mb-hide — скрытие блоков на мобильниках.
.col-hide, .tablet-hide — скрытие блоков на планшетах.
.col-dt-hide, .dt-hide — скрытие блоков на десктопах.
.col-ld-hide, .ld-hide — скрытие блоков на больших десктопах.
.mb-block — показ блоков на мобильниках.
.tablet-block — показ блоков на планшетах.
.dt-block — показ блоков на десктопах.
.ld-block — показ блоков на больших десктопах.
Отступы
.col-padding — padding сверху и снизу, равный ширине зазора между колонками.
.col-margin — margin сверху и снизу, равный ширине зазора между колонками.
.col-margin-top — margin сверху, равный ширине зазора между колонками.
.col-margin-bottom — margin снизу, равный ширине зазора между колонками.