Контракт

<a class="inst-skip-link" href="#main">К содержанию</a>

<div class="inst-shell">
  <aside class="inst-shell-aside">
    <a class="inst-shell-brand" href="/">Приложение</a>
    …
  </aside>
  <header class="inst-shell-header">…</header>
  <main class="inst-shell-main" id="main">…</main>
</div>

Порядок в разметке — aside, header, main; на экране их расставляет grid-template-areas, поэтому шапка стоит справа от колонки, а не над ней. На узком экране порядок областей меняется тем же свойством — без второго набора разметки.

Пропуск к содержимому стоит до оболочки: это первое, что встречает клавиатура, и href обязан указывать на id рабочей области.

Ширина колонки перенастраивается одной строкой:

.my-app { --aside-w: 280px; }

Доступность

Устройство

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

Заголовок колонки

Имя приложения — первый ребёнок колонки, до навигации.

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

Липкая полоса действий

Рабочая область объявляет свой нижний отступ переменной --scroll-pad-end.

position: sticky закрепляется относительно поля паддинга области прокрутки, а не её границы. Полоса действий, закреплённая по inset-block-end: 0, останавливается на высоту отступа выше видимого низа — и под ней остаётся живая щель, сквозь которую видно, как едет содержимое. Полоса перестаёт быть дном.

Знает про этот отступ только тот, кто его поставил. Отсюда переменная: полоса действий вычитает её сама. Своя область прокрутки — объявите --scroll-pad-end на ней.

Поведение

@media (width < 60rem) { … }

Единственный порог во всей библиотеке. Оболочка и есть то единственное, что действительно зависит от размера окна: всё остальное перестраивается интринсиком или отвечает на ширину своей области через @container — см. принципы дизайна.

Рабочая область объявлена @container-областью под именем app: её ширина приходит от сетки оболочки, а не от содержимого, поэтому объявлять её контейнером безопасно.

/* Своё правило под узкую рабочую область */
@container app (inline-size < 50rem) {
  .my-board { grid-template-columns: 1fr; }
}

Ниже 60rem есть два поведения, и выбор между ними — по длине навигации.

Умолчание: горизонтальная полоса

Колонка становится лентой над содержимым:

Работает без единой строки JS и потому не может «не открыться»: у приложения, которое ничего не подключило, навигация на телефоне всё равно есть. Годится примерно до восьми пунктов.

Вариант: выезжающий ящик

<aside class="inst-shell-aside inst-shell-aside--drawer">…</aside>

<button class="inst-btn inst-btn--icon inst-shell-nav-toggle" type="button"
        aria-label="Разделы" aria-expanded="false" aria-controls="sidebar">…</button>

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

Ящик сохраняет вертикаль и подписи групп, выезжает из-за начального края и гасит фон той же подложкой --scrim, что и модалка.

Что даёт приложение. Одну строку — переключить aria-expanded на кнопке. Ровно тот же контракт, что у модалки с showModal(). Ловушка фокуса, Escape и клик по подложке — тоже слой приложения: библиотека рисует состояние, но не вычисляет его.

Сценарии

Оболочка сама по себе — три пустые области. Работу видно, когда в них что-то стоит, и главное в ней не видно на картинке вовсе: каждая область прокручивается сама. Прокрутите таблицу — колонка и шапка останутся на месте.

Собранный на этой оболочке экран лежит в «Сборках»: консоль прогонов. Там же видно, как в неё садятся навигация, шапка экрана, сплит и состояния — пустое, загрузка, отказ.

API

Связанное

НавигацияШторкаСплитКонтейнерРельс разделовСтрока состояния