Сетка
По умолчанию сетка имеет 12 колон и 6 брейкпоинов. Построена на CSS flexbox
Классы сетки
Размер | Префикс | Пример | Ширина экрана | Устройство |
---|---|---|---|---|
Класс по умолчанию | sgrid_12 | Любая ширина | Все устройства | |
Small | sm | sm_sgrid_12 | от 480px | Телефоны пейзаж и шире |
Medium | md | md_sgrid_12 | от 768px | Планшеты портрет и шире |
Large | lg | lg_sgrid_12 | от 1024px | Планшеты пейзаж и шире |
Xlarge | xl | xl_sgrid_12 | от 1366px | ноутбуки и шире |
XXL | xxl | xxl_sgrid_12 | от 1681px | широкоформатные мониторы |
Retina | re | re_sgrid_12 | от 1921px | Ретина и телевизоры |
Все | Small от 480px | Medium от 768px | Large от 1024px | Xlarge от 1366px | XXlarge от 1681px | Retina от 1921px | |
---|---|---|---|---|---|---|---|
Все устройства | |||||||
- | Телефоны пейзаж и шире | ||||||
- | Планшеты портрет и шире | ||||||
- | Планшеты пейзаж и шире | ||||||
- | ноутбуки и шире | ||||||
- | широкоформатные мониторы | ||||||
- | Телевизоры |
Расширение и кастомизация
Брейкпоинты можно добавлять/удалять/изменять. Делается это в файле variables.scss, в переменной $breakpoints.
Можно задать любое колличество колонок для любого брейкпоинта. Так же можно задать несколько колок для одного брейкпоинта. Например, при ширине экрана 1920px можно создать один контейнер с 12 колонками (по умолчанию), а другой с 5, 7, 10...
Подробнее о расширении и кастомизации в описании variables.scss