Раскладка

Сплит

Две колонки разной важности: основная и боковая. Переносится сама, когда основной части перестаёт хватать порога, — без единого медиазапроса.

Компонент

split-side

Желаемая ширина 18rem. Фильтры, свойства, сводка.

split-main

Забирает остаток. Сузьте область — колонки встанут друг под друга, и ни одного @media для этого не понадобилось.

Разметка

<div class="inst-split">
  <div class="inst-split-side inst-card">
    <div class="inst-card-title">split-side</div>
    <div class="inst-card-sub">Желаемая ширина 18rem. Фильтры, свойства, сводка.</div>
  </div>
  <div class="inst-split-main inst-card">
    <div class="inst-card-title">split-main</div>
    <div class="inst-card-sub">Забирает остаток. Сузьте область — колонки встанут друг
      под друга, и ни одного @media для этого не понадобилось.</div>
  </div>
</div>

Контракт

Что	Обязательно	Почему
`inst-split-main` и `inst-split-side`	да	Обе части нужны: сплит — про раскладку разной важности, и без второй он вырождается в блок
Порядок в разметке = порядок при переносе	да	`order` разводит визуальный порядок с клавиатурным, и `Tab` начинает прыгать через экран
Пороги — через `--split-side` и `--split-main`	да	Роли яруса 3, переопределяются на контейнере, а не внутри компонента
`inst-stack` внутри половины, если блоков больше одного	да	Половина сплита — это доля ширины, а не колонка потока: своего зазора у неё нет, и две панели встают вплотную. Зазор ставит стек, сама половина его ставить не может — класс вешают и на компонент (`inst-split-side inst-card`), и тогда зазор влез бы внутрь карточки
Медиазапрос	нет	Перенос делает интринсик: он работает и внутри узкой панели, и в модалке

Доступность


Порядок	Визуальный порядок равен порядку разметки. `order` не применяется: он разводит `Tab` с картинкой
Масштабирование	Перенос срабатывает и при увеличении кегля: пороги заданы в `rem`, поэтому колонки складываются вместе с ростом текста, а не после него
Ориентиры	Части — `<div>`. Если боковая часть это дополняющее содержимое, ставьте `<aside>`
Прокрутка	Сплит сам ничего не прокручивает. Независимая прокрутка — работа оболочки и панели

Устройство

Переноса добивается не запрос, а два числа:

Часть	Правило	Значит
`inst-split-side`	`flex: 1 1 var(--split-side)`	Желаемая ширина 18rem. Готова ужаться и растянуться
`inst-split-main`	`flex: 999 1 0` + `min-inline-size: min(var(--split-main), 100%)`	Забирает почти весь остаток, но не сжимается ниже 30rem

Когда основной части перестаёт хватать её минимума, flex-wrap переносит боковую вниз, и обе занимают полную ширину. Это первый уровень адаптивности — интринсик: он работает и там, где контейнера-предка нет, и внутри узкой панели, и в модалке.

min() в минимуме обязателен: без него основная часть шириной 30rem не помещается в область шириной 24rem и вылезает наружу вместе с горизонтальной прокруткой.

Порядок

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

<div class="inst-split">
  <div class="inst-split-main">…</div>
  <div class="inst-split-side">…</div>
</div>

order для этого не применяется: он разводит визуальный порядок с клавиатурным, и Tab начинает прыгать через экран.

Композиции

Список и инспектор

<div class="inst-split">
  <div class="inst-split-main inst-panel">
    <div class="inst-panel-header"><span class="inst-panel-title">Очередь</span></div>
    <div class="inst-panel-body inst-panel-body--list">…</div>
  </div>
  <div class="inst-split-side inst-panel">
    <div class="inst-panel-header"><span class="inst-panel-title">Свойства</span></div>
    <div class="inst-panel-body">…</div>
  </div>
</div>

Со стопкой внутри

<div class="inst-split">
  <div class="inst-split-main inst-stack">…</div>
  <div class="inst-split-side inst-stack inst-stack--tight">…</div>
</div>

Настройка

/* Узкая колонка свойств, ранний перенос */
.inspector-split {
  --split-side: 14rem;
  --split-main: 24rem;
}

Обе переменные — роли яруса 3, поэтому переопределяются на контейнере, а не внутри компонента.

API

Классы
Имя	Что делает
класс
`inst-split`	Контейнер. Ряд с переносом, зазор `--pad-panel`
`inst-split-main`	Основная часть. Забирает остаток, не уже `--split-main`
`inst-split-side`	Боковая часть. Желаемая ширина `--split-side`

Токены
Имя	Значение	Откуда
переменная
`--split-side`Желаемая ширина боковой части	`18rem`	задаёт приложение
`--split-main`Ниже этого основная часть переносится вниз	`30rem`	задаёт приложение
токен
`--pad-panel`	`var(--space-5)`	база +14: плотность · масштаб

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