Модули

Данная система необходима для масштабируемости страниц сайта. Так как сайт содержит большое количество сценариев и страниц, которые невозможно подвести под единую сетку и композицию, необходимо применение модульной системы, которая решает задачу масштабируемости страниц и внутренних блоков. Блоки — это отдельные секции на страницах сайта, которые содержат визуальную, текстовую информации и влияют на результат решения пользователя. Проще говоря, такие секции позволяют безболезненно для структуры страницы сайта менять смысловые блоки местами, повторять их при необходимости, изменять размер и удалять. Интерфейс сайта состоит из: переменных → базовых элементов → компонентов.

Все модули состоят из 4 слоев. Каждый слой определяет расположение контента в видимой области страницы сайта.

Longread

Это основной модуль сайта. Применяется на страницах, где необходимо размещение большого количества текста. 

Структура модуля

База (слой 0) — респонсивный бэкграунд с шириной 100%. Возможно изменение цвета фона, и использование фоновых изображений с полным покрытием, без повторений. 

Контейнер (слой 1) с полным покрытием в 1344 px. Расстояние функциональной области контейнера от его левого края до начала «Основы» используется для размещения компонентов типа Хелпер. 

Основа (слой 3) — 1140 px. Возможно использование для размещения заголовков, изображений, ссылок, кнопок и других компонентов. 

Зависимый контент (слой 4) шириной 768 px. Основной контейнер для крупного текста с большим количеством абзацев. Так же используется для размещения компонентов.

Ниже приведены размерная сетка модуля и примеры использования.

Sidebar

Данный модуль применяется на страницах, где необходимо размещение левого сайдбара с определенным функционалом, например фильтры, списки, дополнения. Таким образом центр страницы сдвигается вправо. 

Структура модуля

База (слой 0) — респонсивный бэкграунд с шириной 100%. Цвет бэкграунда строго определен макетом страниц. 

Контейнер (слой 1) с полным покрытием в 1344 px. Определяет границы основного контента и зависит от размерности других модулей на странице.

Контент-фильтр (слой 3). Фильтр — 306 px, Контент — 966 px. Определяет границы основного контента и зависит от размерности других модулей на странице.

Зависимый контент (слой 4). Фильтр — 266 px, содержит компоненты Чекбокс или Радио-кнопка. (В следующей версии «Дизайн-системы» возможны дополнения). Контент — 926 px, содержит компоненты контейнеров Лента или Блок.

Ниже приведены размерная сетка модуля и примеры использования.

4 columns

Структура слоев модуля 1 и 2 соответствует модулю Sidebar. Принципиальное отличие в назначении и применении модуля. Используется для размещения контейнера-компонента Блок без использования левого сайдбара.

Основа (слой 3). Состоит из 4 колонок шириной 306 px. Ширина каждой колонки может изменяться в соответствии с контентом, но общая сумма сторон и отступов не должна превышать допустимый размер слоя 2 (1344 px). Слой 3 — определяет границы основного контента.

Зависимый контент (слой 4). Состоит из 4 колонок, шириной N px, где N — переменная, значение которой зависит от размерной сетки слоя 3. 

Ниже приведены размерная сетка модуля и примеры использования.

3 columns

Структура слоев модуля 1 и 2 соответствует модулю Longread.

Основа (слой 3). Состоит из одного контейнера шириной 1140 px. Контейнер является оберткой для блочных компонентов.

Зависимый контент (слой 4). Состоит из 3 колонок, шириной 348 px. 

Ниже приведены размерная сетка модуля и примеры использования.

2 columns

Структура слоев модуля 1 и 2 соответствует модулю Longread.

Основа (слой 3). Состоит из одного контейнера шириной 1296 px. Контейнер является оберткой для блочных компонентов.

Зависимый контент (слой 4). Состоит из 2 колонок, шириной 616 px. Где левая и правая части используются для размещения графического контента и текстового.

Ниже приведены размерная сетка модуля и примеры использования.