В результате выполнения этой части задания вы получите набор стилей для блоков дизайн-системы. В дальнейшем при вёрстке смысловых блоков вы сможете задавать их размеры и внешний вид путем примиксовывания блоков дизайн-системы к смысловым блокам и их элементам.
Все блоки дизайн-системы условно можно разбить на четыре слоя, где каждый последующий связан с предыдущим, что обеспечивает органичное наслоение.
- тема
- каркас
- layout
- grid
- паттерны
- card
- form
- informer
- icon-plus
- section
- list
- контент
- text
- avatar
- brand-logo
- placeholder
- button
- input
- image
Нужно написать блок theme с набором модификаций на цвета, размеры текста и отступы. Тема будет набрасываться на любой DOM-узел и задавать правила относительно того, как будут отображаться все сущности внутри неё.
Блок theme отвечает за глобальные переменные отступов, цветов и типографики. Каждый модификатор блока участвует в формировании внешнего вида интерфейса. Переменные, находящиеся в теме, пробрасываются во все блоки.
| Модификатор | Значение | Описание |
|---|---|---|
| color | project-default, project-brand, project-inverse, megafon-brand |
Цвета всех элементов интерфейса |
| space | default |
Размеры отступов между элементами интерфейса |
| size | default |
Размеры типографических величин |
В значениях модификатора color должны содержаться переменные на основные состояния фонов блоков и типографики.
.theme_color_project-default — цветовая схема со светлым фоном и яркими акцентными контролами.
Значения фонов блоков:
- дефолтный #FFFFFF;
- акцентный #0056B3;
- бордерный #000000.
Значения состояний текста:
- основной: #000000;
- второстепенный: rgba(0, 0, 0, 0.6);
- дополнительный: rgba(0, 0, 0, 0.3),
- ссылочный: #0070f0.
.theme_color_project-brand — цветовая схема с ярким фоном и светлыми акцентными контролами.
Значения фонов блоков:
- дефолтный: #0070f0;
- акцентный: #FFFFFF;
- бордерный: #FFFFFF.
Значения состояний текста:
- основной: #FFFFFF;
- второстепенный: rgba(255, 255, 255, 0.6);
- дополнительный: rgba(255, 255, 255, 0.3),
- ссылочный: #FFFFFF.
.theme_color_project-inverse — цветовая схема с тёмным фоном и акцентными контролами.
Значения фонов блоков:
- дефолтный: #000000;
- акцентный: #FFFFFF;
- бордерный: #FFFFFF.
Значения состояний текста:
- основной: #FFFFFF;
- второстепенный: rgba(255, 255, 255, 0.6);
- дополнительный: rgba(255, 255, 255, 0.3),
- ссылочный: #0070f0.
.theme_color_project-warning — цветовая схема с оранжевым предупреждающим фоном и светлыми акцентными контролами.
Значения фонов блоков:
- дефолтный: #FF9900;
- акцентный: #FFFFFF;
- бордерный: #FFFFFF.
Значения состояний текста:
- основной: #FFFFFF;
- второстепенный: rgba(255, 255, 255, 0.6);
- дополнительный: rgba(255, 255, 255, 0.3),
- ссылочный: #FFF.
.theme_color_megafon-brand — цветовая схема с ярким фоном фирменного цвета «Мегафона» и светлыми акцентными контролами.
Значения фонов блоков:
- дефолтный: #1FA55D;
- акцентный: #FFFFFF;
- бордерный: #FFFFFF.
Значения состояний текста:
- основной: #FFFFFF;
- второстепенный: rgba(255, 255, 255, 0.6);
- дополнительный: rgba(255, 255, 255, 0.3),
- ссылочный: #FFF.
Нужно написать размерный модификатор темы, содержащий переменные размеров и межстрочных интервалов:
.theme_size_default — дефолтная линейка отступов
Значения размеров высоты текста (так как в задании текст в виде линий):
- s: 7px;
- m: 8px;
- l: 10px;
- xl: 11px;
- xxl: 13px.
Значения межстрочных интервалов:
- s: 18px;
- m: 21px;
- l: 25px;
- xl: 28px;
- xxl: 34px.
Нужно написать модификатор на отступы, содержащий все переменные, которые используются для отбивки элементов и блоков внутри смысловых сущностей и каркасных конструкций.
.theme_space_default — дефолтная размерная линейка.
Пример размеров текста:
- xxxs: 2px;
- xxs: 4px;
- xs: 8px;
- s: 12px;
- m: 16px;
- l: 20px;
- xl: 24px;
- xxl: 32px;
- xxxl: 40px;
- xxxxl: 48px.
.theme_breakpoint_default — модификатор для точек перестроения. На экране с размером меньше 1144px все блоки должны перестроиться один под другим.
.theme_gap_small — модификатор на отступ между колонками и отступами в сетке. В стилях содержит переменную gap, которая на десктопе имеет значение, соответствующее xxxl-отступу, а в мобильном представлении m. Для получения половинчатого значения переменная gap делится на два.
Нужно написать стили для блоков, отвечающих за структуру страниц и адаптивное перестроение блоков.
Служит для описания обвязки страницы.
| Элемент | Описание |
|---|---|
| container | Контейнер для контента секции |
Один из основных дочерних элементов блока layout, в котором лежит весь контент.
Модификаторы элемента container |
Значение | Описание |
|---|---|---|
| align | center |
Выравнивание контейнера по горизонтали |
| size | s m |
Максимальная ширина контейнера |
Для s модификатора нужно указать ширину 880px, для m — 1144px.
Адаптивная сетка для контентных блоков.
| Модификаторы | Значение | Описание |
|---|---|---|
| xs-columns | 3 |
Количество возможных колонок при ширине экрана screen-xs |
| s-columns | 3 6 |
Количество возможных колонок при ширине экрана screen-s |
| m-columns | 12 10 |
Количество возможных колонок при ширине экрана screen-m |
| col-gap | two-thirds full |
Отступ между колонками |
| row-gap | half full |
Отступ между строками |
| Элемент | Описание |
|---|---|
| fraction | Колоночный элемент c шириной в несколько колонок |
Контейнер, внутрь которого добавляются смысловые блоки
Модификаторы элемента fraction |
Значение | Описание |
|---|---|---|
| xs-col | 3 |
Ширина элемента в колонках при ширине экрана screen-xs |
| m-col | 2 3 4 5 8 |
Ширина элемента в колонках при ширине экрана screen-m |
Нужно написать стили для блоков, отвечающих за визуальное представление и структуру наиболее распространённых интерфейсных сущностей.
Паттерн card — карточка для представления информации в компактном формате.
| Модификаторы | Значение | Описание |
|---|---|---|
| border | all |
Выделение границ карточки |
| view | default |
Фон подложки |
| Элемент | Описание |
|---|---|
| content | Элемент для основного контента |
| footer | Подвал карточки или контента |
Основной дочерний элемент паттерна card, в котором лежит весь контент.
| Модификаторы | Значение | Описание |
|---|---|---|
| distribute | center |
Распределение элементов по горизонтали |
| vertical-align | center |
Вертикальное выравнивание в футере |
| space-a | m xl l xxl |
Внутренние отступы со всех сторон |
Элемент с абсолютным позиционированием, прижатый к низу родительского блока. Рекомендуется для использования в роли подвала карточки или элемента content.
Модификаторы элемента footer |
Значение | Описание |
|---|---|---|
| distribute | between center right |
Распределение элементов по горизонтали |
| vertical-align | center top bottom |
Вертикальное выравнивание в элементе |
| space-a | m l xl xxl |
Внутренние отступы со всех сторон |
Паттерн form — это визуальное представление веб-формы, которая принимает и отправляет данные пользователя.
| Модификаторы | Значение | Описание |
|---|---|---|
| border | all |
Обводка всей формы. Цвет границы определяется темой. Ширина границы — 3px. |
| view | default |
Задает цвет фона. Данное значение модификатора говорит о том, что цвет фона задаётся выбранной темой. |
| Элемент | Описание |
|---|---|
| item | Структурная единица паттерна, обычно строка формы |
| label | Лейбл для инпута или другого контрола |
| control | Контейнер для инпута или другого контрола |
Основные дочерние элементы паттерна — элементы item. Допускается любая вложенность элементов.
Модификаторы элемента item |
Значение | Описание |
|---|---|---|
| border | bottom |
Нижняя граница |
| distribute | between |
Распределение контента по горизонтали |
| vertical-align | center |
Выравнивание контента по вертикали |
| indent-b | xxxs xxs s m l xl xxl xxxl |
Внешний отступ снизу |
| space-h | xxxs xxs s m l xl xxl xxxl |
Внутренние отступы по горизонтали |
| space-v | xxxs xxs s m l xl xxl xxxl |
Внутренние отступы по вертикали |
У последнего пункта в списке при использовании модификатора border со значением bottom обнуляются стили на границу во избежание пересечения с круговой границей самого блока.
Используются в паре, когда лейбл и контрол должны стоять в одну строку. В случае, когда лейбл находится над контролом, обёртки не нужны.
Модификаторы элемента label |
Значение | Описание |
|---|---|---|
| width | default |
Ширина элемента 35% строки |
Шапка формы для указания заголовка и краткого описания. Не имеет визуального представления и примиксовывается к сущностям смыслового блока в связке с элементом item в нужной модификации.
Контентый блок формы с полями для заполнения. Не имеет визуального представления и примиксовывается к сущностям смыслового блока в связке с элементом item в нужной модификации.
Строка контентного блока. Не имеет визуального представления и примиксовывается к сущностям смыслового блока в связке с элементом item в нужной модификации.
Подвал формы для размещения акцентного контрола и текста подсказки. Не имеет визуального представления и примиксовывается к сущностям смыслового блока в связке с элементом item в нужной модификации.
Информационный блок, имеющий статус. Нужное оформление достигается путём миксования к нему блока темы со статусным значением цветового модификатора (например, theme_color_project-warning).
Модификаторы элемента content |
Значение | Описание |
|---|---|---|
| distribute | default between center |
Распределение контента по горизонтали |
| space-a | xl xxl |
Внутренние отступы по всем сторонам |
Располагается в конце информера для кнопок и других контролов.
Модификаторы элемента action |
Значение | Описание |
|---|---|---|
| distribute | default between center |
Распределение контента по горизонтали |
| space-a | xl xxl |
Внутренние отступы по всем сторонам |
list используется для вертикального представления повторяющихся сущностей. Отлично подходит для отображения истории, контактов, вертикальных меню.
| Модификаторы | Значение | Описание |
|---|---|---|
| border | all |
Обводка всего списка |
| view | default |
Фон |
Единственный элемент паттерна, который определяет строку списка. Является контейнером для контента строки. Элементы item могут включать в себя друг друга.
Модификаторы элемента item |
Значение | Описание |
|---|---|---|
| border | bottom top |
Обводка |
| distribute | between |
Распределение контента по горизонтали |
| vertical-align | center |
Вертикальное выравнивание контента |
| indent-t | m |
Внешний отступ сверху |
| indent-b | s m l xl |
Внешний отступ снизу |
| space-b | s |
Внутренний отступ снизу |
| space-a | l |
Внутренние отступы со всех сторон |
Самый маленький и самый популярный паттерн pt-icon-plus выравнивает любой графический элемент рядом с контентом.
Скриншот.
| Модификаторы | Значение | Описание |
|---|---|---|
| vertical-align | center |
Вертикальное выравнивание иконки относительно текста |
| Элемент | Описание |
|---|---|
| icon | Контейнер для графичекого элемента |
| block | В него вкладывается контент, например текст |
Элемент-контейнер для графического элемента. Может располагаться как до, так и после блока с текстом.
| Модификаторы элемента. | Значение | Описание |
|---|---|---|
| indent-r | s m |
Отступ справа |
| indent-l | l |
Отступ слева |
Элемент в который вкладывается контент, например текст. Используется без модификаторов
Контейнер для отделения группы блоков.
| Модификатор | Значение | Описание |
|---|---|---|
| indent-b | xxl xxxxl |
Внешний отступ снизу |
| space-v | xxl xxxxl |
Внутренние отступы по вертикали |
Нужно написать стили для блоков, отвечающих за наполнение.
В основе любого интерфейса лежит типографика.
В вебе у текста может быть много разных свойств, от которых зависит его отображение. В нашем случае мы можем управлять этими свойствами, обернув текст в блок text и применив набор модификаторов.
| Модификатор | Значение | Описание |
|---|---|---|
| align | center |
Горизонтальное выравнивание текста |
| size | s m l xl xxl |
Размер текста |
| type | h1 h2 h3 p |
Тип текста |
| view | primary secondary ghost link |
Цвет текста |
Модификатор type нужен для использования блока text на текстовых страницах. Модификатор type задаёт отступы согласно рекомендованным типографическим правилам.
Значения модификатора type
- заголовок первого уровня — margin: 15px 0 21px;
- заголовок второго уровня — margin: 48px 0 20px;
- заголовок третьего уровня — margin: 43px 0 0;
- параграф — margin: 15px 0 21px.
Для эмуляции слов, внутрь блока складывается элемент word.
| Модификатор | Значение | Описание |
|---|---|---|
| width | s m l |
Ширина слова |
С увеличением размерного модификатора текстового блока увеличивается ширина элементов word.
Размерный модификатор блока text |
Модификатор | Ширина |
|---|---|---|
| s | s m l |
20px 48px 100px |
| m | s m l |
24px 56px 114px |
| l | s m l |
28px 68px 138px |
| xl | s m l |
32px 74px 154px |
| xxl | s m l |
36px 88px 184px |
С увеличением размерного модификатора текстового блока увеличивается высота word
Размерный модификатор блока text |
Значение высоты элемента word |
|---|---|
| s | 7px |
| m | 8px |
| l | 10px |
| xl | 11px |
| xxl | 13px |
Количество слов внутри каждой интерфейсной сущности можно взять из файла text-mods.md
Блок для отображения аватарки пользователя. По умолчанию имеет такой же цвет фона, как и цвет основного текста.
| Модификатор | Значение | Описание |
|---|---|---|
| size | m |
Размер аватарки |
В размерном модификаторе со значением m имеет размер 60px на 60px.
Служит для отображения логотипов брендов, вписанных в разные формы.
| Модификатор | Значение | Описание |
|---|---|---|
| name | yota megafon kcell mts |
Изображение логотипа |
| size | xxs xs s m l |
Размер логотипа |
Логитипы имеют следующие цвета фонов:
yota— #00c0f8;megafon— #33c778;kcell— #692b96;mts— #f70000.
Логитипы имеют следующие размеры:
xxs— 24px x 24px;xs— 32px x 32px;s— 40px x 40px;m— 60px x 60px;l— 80px x 80px.
Блок служит для отображения изображений заглушек, например в информерах. По умолчанию имеет такой же цвет фона как и цвет основного текста.
| Название | Значения | Описание |
|---|---|---|
| size | m |
Размер |
В размерном модификаторе со значением m имеет размер 72px на 72px.
Блок служит для отображения кнопок. Так как никакая функциональность не подразумевается, её следует сделать обычным блоком (div).
| Название | Значения | Описание |
|---|---|---|
| size | s m l xl xxl |
Размер |
| width | full |
Ширина |
В размерном модификаторе со значениями s имеет высоту 24px, m 32px, l 42px, xl 56px, xxl 64px и ширину 200px во всех значениях. Блок имеет модификатор на управление шириной с возможностью растягиваться на всю доступную область. В значении цвета фона принимает акцентную переменную.
Блок служит для отображения полей ввода. Так как никакая функциональность не подразумевается, его следует сделать обычным блоком (div).
| Название | Значения | Описание |
|---|---|---|
| size | s m l xl xxl |
Размер |
В размерном модификаторе со значениями s имеет высоту 24px, m 32px, l 42px, xl 56px, xxl 64px. По умолчанию растягивается на всю доступную ширину.
Блок служит для отображения изображений. Растягивается на всю ширину, имеет границу и содержит заглушку.
Заглушка(инверсия)
Написать блок аккордеона, которым должен раскрываться список. Он должен состоять из двух элементов:
- первый миксуется к части элемента списка, которая всегда видна;
- второй миксуется к части списка, которая должна скрываться.
По клику на видимую область скрытая должна раскрываться.
Сформированный блок theme с модификаторами на цвета (со значениями project-default, project-brand, project-inverse, project-warning, megafon-brand), размеры типографики (c дефолтным значением), отступы (c дефолтным значением) и брейкпойнты (c дефолтным значением). В стилях блока темы должны описываться все переменные с присвоением необходимых значений в зависимости от модификаторов (значения описаны в таблице).
Сформированный блок layout и блок grid со стилями на значения всех модификаторов (информация есть в таблице).
Сформированный блок card, form, list, icon-plus со стилями на значения всех модификаторов (информация есть в таблице). В значения свойств цветов и отступов, которые описываются в значениях их модификаторов, следует присваивать переменные из темы.
Сформированный блок text и блок brand-logo со стилями на значения всех модификаторов (информация есть в таблице). Значениям размеров и межстрочных интервалов текстового блока, которые описываются в значениях его модификаторов, следует присваивать переменные из темы.