Раскладка

Контейнер

Потолок ширины и горизонтальный воздух рабочей области. Ограничивает не «дизайн», а меру читаемости: строка длиннее ~90 знаков теряется на возврате к началу.

Компонент

Узкий контейнер

44rem. Форма, диалог настроек, экран одного объекта.

Ширина приходит снаружи

Контейнер объявлен @container-областью, поэтому компоненты внутри отвечают на его ширину, а не на ширину окна.

Разметка

<div class="inst-container inst-container--narrow inst-stack">
  <div class="inst-card">
    <div class="inst-card-title">Узкий контейнер</div>
    <div class="inst-card-sub">44rem. Форма, диалог настроек, экран одного объекта.</div>
  </div>
  <div class="inst-card">
    <div class="inst-card-title">Ширина приходит снаружи</div>
    <div class="inst-card-sub">Контейнер объявлен @container-областью, поэтому
      компоненты внутри отвечают на его ширину, а не на ширину окна.</div>
  </div>
</div>

Использование

<div class="inst-container inst-container--narrow">…</div>

Что	Обязательно	Почему
Ширина приходит снаружи	да	`container-type` отключает интринсик по инлайновой оси: элемент, получавший ширину от содержимого, схлопнется
Потолок в `rem`, а не в пикселях	да	При увеличенном системном кегле контейнер растёт вместе с текстом, и мера чтения остаётся той же
Свой потолок — через `--container-max`	да	Модификатор переопределяет переменную, а не переписывает правило

/* Свой потолок — одна строка */
.my-screen { --container-max: 60rem; }

Когда использовать

Используйте	Возьмите другое
Обёртка содержимого внутри `inst-shell-main` — оболочка	Вертикальный ритм между блоками — стопка: контейнер задаёт только ширину и боковые поля
Ограничить меру чтения длинного текста	Ширина колонок внутри блока — сетка или сплит
Отдать компонентам внутри область для `@container`	Область приложения с рамкой и шапкой — панель
—	Отступ у одного элемента — утилит отступов в ките нет и не будет, см. примитивы потока

Варианты

Пример

по умолчанию — 76rem

--narrow — 44rem

--prose — 68ch

Разметка

<div class="inst-stack">
  <div class="inst-container"><div class="inst-card"><div class="inst-card-title">по умолчанию — 76rem</div></div></div>
  <div class="inst-container inst-container--narrow"><div class="inst-card"><div class="inst-card-title">--narrow — 44rem</div></div></div>
  <div class="inst-container inst-container--prose"><div class="inst-card"><div class="inst-card-title">--prose — 68ch</div></div></div>
</div>

Класс	Потолок	Когда
без модификатора	`--container-max`, 76rem	Умолчание: дашборд, таблица, список задач
`inst-container--narrow`	44rem	Форма, настройки, экран одного объекта
`inst-container--prose`	68ch	Читаемый текст. Мера в `ch` — она про знаки, а не про пиксели
`inst-container--full`	`none`	Ширина рабочей области целиком: карты, таймлайны, широкие таблицы

Модификатор — одна строка: он переопределяет --container-max, а не переписывает правило.

Поведение

Контейнер запросов

.inst-container объявлен container: content / inline-size. Компоненты внутри отвечают на его ширину — та же карточка одинаково ведёт себя в узкой колонке инспектора и во всю ширину дашборда.

Отсюда правило, которое проще нарушить, чем заметить: контейнером объявляется только то, чья ширина приходит снаружи. container-type отключает интринсик по инлайновой оси, и элемент, получавший ширину от содержимого, схлопнется. Таких областей в ките три: .inst-container, .inst-shell-main и .inst-panel.

Композиции

Внутри оболочки

<main class="inst-shell-main" id="main">
  <div class="inst-container inst-stack">
    <div class="inst-page-header">…</div>
    <div class="inst-section">…</div>
  </div>
</main>

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

Контейнер и стопка на одном элементе

<div class="inst-container inst-container--narrow inst-stack inst-stack--loose">…</div>

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

Правила

Так Потолок в rem

При увеличении системного кегля контейнер растёт вместе с текстом, и мера чтения не меняется.

Не так Потолок в пикселях

При кегле 200% строка внутри становится вдвое длиннее меры, ради которой потолок и ставили.

Так container-type там, где ширина приходит снаружи

В ките таких областей три: контейнер, рабочая область оболочки и панель.

Не так container-type на том, что меряется содержимым

Интринсик по инлайновой оси отключается, и элемент схлопывается в ноль.

Доступность


Мера чтения	Потолок ширины — требование читаемости, а не вкуса: строка длиннее ~90 знаков теряется на возврате к началу
Масштабирование	Потолок в `rem`, поля в токенах: при увеличении кегля до 200% содержимое не обрезается и не требует горизонтальной прокрутки
Боковые поля	`--pad-panel` перенастраивается плотностью, поэтому текст не прилипает к краю ни в одной из трёх
Ориентиры	Контейнер — `<div>` и никакой роли не несёт. Ориентир даёт `<main>` снаружи

API

Имя	Значение	Что делает
класс
`inst-container`	—	Ширина 100%, потолок `--container-max`, центрирование, боковые поля `--pad-panel`
модификатор
`inst-container--narrow`	—	Потолок 44rem
`inst-container--prose`	—	Потолок 68ch
`inst-container--full`	—	Потолок снят
переменная
`--container-max`	`76rem`
токен
`--pad-panel`	`var(--space-5)`

Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument