Модуль и сетка

Сетка — система вертикальных линий, которые позволяют размещать элементы на странице. Обеспечивает равномерное распределение элементов и создание баланса между ними. Задаёт ритм. Позволяет изменять размеры элементов, сохраняя при этом пропорции и гармонию дизайна.

Модуль

Используется модуль 4px. Это базовая единица, на основе которой строится типографика, система отступов, задаются размеры иконок и элементов интерфейса.

Сетка

Сетка адаптируется под 5 типов устройств: десктоп, большой планшет, маленький планшет, большой смартфон и маленький смартфон. Для каждого устройства задана фиксированная ширина контента, в рамках которой сетка имеет определённые параметры: количество колонок, их ширину, отступы между колонками и ширину полей по краям. На заданных брейкпоинтах эти параметры изменяются.

При увеличении ширины экрана в рамках одного устройства, увеличивается ширина полей.

На мобильных устройствах контент растягивается по ширине экрана с полями 16px, не перестроится в TabletSmall.

Sidebar (боковая панель)

В некоторых интерфейсах БГТУ «ВОЕНМЕХ» используется боковая панель. На десктопе и планшетах имеет фиксированную ширину в 344px, на смартфонах растягивается по ширине экрана.