.ids
Intuition Design System, IDS – дизайн-система для вёрстки лендингов, онлайн-изданий и любых цифровых продуктов для веба, в основе которых лежат нарративы.
Технически IDS – набор CSS-классов и JS-компонентов. Это не библиотека, а готовый шаблон вёрстки. Вы не подключаете IDS в проект как зависимость, не расширяете классы, не переопределяете свойства. Вместо этого вы тупо копируете её исходный код, и меняете его как захочется. Без проблем с совместимостью и без ломающих вёрстку апдейтов.
Если у вас нет навыков разработчика, то простейший способ начать проект – скачать архив репозитория. Вы увидите там файл index.html, и в нём эту же самую страницу, которая одновременно является и инструкцией, и примером реализации. Открываете файлы в редакторе кода и смело делаете из них что-то своё. А эталонный образец не потеряется, он всегда здесь: intuition-tech.github.io/ids.
Если вы разработчик – делайте что хотите. IDS работает в статике, у неё ноль зависимостей и ванильный JS. Если заметите ошибку, чисто по-братски сделайте пулреквест, пжлст.
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 хранит цветовую палитру в переменных. Именование цветов функциональное: для чего используется, так и называется.
text
link
hover
mark
code
accent
surface
background
Цветовая палитра живёт в файле color-palettes.css.
Каждая переменная хранит строку из трёх значений в пространстве RGB через запятую, например: 253, 47, 75.
Нет
color: var(--ids__accent-RGB);
Да
color: rgb(var(--ids__accent-RGB));
color: rgba(var(--ids__accent-RGB), 0.5);
Каркас страницы
IDS не использует модульные сетки или колонки для организации пространства страницы. У нас всё намного проще: страница состоит из этажей, они идут сверху вниз друг за другом, каждый занимает всю доступную ширину и может быть любой высоты. Такой подход не мешает внутри этажа создавать модульные сетки и сложные композиции, но изолированность этажей позволяет легко менять их местами и избавляет от какой-либо взаимозависимости.
Обёртки
.ids__wrapper — стандартный этажа c большими полями на десктопе и с минимальными на мобиле.
.ids__wrapper.L — этаж с увеличенной шириной и небольшими полями. Отличается только для десктопа, а на мобиле ничего не делает.
.ids__wrapper.XL — этаж на всю ширину с минимальными полями. Отличается только для десктопа, а на мобиле ничего не делает.
.ids__wrapper.XXL — этаж на всю ширину без полей, на мобиле тоже.
Внутри этажей используется обёртка для создания «текстовой ширины». На мобиле ничего не делает, оставляет полную ширину.
.ids__text-width
Система отступов
В IDS у обёрток нулевые отступы, а у большинства других элементов задан только отступ снизу, минимальный, чтобы верстать элементы одним потоком.
Когда нужны заметные отступы — например, между этажами или перед заголовком, чтобы он не прилипал к предыдущему абзацу — используются специальные заглушки, спейсеры.
ids__space.S
ids__space.M
ids__space.L
ids__space.XL
Стилизация тегов
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
Отступы между ячейками
С помошью модификатора gap можно задавать отступы между ячейками:
.ids__sequence.XL.gap-L
.ids__sequence.XL.gap-M
.ids__sequence.XL.gap-S
Таблица
table — обычная таблица
tr, th, td — стандартные элементы таблицы. Ну разве что th приклеивается к верху окна.
Компоненты
.ids__snooze
.ids__footnote
.ids__navbar
Галерея
ids-gallery — специальный тег для Галереи.
Для разделения изображений используем тег figure.
a содержит ссылку на полноразмерное изображение.
Если оно отличается от того, которое используется для превью,
ему нужно указать размеры в атрибутах data-pswp-width
и data-pswp-height
