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

<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 — см. конституцию.

Ниже 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

Связанное

Контейнер Примитивы потока Шапка экрана Сплит Навигация Крошки Панель