App shell

The parts

The shell is the one part of the library that looks at the window; everything inside it measures its own region. app-main and app-aside are regions, so md: inside the main column measures the column.

<div class="app">
  <header class="app-header">
    <button class="btn btn-text btn-icon app-burger" type="button" commandfor="side" command="toggle-popover" aria-label="Sections">…</button>
    <a class="app-brand" href="/"><span class="app-mark">RZ</span>REDZ CMS</a>
    <button class="btn app-search" type="button" aria-keyshortcuts="Meta+K">…</button>
  </header>
  <nav id="side" class="app-sidebar" popover aria-label="Sections">
    <div class="app-section">Content</div>
    <a class="app-link" href="/excursions/" aria-current="page">…Excursions</a>
  </nav>
  <main class="app-main" id="main">…</main>
  <aside class="app-aside">…</aside>
</div>

The demo screens show the whole shell: a list, a resource page with its side column, a settings form.

Folded to a rail

On a wide window the side navigation folds into a rail of its icons and back: a header button with command="--fold" and aria-controls naming the sidebar puts data-folded on it and says so in aria-pressed. Folded, each link shows its words as a tooltip and keeps them as its name. The library stores nothing: it tells the page in redz:fold (detail.folded), and the page that keeps the choice writes data-folded back on the sidebar when it loads. These docs fold so - the button beside their burger.

<button class="btn btn-text btn-icon" type="button" command="--fold" aria-controls="side" aria-label="Fold the sections">…</button>

document.addEventListener('redz:fold', (event) => localStorage.setItem('folded', event.detail.folded ? '1' : ''));

A shell without app-sidebar - a page whose role has no sections - is one column by itself: no class to add.

States

Keyboard and accessibility

• The header is a <header>, the side navigation a named <nav>, the main column the page's one <main>.
• On a narrow screen the burger opens the navigation as a popover: Esc or a click outside closes it, and the focus goes back to the burger.
• The current section is aria-current="page", drawn as a bar that stays in forced colors.
• The fold button is a toggle button, pressed while the rail is folded; it has no commandfor, which WebKit would announce as collapsed. On a narrow screen it hides, as the burger opens the whole navigation there.
• The header and the navigation stay off paper: only the main column prints.

Tokens

From css/components/app.css. It declares --redz-sticky-top, --redz-btn-bg, --redz-btn-fg, --redz-btn-hover on its root, never on rows or items.

It reads the theme's --redz-space-12, --redz-space-8, --redz-bg-page, --redz-text, --redz-radius-8, --redz-primary, --redz-primary-contrast, --redz-fs-12, --redz-bg, --redz-text-muted, --redz-border, --redz-border-strong, --redz-space-4, --redz-space-16, --redz-bg-hover, --redz-shadow-1, --redz-space-24, --redz-space-32, --redz-radius-12, --redz-bg-raised, --redz-shadow-3.