Дневники дизайн-системы. Выпуск 6. Заголовки

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

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

Устройство

Компонент состоит из контейнера .heading с модификаторами уровней заголовка от .heading_h1 до .heading_h4.

Внутри контейнера располагаются два элемента:

заголовок (h1 ... h6) с классами от .heading__h1 до .heading__h4;
дополнение с классом .heading__addition.

<div class="heading heading_h3">
  <h3 class="heading__h3">Заголовок</h2>
  <div class="heading__addition">
    Текст дополнения к заголовку.
  </div>
</div>

При использовании компонента важно сохранять соответствие уровней в модификаторе контейнера и классе заголовка.

Хорошо:

<div class="heading heading_h3">
  <h3 class="heading__h3">Заголовок</h2>
</div>

Плохо:

<div class="heading heading_h1">
  <h3 class="heading__h3">Заголовок</h2>
</div>

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

Например, на той самой страничке, для которой я сделал этот компонент, семантически нужно было использовать заголовки второго уровня, при этом они должны были быть маленькими. Никаких проблем: тегу <h2> присвоил класс .heading__h4.

<div class="heading heading_h4">
  <h2 class="heading__h4">1. Инструкции</h2>
</div>

Отступы и стили

Отступы у компонента полностью соответствуют таблице отступов для контента, описанной в третьем выпуске дневников дизайн-системы.

Заголовок первого уровня: margin: 0 0 40px; для десктопа и margin: 0 0 32px; для мобильных устройств.

Заголовок второго уровня: margin: 32px 0 16px; для десктопа, margin: 24px 0 16px; для мобильных устройств.

Заголовок третьего уровня: margin: 16px 0 8px; для всех экранов.

Заголовок четвёртого уровня: margin: 12px 0 8px;.

Стили назначены согласно уже разработанной типографической схемы.

@include text-style__page-name; — для heading__h1

@include text-style__heading; — для heading__h2

@include text-style__subheading; — для heading__h3

@include text-style__headline; — для heading__h4

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

Фигма

В фигме, конечно же, настроен компонент со всеми доступными вариантами:

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

Хотя нет, мобильную версию я сделал даже для четвёртого уровня, который не меняется на экранах смартфонов, но мало ли, вдруг что-то в будущем изменится.

SCSS

Пример вёрстки я уже приводил в начале заметки, сейчас же просто покажу стили компонента.

.heading {}
// margins
.heading_h1 {
  margin: 0 0 40px;
  @media all and(max-width: 759px) {
    margin: 0 0 32px;
  }
}
.heading_h2 {
  margin: 32px 0 16px;
  @media all and(max-width: 759px) {
    margin: 24px 0 16px;
  }
}
.heading_h3 {
  margin: 16px 0 8px;
}
.heading_h4 {
  margin: 12px 0 8px;
}
// headings
.heading__h1 {
  @include text-style__page-name;
  @media all and(max-width: 759px) {
    @include text-style__page-name_mobile;
  }
}
.heading__h2 {
  @include text-style__heading;
  @media all and(max-width: 759px) {
    @include text-style__heading_mobile;
  }
}
.heading__h3 {
  @include text-style__subheading;
  @media all and(max-width: 759px) {
    @include text-style__subheading_mobile;
  }
}
.heading__h4 {
  @include text-style__headline;
}
// addition typography
.heading_h1 .heading__addition {
  @include text-style__large-text;
}
.heading_h2 .heading__addition {
  @include text-style__large-text;
}
.heading_h3 .heading__addition {
  @include text-style__text;
}
.heading_h4 .heading__addition {
  @include text-style__caption;
}
// addition margins
.heading__h1 + .heading__addition {
  margin-top: 12px;
  @media all and (max-width: 759px){
    margin-top: 8px;
  }
}
.heading__h2 + .heading__addition {
  margin-top: 8px;
}
.heading__h3 + .heading__addition {
  margin-top: 8px;
}
.heading__h4 + .heading__addition {
  margin-top: 4px;
}

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

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