Переменные

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

Типографика

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

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

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

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

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

Диапазоны

--type-scale-desktop— коэффициент размерной сетки на компьютерах
--font-size-min— минимальный размер шрифта на компьютерах
--font-size-max— максимальный размер шрифта на компьютерах
--type-scale-mobile— коэффициент размерной сетки на телефонах
--font-size-min-mobile— размер шрифта мин телефон
--font-size-max-mobile— размер шрифта макс телефон

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

Получаются путём умножения --step-0 на коэффициент размерной сетки --type-scale-desktop или --type-scale-mobile

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

Цвет

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


                              --ids__text-RGB: 5, 5, 5;
                color: rgba(var(--ids__text-RGB), 0.7);

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

color: RGB(var(--ids__text-RGB));

Основные

--ids__text-RGB— цвет текста
--ids__link-RGB— цвет ссылки
--ids__hover-RGB— цвет подсветки активных элементов при наведении курсора
--ids__accent-RGB— цвет для кнопок и других кликабельных или активных элементов; отличается от цвета бренда, чтобы оставаться заметным среди брендовых иллюстраций
--ids__surface-RGB— цвет для плашей, текстовых полей и других «поверхностей», лежащих «в другом визуальном слое»

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

--ids__background-RGB— цвет фона
--ids__main-RGB— узнаваемый цвет бренда; по умолчанию наследует --ids__accent-RGB
--ids__code-RGB— цвет для выделения кода
--ids__error-RGB— цвет для сообщений об ошибках
--ids__success-RGB— цвет для сообщений об успешном выполнении
--ids__outline-RGB— цвет обводки для элементов в фокусе; по умолчанию наследует --ids__surface-RGB

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

--ids__on-accent-RGB— цвет текста на фоне цвета accent; по умолчанию наследует --ids__background-RGB
--ids__on-main-RGB— цвет текста на фоне цвета main; по умолчанию наследует --ids__background-RGB
--ids__on-surface-RGB— цвет текста на фоне цвета surface; по умолчанию наследует --ids__text-RGB

Компоненты

Заголовки

Прочный дизайн

h1 Прочный дизайн

Язык, который всё улучшает

h2 Язык, который всё улучшает

Как придумать язык

h3 Как придумать язык

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

h4 Смотрим сквозь дизайн

Хочет больше дизайна

h5 Хочет больше дизайна

Почему это бесит

h6 Почему это бесит

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

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

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

И отлично — он виноват, мы в домике, сидим и ждём лёгкого клиента, а пока временно страдаем.

            p.ids__lead И отлично — он виноват, мы в домике, сидим и ждём лёгкого клиента, а пока временно страдаем.
          

Что происходит на самом деле

h2 Что происходит #[mark на самом деле]

У кого-то могут включаться голоса: «это потому что ты неудачник и у тебя никогда ничего не получается и тебя все ненавидят но ты же ничего другого не умеешь всё равно так что ничего тут уже не сделаешь терпи». Это снова вот такой человек, только в обратную сторону.

            p У кого-то могут включаться голоса: «это потому что ты неудачник и у тебя никогда ничего не получается и тебя все ненавидят но ты же ничего другого не умеешь всё равно так что ничего тут уже не сделаешь терпи». Это снова #[mark вот такой человек], только в обратную сторону.
          

Ничего не надо делать

blockquote Ничего не надо делать

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

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

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

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

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

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

Привычка №1

.ids__label Привычка №1

Просто прелестно

.ids__label.ids__label-outline Просто прелестно

Пара историй из жизни

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

            
                details
  summary Пара историй из жизни
  p Я пришёл на встречу с главным инженером, чтобы обсудить всякие детали — мы уже довольно долго искали баланс между желаниями и возможностями, вроде что-то нащупывалось, решили ускорить процесс и обсудить лично.
          

            
                aside
  p Я пришёл на встречу с главным инженером, чтобы обсудить всякие детали — мы уже довольно долго искали баланс между желаниями и возможностями, вроде что-то нащупывалось, решили ускорить процесс и обсудить лично.

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

Mystical scene of a cabin on a hill. ©Julian Steenbergen

            
                figure
  img(src="/images/example-pic.jpg")
  figcaption Mystical scene of a cabin on a hill. ©Julian Steenbergen
          

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

            
                figure.XXS
  img(src="/images/example-pic.jpg")

.XXS

.XS

.S

Отступы

.ids__stack.XS

.ids__stack.S

.ids__stack.M

.ids__stack.L

.ids__stack.XL

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

button Отправить

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

button.XS

.S

.M

.L

.XL

Заполнить заявку

a.ids__button-link(href="/design-system") Заполнить заявку

input(type='text' placeholder='Текст')

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

input.XS

.S

.M

.L

.XL

Этот адрес уже используется. Если вы хотите купить книгу заново, нужен другой адрес, а если вы хотите войти, войдите

            .ids__form-error-message Этот адрес уже используется. Если вы хотите купить книгу заново, нужен другой адрес, а если вы хотите войти, #[a(href="") войдите]
          

Мы отправили ссылку для входа — проверьте почту, пожалуйста

            .ids__form-success-message Мы отправили ссылку для входа — проверьте #[a(href="") почту], пожалуйста
          

input.ids__input-text-line(type='text' placeholder='Текст')

textarea(placeholder='Текст')

            
                .ids__select
  select
    option Кошки
    option Собаки
    option Лягушки
    option Кроты
    option Хомяки
    option Баклажаны
          

Согласен, что данные обработаются

            
                .ids__checkbox
  input(type='checkbox' id="checkbox-sample")
  label(for="checkbox-sample") Согласен, что данные обработаются
          

Курица
Рыба
Ни то, ни другое

            
                input(type='radio' id='radio-sample-1' name='radio-sample' checked)
label(for='radio-sample-1') Курица
br
input(type='radio' id='radio-sample-2' name='radio-sample')
label(for='radio-sample-2') Рыба
br
input(type='radio' id='radio-sample-3' name='radio-sample')
label(for='radio-sample-3') Ни то, ни другое
          

.ids__radiogroup-toggle

Понедельник

Вторник

Среда

Четверг

.ids__radiogroup-toggle.monochrome

Понедельник

Вторник

Среда

Четверг

            
                .ids__radiogroup-toggle
  .ids__radiogroup-option
    input(type='radio' id='option1' name='radio-toggle-sample' checked)
    label(for='option1') Понедельник
  .ids__radiogroup-option
    input(type='radio' id='option2' name='radio-toggle-sample')
    label(for='option2') Вторник
  .ids__radiogroup-option
    input(type='radio' id='option3' name='radio-toggle-sample')
    label(for='option3') Среда
  .ids__radiogroup-option
    input(type='radio' id='option4' name='radio-toggle-sample')
    label(for='option4') Четверг
          

Первая версия	Цикл	Поток
Лендинг, рекламная кампания	Раздел сайта, редактор статей	Иллюстрации для статей
MVP	Спринт	Конвейер
Минимальный	Подробный	Вместо плана — чёткий процесс

            
                table
  tr 
    th Первая версия 
    th Цикл
    th Поток
  tr 
    td Лендинг, рекламная кампания
    td Раздел сайта, редактор статей
    td Иллюстрации для статей
  tr 
    td MVP
    td Спринт
    td Конвейер
  tr 
    td Минимальный
    td Подробный
    td Вместо плана — чёткий процесс
          

Сетка

Модификатор размера регулирует количество колонок сетки. Например, XXL — 2 колонки, XL — 3, L — 4, и так далее до XXS — 8 колонок.

Текст в ячейке

            
                .ids__grid.XXL.ids__grid-inset-S
  .ids__grid-cell
    p Текст в ячейке
  .ids__grid-cell
    p Текст в ячейке
          

.ids__grid.XL

.ids__grid.L

.ids__grid.M

.ids__grid.S

.ids__grid.XS

.ids__grid.XXS

Правый и нижний отступ ячейки .ids__grid-inset

            
                .ids__grid.XXL.ids__grid-inset-L
  .ids__grid-cell
  .ids__grid-cell
          


                .ids__grid.XXL.ids__grid-inset-M


                .ids__grid.XXL.ids__grid-inset-S

            
                .ids__grid.XXL
  .ids__grid-cell
  .ids__grid-cell
          

Контейнеры

.ids__wrapper — контейнер шириной 76%, автоматически выравнивается по центру маржинами

.ids__wrapper.ids__full-width — модификация с шириной 100% и паддингами

.ids__wrapper.ids__edge-to-edge — модификация с шириной 100% без паддингов

.ids__wrapper.ids__shift-right — контейнер шириной 76% с паддингом справа

.ids__wrapper.ids__shift-left — контейнер шириной 76% с паддингом слева

.ids__text — контейнер шириной 85%, в мобильной версии 100%