Дневники дизайн-системы. Выпуск 4. Структура страниц

Предыдущие выпуски:

• Выпуск 1. Вступление
• Выпуск 2. Цвета и типографика
• Выпуск 3. Система отступов

---

Общее описание структуры

Страница состоит из секций, контейнеров и строк.

На странице может быть неограниченное количество секций. Внутри секции могут лежать несколько контейнеров, каждый из которых содержит одну или более строк.

Важно соблюдать вложенность: секция → контейнер → строка.

<div class="section">
    <div class="container">
        <div class="row"></div>
    </div>
</div>

Секция → .section

Базовая смысловая единица страницы.

Имеется набор родственных элементов, которые стилизованы и ведут себя подобно секции:

• .header — шапка сайта;
• .nav — навигация (в стоке будет подразумеваться классическая линейная навигация под шапкой);
• .footer — подвал.

Секция описывается следующими правилами:

• растягивается на ширину окна;
• имеет боковой отступ в половину требуемого для страницы;
• имеет максимальный вертикальный отступ.

.section {
  padding: 0 16px;
}

Секции обычно идут одна за другой (это справедливо для контейнеров и строк), поэтому вертикальный отступ удобно задавать через соседние селекторы:

.section + .section {
  margin-top: 104px;
  @media all and (max-width:759px) {
    margin-top: 72px;
  }
}

В примере видно что на экранах мобильных устройств я уменьшаю интервал.

Секция установленная следом за шапкой или навигацией имеет уменьшенный отступ. Обширное пустое пространство после шапки редко выглядит эстетично.

.header + .section,
.nav + .section {
  margin-top: 52px;
  @media all and (max-width:759px) {
    margin-top: 40px;
  }
}

Перед подвалом, наоборот, увеличенный интервал уместен.

.section + .footer {
  margin-top: 156px;
  @media all and (max-width:759px) {
    margin-top: 104px;
  }
}

Контейнер → .container

Контейнер ограничивает максимальную ширину контента и одновременно является дополнительной структурной единицей, позволяющей гибко настраивать иерархию элементов страницы.

Контейнер тянется на ширину родительской секции, но имеет максимальную ширину: 1280px — для десктопов; 760 — для планшетов и десктопов с маленькими экранами; 480 — для мобильных устройств.

.container {
  max-width: 1280px;
  margin: 0 auto;
  @media all and (max-width:1140px) {
    max-width: 760px;
  }
  @media all and (max-width:759px) {
    max-width: 480px;
  }
}

Контейнеры имеют уменьшенный, относительно секций, интервал.

.container + .container {
  margin-top: 52px;
  @media all and (max-width:759px) {
    margin-top: 40px;
  }
}

Строка → .row

Строка — самый младший структурный элемент, внутри неё живут блоки и компоненты.

Строки имеют боковой отступ, в половину требуемого для сайта (первая у секции).

Строки тянутся на ширину родительского контейнера.

Строки имеют наименьший из структурных блоков вертикальный интервал.

.row {
  padding: 0 16px;
  @media all and (max-width:759px) {
    padding: 0 8px;
  }
}
.row + .row,
.row.top-margin-on {
  margin-top: 32px;
  @media all and (max-width:759px) {
    margin-top: 28px;
  }
}

Допускается заменять строку кастомными блоками. Но при этом важно следить чтобы они не выбивались из общей стилистики.

Дополнения

Предусмотрел небольшой «костыль» для нестандартных случаев: каждому структурному элементу можно добавить класс .margin-top-on или .margin-top-off, который принудительно включит или отключит вертикальный отступ.

А что там в фигме?

Считаю, что макету стоит стремиться соответствовать будущей вёрстке.

Я говорю о стремлении, потому что полное соответствие, конечно же невозможно — фигма имеет достаточно ограничений, html и css куда более гибкие инструменты. Например, дюжина карточек с шириной в четверть блока, в вёрстке без проблем выстраиваются в три строки. В фигме же, без применения сторонних плагинов (а я их стараюсь избегать) так не сделать, приходится делать избыточную обёртку для каждой из строк.

Но что касается структуры, описанной выше, она легко воспроизводится в макетах и я повторяться не стану. Лучше дополню правила работы в фигме, упомянутые в прошлых выпусках.

Важной составляющей на этапе разработки считаю нейминг, для дизайн-систем это особенно актуально. Потому что разобраться во всех этих Line 98 и Rectangle 39 бывает очень сложно. 10 минут потраченные вначале могут сэкономить час в будущем. При этом не забываю о вреде чрезмерного перфекционизма, например, если заглянуть на страницу - illustrations for blog в фигме, на которой я собираю схемы для этой серии постов, то внутри будет хаос. Всё потому что это одноразовые сущности: единожды сделав и опубликовав иллюстрацию, я вряд ли обращусь к ней ещё раз.

В нейминге объектов придерживаюсь следующих правил:

• имя объекта = имя класса — container, row, page name
• если планирую миксовать блоки, то записываю имена через обратный слеш (прямой в фигме используется при обозначении состояний) — row \ demo grid
• если требуется уточнение, пишу его в скобках, полезно для удобства навигации среди однотипных блоков — container (for cards)

Ещё немного правил, которым стараюсь следовать:

• Везде где можно использую автолэйауты, группировать стараюсь при помощи фреймов — они гибче управляются.
• Если интервалы между элементами одинаковы, то задавать их лучше в настройках автолэйаута родителя, если интервалы разнятся, то лучше использовать отступы в самих элементах. Комбинированные варианты сложнее читаются.

Вот так выглядит структура демо-макета в фигме.

---

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

• на гитхабе;
• в фигме.

Полный список записей серии смотрите по тегу #raw-alfa