Skip to content

BASE.md

Latest commit

 

History

History
530 lines (384 loc) · 33.5 KB

BASE.md

File metadata and controls

530 lines (384 loc) · 33.5 KB

Базовые блоки дизайн-системы

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

Все блоки дизайн-системы условно можно разбить на четыре слоя, где каждый последующий связан с предыдущим, что обеспечивает органичное наслоение:

  1. тема,
  2. каркас:
  • layout,
  • grid,
  1. паттерны:
  • card,
  • form,
  • informer,
  • icon-plus,
  • section,
  • list,
  1. контент:
  • text,
  • avatar,
  • brand-logo,
  • placeholder,
  • button,
  • input,
  • image.

Слой темы

Блок theme

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

Модификаторы

Каждый модификатор блока theme участвует в формировании внешнего вида интерфейса.

Модификатор Значение Описание
color project-default, project-brand, project-inverse, project-warning Цвета всех элементов интерфейса
space default Размеры отступов между элементами интерфейса
size default Размеры типографических величин

В значениях модификатора color должны содержаться переменные для основных состояний фонов блоков и типографики.

.theme_color_project-default — цветовая схема со светлым фоном и яркими акцентными контролами

Значения фонов блоков:
- дефолтный #FFFFFF;
- акцентный #ffcc00;
- бордерный #000000.

Значения состояний текста: 
- основной: #000000;
- второстепенный: rgba(0, 0, 0, 0.6);
- дополнительный: rgba(0, 0, 0, 0.3), 
- ссылочный: #0077ff.

.theme_color_project-brand — цветовая схема с ярким фоном и светлыми акцентными контролами

Значения фонов блоков:
- дефолтный: #0077ff;
- акцентный: #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 — цветовая схема с оранжевым предупреждающим фоном и светлыми акцентными контролами

Значения фонов блоков:
- дефолтный: #ff3333;
- акцентный: #FFFFFF;
- бордерный: #ff3333.

Значения состояний текста: 
- основной: #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;
- xxxxxl: 72px.

Брейкпойнты

На экране с размером меньше 1144px все блоки должны перестроиться один под другим.

Отступы в сетке

.theme_gap_small — модификатор на отступ между колонками и отступами в сетке. В стилях содержит переменную gap, которая на десктопе имеет значение, соответствующее xxxl-отступу, а в мобильном представлении m. Для получения половинного значения переменная gap делится на два.

Расчет ширины и высоты элементов

Для всех элементов на странице свойство box-sizing имеет значение border-box.

Слой каркаса

Нужно написать стили для блоков, отвечающих за структуру страниц и адаптивное перестроение блоков.

Блок layout

Служит для описания обвязки страницы.

Элементы

Элемент Описание
container Контейнер для контента секции

Элемент container

Один из основных дочерних элементов блока layout, в котором лежит весь контент.

Модификаторы элемента container Значение Описание
align center Выравнивание контейнера по горизонтали
size s m Максимальная ширина контейнера
space-v xxxxl xxxxxl Внутренние отступы по вертикали
indent-b xxl xxxxl Внешний отступ снизу

Для s модификатора нужно указать ширину 920px, для m — 1280px.

Блок grid

Адаптивная сетка для контентных блоков.

Модификаторы

Модификаторы Значение Описание
m-columns 12 10 Количество возможных колонок при ширине экрана screen-m
col-gap two-thirds full half Отступ между колонками
row-gap half full Отступ между строками

Ширина экрана screen-m совпадает с шириной брейкпойнта и равна 1144px.

Элементы

Элемент Описание
fraction Колоночный элемент c шириной в несколько колонок

Элемент fraction

Контейнер, внутрь которого добавляются смысловые блоки

Модификаторы элемента fraction Значение Описание
m-col 2 3 4 5 8 Ширина элемента в колонках при ширине экрана screen-m

Слой паттернов

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

Блок card

Блок card — карточка для представления информации в компактном формате.

Модификаторы

Модификаторы Значение Описание
border all Выделение границ карточки
view default Фон подложки

Элементы

Элемент Описание
content Элемент для основного контента
footer Подвал карточки или контента

Элемент content

Основной дочерний элемент блока card, в котором лежит весь контент.

Модификаторы Значение Описание
distribute center Распределение элементов по горизонтали
vertical-align center Вертикальное выравнивание в футере
space-a m xl l xxxl Внутренние отступы со всех сторон

Элемент footer

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

Модификаторы элемента footer Значение Описание
distribute between center right Распределение элементов по горизонтали
vertical-align center top bottom Вертикальное выравнивание в элементе
space-a m l xl xxl Внутренние отступы со всех сторон

Блок form

Блок form — это визуальное представление веб-формы, которая принимает и отправляет данные пользователя.

Модификаторы блока

Модификаторы Значение Описание
border all Обводка всей формы. Цвет границы определяется темой. Ширина границы — 3px.
view default Задает цвет фона. Данное значение модификатора говорит о том, что цвет фона задаётся выбранной темой.

Элементы блока

Элемент Описание
item Структурная единица блока, обычно строка формы
label Лейбл для инпута или другого контрола
control Контейнер для инпута или другого контрола

Элемент item

Основные дочерние элементы блока — элементы item. Допускается любая вложенность элементов.

Модификаторы элемента item Значение Описание
border bottom Нижняя граница
distribute between Распределение контента по горизонтали
vertical-align center Выравнивание контента по вертикали
indent-b xxxs xxs s m l xl xxl xxxl xxxxl Внешний отступ снизу
space-h xxxs xxs s m l xl xxl xxxl xxxxl Внутренние отступы по горизонтали
space-v xxxs xxs s m l xl xxl xxxl xxxxl Внутренние отступы по вертикали

У последнего пункта в списке при использовании модификатора border со значением bottom обнуляются стили на границу во избежание пересечения с круговой границей самого блока.

Элементы label и control

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

Модификаторы элемента label Значение Описание
width default Ширина элемента 35% строки

Блок informer

Информационный блок, имеющий статус. Нужное оформление достигается путём миксования к нему блока темы со статусным значением цветового модификатора (например, theme_color_project-warning).

Модификаторы блока

Модификаторы Значение Описание
border all Обводка всего блока. Цвет границы определяется темой. Ширина границы — 3px.
view default Фон всего блока. Цвет фона определяется темой.

Элемент content

Модификаторы элемента content Значение Описание
distribute default between center Распределение контента по горизонтали
space-a xl xxl Внутренние отступы по всем сторонам

Элемент action

Располагается в конце информера для кнопок и других контролов.

Модификаторы элемента action Значение Описание
distribute default between center Распределение контента по горизонтали
space-a xl xxl Внутренние отступы по всем сторонам

Блок list

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 m Внутренние отступы со всех сторон

Блок icon-plus

Самый маленький и самый популярный блок pt-icon-plus выравнивает любой графический элемент рядом с контентом.

Скриншот.

Модификаторы блока

Модификаторы Значение Описание
vertical-align center Вертикальное выравнивание иконки относительно текста

Элементы

Элемент Описание
icon Контейнер для графичекого элемента
block В него вкладывается контент, например текст

Элемент icon

Элемент-контейнер для графического элемента. Может располагаться как до, так и после блока с текстом.

Модификаторы элемента. Значение Описание
indent-r s m Отступ справа
indent-l l Отступ слева

Элемент block

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

Блок section

Контейнер для отделения группы блоков.

Модификаторы блока

Модификатор Значение Описание
indent-b xxl xxxxl Внешний отступ снизу
space-v xxl xxxxl Внутренние отступы по вертикали

Слой контентных блоков

Нужно написать стили для блоков, отвечающих за наполнение.

Блок text

В основе любого интерфейса лежит типографика.

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

Модификаторы блока

Модификатор Значение Описание
align center Горизонтальное выравнивание текста
size s m l xl xxl Размер текста
type h1 h2 h3 p Тип текста
view primary secondary ghost link Цвет текста

Модификатор type нужен для использования блока text на текстовых страницах. Модификатор type задаёт отступы согласно рекомендованным типографическим правилам.

Значения модификатора type:

  • заголовок первого уровня — margin 18px x 24px;
  • заголовок второго уровня — margin 45px x 21px;
  • заголовок третьего уровня — margin 42px x 0;
  • параграф — margin 15px x 21px.

Элемент word

Для эмуляции слов, внутрь блока складывается элемент 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

Блок avatar

Блок для отображения аватарки пользователя. По умолчанию имеет такой же цвет фона, как и цвет основного текста.

Модификаторы блока

Модификатор Значение Описание
size m Размер аватарки

В размерном модификаторе со значением m имеет размер 60px на 60px.

Блок brand-logo

Служит для отображения логотипов брендов, вписанных в разные формы.

Модификаторы блока

Модификатор Значение Описание
name blue green red purple Изображение логотипа
size xxs xs s m l Размер логотипа

Логитипы имеют следующие цвета фонов:

  • blue — #5dcdf9;
  • green — #23b324;
  • red — #ff3333;
  • purple — #c62cff.

Логитипы имеют следующие размеры:

  • xxs — 24px x 24px;
  • xs — 32px x 32px;
  • s — 40px x 40px;
  • m — 60px x 60px;
  • l — 80px x 80px.

Блок placeholder

Блок служит для отображения изображений заглушек, например в информерах. По умолчанию имеет такой же цвет фона как и цвет основного текста.

Модификаторы блока

Название Значения Описание
size m Размер
view primary Цвет фона. Задается темой и соответствует основному цвету текста

В размерном модификаторе со значением m имеет размер 72px на 72px.

Блок button

Блок служит для отображения кнопок. Такая функциональность не подразумевается, так что его следует сделать обычным блоком (div).

Модификаторы блока

Название Значения Описание
size s m l xl xxl Размер
width full Ширина

В размерном модификаторе со значениями s имеет высоту 24px, m — 32px, l — 42px, xl — 56px, xxl — 64px и ширину 200px во всех значениях. Блок имеет модификатор на управление шириной с возможностью растягиваться на всю доступную область. В значении цвета фона принимает акцентную переменную.

Блок input

Блок служит для отображения полей ввода. Такая функциональность не предполагается, так что его следует сделать обычным блоком (div).

Модификаторы блока

Название Значения Описание
size s m l xl xxl Размер

В размерном модификаторе со значениями s имеет высоту 24px, m — 32px, l — 42px, xl — 56px, xxl — 64px. По умолчанию растягивается на всю доступную ширину.

Блок image

Блок служит для отображения изображений. Растягивается на всю ширину, имеет сплошную границу шириной 3px и содержит заглушку. Заглушка, цвета фона и границы задаются темой или стилями контентного блока.

Изображения с темой project-default имеют заглушку черного цвета.

Заглушка

Изображения с темами project-inverse и project-brand имеют заглушку белого цвета.

Заглушка(инверсия).

Интерактивные блоки

Написать блок аккордеона, которым должен раскрываться список. Он должен состоять из двух элементов:

  • первый миксуется к части элемента списка, которая всегда видна;
  • второй миксуется к части списка, которая должна скрываться.

По клику на видимую область скрытая должна раскрываться.

Что ожидаем на выходе

Слой темы:

  • cформированный блок theme с модификаторами на цвета (со значениями project-default, project-brand, project-inverse, project-warning),
  • размеры типографики (c дефолтным значением), отступы (c дефолтным значением) и брейкпойнты (c дефолтным значением); в стилях блока темы должны описываться все переменные с присвоением необходимых значений в зависимости от модификаторов (значения описаны в таблице).

Слой каркаса:

  • cформированные блоки layout и grid со стилями на значения всех модификаторов (информация есть в таблице).

Слой паттернов:

  • cформированные блоки card, form, list, icon-plus со стилями на значения всех модификаторов (информация есть в таблице); в значения свойств цветов и отступов, которые описываются в значениях их модификаторов, следует присваивать переменные из темы.

Слой контентных блоков:

  • cформированные блоки text и brand-logo со стилями на значения всех модификаторов (информация есть в таблице); значениям размеров и межстрочных интервалов текстового блока, которые описываются в значениях его модификаторов, следует присваивать переменные из темы.