.ids

Intuition Design System, IDS – дизайн-система для вёрстки лендингов, онлайн-изданий и любых цифровых продуктов для веба, в основе которых лежат нарративы.

Технически IDS – набор CSS-классов и JS-компонентов. Это не библиотека, а готовый шаблон вёрстки. Вы не подключаете IDS в проект как зависимость, не расширяете классы, не переопределяете свойства. Вместо этого вы тупо копируете её исходный код, и меняете его как захочется. Без проблем с совместимостью и без ломающих вёрстку апдейтов.

IDS распростаняется по лицензии СС (или как её? Далер, ты нашёл лицензию?), можно бесплатно использовать и модифицировать, никаких ограничений. Претензии тоже не принимаем, подсказать не сможет, службы поддержки нет.

Если вам интересно, но не очень понятно – у нас есть курс «Как дизайнить кодом вместо Фигмы», он поможет.

Настройка

Базовые параметры дизайн-системы задаются в файле settings.css.

Кроме того, в IDS включён normalize.css – набор корректировок, устраняющих неконсистентность реализации стилей в разных браузерах – с ним не надо ничего делать, он просто есть. Может, он и не нужен уже, но пока пусть будет.

Шрифт

В IDS по умолчанию используется шрифт PT Root UI, вариативная веб-версия. Он классный! Но дизайн-система не завязана на конкретный шрифт, вы можете подключить любой, достаточно положить шрифт в папку fonts и отредактировать раздел Fonts в файле settings.css.

Плотность

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

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

Адаптивность

IDS считает, что есть только два типа устройств: mobile и desktop. Это определяется по ширине вьюпорта (если упрощать, это ширина окна браузера): меньше 768 px – значит мобила, больше – десктоп.

IDS реализует концепцию Fluid Typography – это когда в зависимости от ширины вьюпорта рассчитывается значение font-size для body, а затем единицы em или rem используются не только для текста, но и для полей, отступов, радиусов скруглений, а иногда и габаритов отдельных элементов.

Этот подход упрощает отладку дизайна. Сначала нужно найти оптимальный диапазон значений font-size, подходящий выбранному шрифту и желаемой крупности «обычного» текста.

Этот диапазон задают переменные --desktop-font-size-min и --desktop-font-size-max. Нужно подобрать такие значения, чтобы при изменении ширины текст масштабировался, сохраняя разбивку слов по строкам. И тогда можно проверять вёрстку только на одной ширине, зная, что при любой ширине компоновка элементов сохранится.

Для мобилы нужно найти свою пару значений --mobile-font-size-min и --mobile-font-size-max, но идея ровно та же – одинаковая вёрстка на телефончиках разной ширины.

Fluid Typography не заставляет масштабировать страницу именно так – можно экспериментировать. Можно вообще сделать минимальное и максимальное значения одинаковыми, получится обычная резиновая вёрстка, но «крупность» элементов всё ещё можно будет менять через переменные.

Цвет

IDS хранит цветовую палитру в переменных. Именование цветов функциональное: для чего используется, так и называется.

Цветовая палитра живёт в файле color-palettes.css.

Каждая переменная хранит строку из трёх значений в пространстве RGB через запятую, например: 253, 47, 75.

.ids__wrapper.L – этаж с увеличенной шириной. Отличается только для десктопа, а на мобиле совпадает со стандартным.

.ids__wrapper.XL – этаж на всю ширину с минимальными полями. Отличается только для десктопа, а на мобиле совпадает со стандартным.

Для текста в одну колонку внутри стандартного этажа используется дополнительная обёртка, которая уменьшает ширину и оставляет справа дополнительное поле. Это только на десктопе, а на мобиле остаётся полная ширина.

Система отступов

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

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

Стилизация тегов

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

Вот что у нас есть:

Заголовки

h1

Главный заголовок страницы

---

h2

Заголовок второго уровня

---

h3

Заголовок третьего уровня

---

h4

Заголовок четвёртого уровня

---

h5

Заголовок пятого уровня

---

h6

Заголовок шестого уровня

---

Бывает, что тексту не нужны такие крупные заголовки как h1 или h2. Проблема в том, что по стандартам доступности на странице должен быть h1, а следующим уровнем не может быть h3, должен быть h2. Чтобы разрешить это противоречие, мы подготовили специальные классы, визуально уменьшающие h1 и h2:

h1.S

Главный заголовок, уменьшенный

---

h1.XS

Главный заголовок, уменьшенный ещё сильнее

---

h2.XS

Заголовок второго уровня, уменьшенный как-то

---

TODO: hgroup с лейблом

Текст

p

TODO: показать абзац +помельче +покрупнее +супер-крупный

p.loud

Дизайн цифровых продуктов – это в первую очередь дизайн взаимодействия.

mark code

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

Иллюстрация

figure figcaption

Список

ul li

ol li

Ссылка

a

.ids__promo-link

TODO: Псевдо-радиогруппа для скролл-навигации

Дополнительный текст

aside

.ids__note

Сетка

С помощью класса .ids__sequence можно быстро сделать сетку из одинаковых элементов, которая реализована через display:flex. Сделайте .ids__sequence родителем, а каждую ячейку сетки оберните в .ids__sequence-item:

.ids__sequence

    .ids__sequence-item

    .ids__sequence-item

Модификатор крупности

ids__sequence.XL

ids__sequence.L

ids__sequence.S

Управление отступами

.ids__sequence.XL.gap-L

.ids__sequence.XL.gap-M

.ids__sequence.XL.gap-S

Таблица

table — обычная таблица

tr, th, td — стандартные элементы таблицы. Ну разве что th приклеивается к верху окна. (TODO: реализовать залипание)