Основания
Композиция
Все остальные страницы здесь отвечают на вопрос «как это выглядит». Эта отвечает на вопрос, который задаёт экран: что на нём главное. Иерархия — закон кита, данные важнее подписей, рамок и шапок, — но закон не инструмент. Инструменты здесь.
Ниже — экран из трёх ярусов: заглавная полоса, ведущая область и отступившая.
Разметка
<div class="inst-stack">
<div class="inst-metric-row inst-metric-row--joined inst-metric-row--headline">
<div class="inst-metric">
<div class="inst-metric-label">Доля успешных</div>
<div class="inst-metric-value">94.2<span class="inst-metric-unit">%</span></div>
</div>
<div class="inst-metric">
<div class="inst-metric-label">В очереди</div>
<div class="inst-metric-value">37</div>
</div>
</div>
<div class="inst-panel inst-panel--plain" data-rank="lead">
<div class="inst-panel-header"><span class="inst-panel-title">Последние сутки</span></div>
<div class="inst-panel-body">Область, которой принадлежит экран. Без обводки:
на такой площади перепада поверхности достаточно.</div>
</div>
<div class="inst-panel" data-rank="support">
<div class="inst-panel-header"><span class="inst-panel-title">Бюджет</span></div>
<div class="inst-panel-body">Отступила: имя меньше, тон тише, фон утоплен, обводки
нет. Она не стала тихой — всё остальное осталось на месте.</div>
</div>
</div>
Контракт
| Одна ведущая область на экран | Две ведущих — ни одной. Проверяется на отрисованном дереве через kitAudit.composition() |
| Одна заглавная полоса на экран | То же рассуждение ярусом выше |
| Ранг не трогает данные | Он двигает имя, рамку и фон. Не текст тела, не числа, не строки |
| Ранг не наследуется | Область внутри ведущей — default, если не сказала иного. Ведущая область ведёт экран, а не своё содержимое |
| Глубину задаёт вложенность, а не ранг | Область внутри области утопает всегда и не спрашивая |
Устройство
| Инструмент | Вид | Что двигает | Где допустим |
|---|---|---|---|
data-rank="lead" |
атрибут | Имя области поднимается на ступень | панель · карточка · секция |
data-rank="support" |
атрибут | Имя вниз, тон вниз, фон утопает на плёнку, обводка уходит | панель · карточка · секция |
data-tone |
атрибут | Фон области берёт размывку тона | панель · карточка |
data-scale |
атрибут | Вся шкала кегля в поддереве | любой элемент |
--plain |
модификатор | Обводка уходит, поверхность остаётся | панель · карточка |
--joined |
модификатор | Ряд становится одной поверхностью, разделённой линиями | ряд метрик |
--headline |
модификатор | Значение берёт потолок шкалы | ряд метрик |
Правила
Лестница строится отступлением, а не криком. Ранг никогда не поднимает:
поднятая поверхность — потолок во всех светлых темах, и lead, который пытался
бы встать выше, работал бы в двух темах из пяти и молча ничего не делал в трёх.
Вместо этого экран получает support на всём, что не является ответом, а
главное выступает потому, что соседи отошли.
Исключение одно — полоса под шапкой страницы. Там экран уже назван хлебными крошками, и полоса вправе быть самым громким кеглем: она отвечает на вопрос, с которым читатель пришёл. Везде остальное число остаётся тише имени экрана, на котором стоит.
Разделение — одна система за раз. Область, у которой есть своя поверхность,
не обязана нести ещё и обводку, и выбор за автором, потому что зависит от
размера: перепад 1.07 держит границу на крупной области и теряется на мелкой.
Ряд ячеек — это либо отдельные плитки (глубина), либо одна поверхность,
разделённая линиями (--joined). Никогда не то и другое сразу.
API
Полный список — в шапке страницы.
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument