Пространство имён

Чтобы использовать компоненты дизайн-системы, достаточно поместить их в контейнер с классом wds. Этот класс можно назначить тегу body или создать отдельные контейнеры во всей местах, где должна работать дизайн-система.

Все имена классов и переменных имеют префикс wds__. Cтандартным хтмл-элементам не требуется специальный класс, их оформление определено для тегов внутри .wds.

Размерности

Система знает только два типа устройств: mobile (с экраном шириной до 768 CSS-пикселей) и desktop (все остальные).

Основная единица измерения — em, в них заданы не только кегль с интерлиньяжем, но и все поля и отступы. По умолчанию 1 em равняется 20 px для ширины экрана до 1400 px и 21 px для большей ширины. Для мобильных 1 em по умолчанию равен 17 px. Эти значения можно переопределить.

Выбирая шрифт, пользователь системы задаёт «коэффициент плотности вёрстки» — глобальную переменную --wds__density. Она соответствует стандартному интерлиньяжу, такжн и их неё вычисляются значения внутренних полей и внешних отступой всех компонентов.

Значение по-умолчанию — 1.3, рекомендованный диапазон значений — от 0.8 (очень плотная вёрстка, нужен шрифт с крупным очком и короткими выносными элементами) до 1.8 (очень разреженная вёрстка, адекватно для светлых шрифтов с мелким очком и длинными выносными элементами)

Переменные

WDS позволяет настроить цветовую палитру и основные параметры типографики через css-переменные.

Типографика

Шрифт по-умолчанию — PT Root в начертаниях Regular, Medium и Bold.

--wds__density — коэффициент плотности вёрстки.

Размеры шрифта увеличиваются в заданных диапазонах на заданных ширинах экрана. По умолчанию это от 16 до 20 пикселей на компьютерах при ширине от 1000 до 1600 пикселей и нескалируемые 17 пикселей на телефонах при ширине от 320 до 768 пикселей.

Заголовки увеличиваются умножением на коэффициент размерной сетки. Например, изначальное состояние 20px, коэффициент 1.5. Значит, следующий заголовок будет 30px. Следующий 45px.

Основано на Утопии.

Диапазоны

• --fluid-min-width— ширина экрана, с которой начинается растяжение шрифта
• --fluid-max-width— ширина, на которой растяжение заканчивается
• --fluid-screen— шрифт растягивается с этим параметром (100vw). если его зафиксировать в пикселях, не растягивается
• --type-scale-desktop— коэффициент размерной сетки на компьютерах
• --f-0-min— минимальный размер шрифта на компьютерах
• --f-0-max— максимальный размер шрифта на компьютерах
• --type-scale-mobile— коэффициент размерной сетки на телефонах
• --f-0-min-mobile— размер шрифта мин телефон
• --f-0-max-mobile— размер шрифта макс телефон

Размеры шрифта

• --step-3— h1
• --step-2— h2
• --step-1— h3
• --step-0— h4, p. базовый шрифт, переменная с размером шрифта

Цвет

Цвета хранятся в виде трёх чисел RGB. Это позволяет гибко настраивать прозрачность.

Чтобы задавать цвета css-переменными, используется css-функция RGB() (капсом) вместо sass-функции rgb():

Основные

• --wds__text-RGB— цвет текста
• --wds__link-RGB— цвет ссылки
• --wds__hover-RGB— цвет подсветки активных элементов при наведении курсора
• --wds__accent-RGB— цвет для кнопок и других кликабельных или активных элементов; отличается от цвета бренда, чтобы оставаться заметным среди брендовых иллюстраций
• --wds__surface-RGB— цвет для плашей, текстовых полей и других «поверхностей», лежащих «в другом визуальном слое»

Дополнительные

• --wds__background-RGB— цвет фона
• --wds__main-RGB— узнаваемый цвет бренда; по умолчанию наследует --wds__accent-RGB
• --wds__code-RGB— цвет для выделения кода
• --wds__error-RGB— цвет для сообщений об ошибках
• --wds__success-RGB— цвет для сообщений об успешном выполнении
• --wds__outline-RGB— цвет обводки для элементов в фокусе; по умолчанию наследует --wds__surface-RGB

Для тёмных тем

• --wds__on-accent-RGB— цвет текста на фоне цвета accent; по умолчанию наследует --wds__background-RGB
• --wds__on-main-RGB— цвет текста на фоне цвета main; по умолчанию наследует --wds__background-RGB
• --wds__on-surface-RGB— цвет текста на фоне цвета surface; по умолчанию наследует --wds__text-RGB

Компоненты

Редакционные форматы

Абзац текста <p>

Винвестор работает с октября 2018 года. За это время мы успели разработать транзакционную платформу и провести десятки рыночных исследований. В команде около 40 человек: программисты, специалисты по безопасности, профессиональные брокеры и инвесторы, менеджеры, дизайнеры, редакторы и аналитики.

Лидер-абзац p.wds__lead

Заголовки

<h1>

Полюбить свои цифры

<h2>

Привычки скучных людей

<h3>

Считать деньги с удовольствием

<h4>

Раскладывать по полочкам и заработать на квартиру

<h5>

Радовать себя и сделать ремонт

<h6>

Получать кэшбек и развлекаться

Маркер <mark>

Сколько может длиться финансовый кризис

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

Цитата <blockquote>

Основной принцип финансовой независимости — тратить меньше, чем зарабатываешь и инвестировать разницу

Нумерованный список <ol>

1. Пункт номер 1
2. Пункт номер 2
3. Пункт номер 3

Ненумерованный список <ul>

• Пункт номер 1
• Пункт номер 2
• Пункт номер 3

<ul.checked>

• Пункт номер 1
• Пункт номер 2
• Пункт номер 3

Лейбл .wds__label

.wds__label-outline

Подробности <details>

Плашка <aside>

Иллюстрация <figure>

Подпись к иллюстрации <figcaption>

Иллюстрация с подписью:

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

.wds__figure__XXS

.wds__figure__XS

.wds__figure__S

Элементы интерфейса

Кнопка <button>

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

button.size-XS

button.size-S

button.size-M— стандартный размер

button.size-L

button.size-XL

Кнопка-ссылка .wds__button-link

Текстовое поле <input type="text">

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

input.size-XS(type='text')

input.size-S(type='text')

input.size-M(type='text')— стандартный размер

input.size-L(type='text')

input.size-XL(type='text')

.wds__input-text-line

Текстовая зона <textarea>

Чекбокс .wds__checkbox

Радиогруппа .wds__radio

.wds__radiogroup-toggle