Contract

<a class="inst-skip-link" href="#main">To the content</a>

<div class="inst-shell">
  <aside class="inst-shell-aside">
    <a class="inst-shell-brand" href="/">The application</a>
    …
  </aside>
  <header class="inst-shell-header">…</header>
  <main class="inst-shell-main" id="main">…</main>
</div>

The order in the markup is aside, header, main; on the screen they are placed by grid-template-areas, so the header stands to the right of the column rather than above it. On a narrow screen the order of the areas is changed by the same property — with no second set of markup.

The skip to the content stands before the shell: it is the first thing the keyboard meets, and the href is obliged to point at the id of the work area.

The width of the column is retuned in one line:

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

Accessibility

Anatomy

The horizontal air is given not by the work area but by the container inside it: their work differs — one bounds the measure of reading, the other holds the scrolling.

The heading of the column

The name of the application is the first child of the column, before the navigation.

The class lives in the library because of one line — the space below it. In a column it is required: without it the name stands in a row with the items and becomes the first of them. In a row (a narrow screen) that same line shifts the name up by half of itself, and the logo stops standing on one line with the items. A divergence of six pixels, which is seen at once and never found — because it is looked for in the alignment, and it lies in the spacing.

The sticky action bar

The work area declares its own bottom indent through the variable --scroll-pad-end.

position: sticky fixes itself relative to the padding box of the scrolling area rather than to its border. An action bar fixed at inset-block-end: 0 stops the height of the indent above the visible bottom — and a live slit is left under it, through which the content is seen travelling. The bar stops being the floor.

Only the one who set that indent knows about it. Hence the variable: the action bar subtracts it itself. A scrolling area of your own — declare --scroll-pad-end on it.

Behavior

@media (width < 60rem) { … }

The only threshold in the whole library. The shell is the one thing that really does depend on the size of the window: everything else rebuilds by the intrinsic or answers to the width of its own area through @container — see the design principles.

The work area is declared a @container region under the name app: its width arrives from the grid of the shell rather than from the contents, so declaring it a container is safe.

/* A rule of your own under a narrow work area */
@container app (inline-size < 50rem) {
  .my-board { grid-template-columns: 1fr; }
}

Below 60rem there are two behaviours, and the choice between them is by the length of the navigation.

The default: a horizontal strip

The column becomes a ribbon above the content:

It works with not a single line of JS and therefore cannot "fail to open": an application that has connected nothing still has navigation on a phone. It is fit for roughly up to eight items.

The variant: a sliding drawer

<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="Sections" aria-expanded="false" aria-controls="sidebar">…</button>

As soon as there are more than eight items, the ribbon stops working: seventy-one items is a ribbon almost eight thousand pixels wide with no headings of groups. That is no longer "inconvenient", that is an absence of navigation.

The drawer keeps the vertical and the labels of the groups, slides out from behind the start edge and dims the background with the same --scrim backing as a modal.

What the application gives. One line — to toggle the aria-expanded on the button. Exactly the same contract as a modal with showModal(). The focus trap, the Escape and the click on the backing are the layer of the application too: the library draws the state but does not work it out.

Patterns

A shell by itself is three empty areas. The work is seen when something stands in them, and the main thing in it is not seen in a picture at all: every area scrolls by itself. Scroll the table — the column and the header will stay in place.

A screen assembled on this shell lies in "Assemblies": the console of runs. There it is also seen how the navigation, the page header, the split and the states — empty, loading, refusal — are seated into it.

API

Related

NavigationSheetSplitContainerRailStatus bar