Раскладка

Сплит

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

Компонент

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>

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

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

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

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

Используйте	Возьмите другое
Содержимое и его инспектор: список слева, свойства справа	Каркас всего приложения — оболочка: у неё независимая прокрутка областей и полная высота окна
Две части разной важности	Равноправные ячейки — сетка: у неё все колонки одинаковые
Раскладка, которая должна складываться сама на узком	Ряд контролов — кластер
—	Ограничение ширины всего экрана — контейнер

Устройство

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

Часть	Правило	Значит
`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>

Правила

Так Порядок разметки = порядок при переносе

Что должно оказаться сверху на узком экране, то и ставится первым.

Не так order для перестановки колонок

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

Так Пороги в rem

Перенос срабатывает и при увеличении кегля, а не только при сужении окна.

Не так Медиазапрос ради двух колонок

Интринсик работает и внутри узкой панели, и в модалке, где ширины окна не хватает.

Доступность


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

Настройка

/* Узкая колонка свойств, ранний перенос */
.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)`

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