Сетка
Сетка позволяет нам поддерживать согласованность блоков и единство всей структуры сайта.
Брейкпоинты
Система включает в себя шесть брейкпоинтов, что позволяет верно отображать интерфейс на всех устройствах.
| Брейкпоинт | Устройство | Контентная область |
|---|---|---|
| ≤ 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 колонки, контентная область занимает оставшуюся часть.