Сетка
Сетка позволяет нам поддерживать согласованность блоков и единство всей структуры сайта.
Брейкпоинты
Система включает в себя шесть брейкпоинтов, что позволяет верно отображать интерфейс на всех устройствах.
Брейкпоинт | Устройство | Контентная область |
---|---|---|
≤ 1440px | Desktop | 1200px |
≤ 1200px | Notebook | 1080px |
≤ 992px | Tablet | 960px |
≤ 667px | Horizontal Phone | ≤ 619px |
≤ 480px | Phone | ≤ 448px |
≤ 374px | Small Phone | ≤ 358px |

Desktop
Контентная область 1200px

Notebook
Контентная область 1080px

Tablet
Контентная область 992px
Кратно 8px
Сетка построена из базовых модулей 8px. Таким образом размеры элементов и расстояния между ними всегда будут кратными 8: 16, 24, 32, 40, 48 и т.д.


Колонки
Мы используем гибкую сетку с пропорциональными столбцами, фиксированными полями и промежутками между ними. Таким образом нам удается максимально эффективно использовать доступное пространство.


Типовые страницы
Главная страница
Контентная область занимает всю сетку, полноразмерный футер с контактами, футер и меню меняются в зависимости от целей страницы.
Внутренняя страница
Блок с навигацией по странице занимает 2 колонки, контентная область занимает оставшуюся часть.