Layout

The named grid regions — content, popout, full-width — plus layout primitives.

Every page is a .grid. The grid has three named column regions — content, popout, and full-width — and each child element is placed into one of them by adding the matching class. This is how hero images, wide tables, and edge-to-edge media break out of the body column without you having to re-layout the page.

How the grid works

A .grid has five column tracks. From outside in: an outer gutter, the popout shoulder, the content column, the opposite popout shoulder, and the opposite outer gutter. Every direct child sits in one of three named column ranges.

Visualised

<section class="grid">
  <p>Default paragraphs sit in the content column.</p>
  <figure class="popout">A figure breaks out into the popout shoulders.</div>
  <div class="full-width">A full-width banner goes edge to edge.</div>
</section>

Default region per element

Composable primitives

Within a region, these primitives arrange children. They don't care which region they're in.

Container

Centered max-width wrapper used outside .grid. .container is 930px; .container--narrow is 640px; .container--wide is 1200px.

<div class="container">…</div>
<div class="container container--narrow">…</div>

Stack

Children stacked vertically with a consistent gap. Modifiers: --tight (0.5×), default (1×), --loose (2×).

Cluster

Horizontal row that wraps. Modifiers: --end, --center, --between.

Switcher

Side-by-side until the container is narrower than 600px, then stacks. Container-based, no media queries.

Auto grid

Fits as many 250px-minimum columns as will fit.

Sidebar page layout

An alternative page layout for sections that benefit from a persistent side navigation — these boilerplate pages use it. Activate it by setting layout: sidebar in a page or parent layout, and point sidebarInclude at a partial to render inside the sidebar column.

The sidebar is position: sticky at the top on desktop, capped at the viewport height and scrollable when its content overflows. The main column uses the same .grid as the default layout, so .content, .popout and .full-width still work inside it.

# Page front matter
layout: sidebar
sidebarInclude: components/your-sidebar.html
sidebarLabel: Section navigation

<!-- Layout output (simplified) -->
<div class="sidebar-layout">
  <aside class="sidebar-layout--sidebar" aria-label="…">…</aside>
  <header class="global-navigation">…</header>
  <main id="content" class="grid">…</main>
</div>
<footer id="site-footer">…</footer>

Sidebar navigation

A reusable two-level collapsible navigation built for the sidebar column. Each section is a <details>, with its section link in the <summary> and child links in a nested list. Add open to the current section and aria-current="page" to the current link.

<nav class="sidebar-nav" aria-label="Section navigation">
  <ul class="sidebar-nav--sections">
    <li>
      <details open>
        <summary><a href="/section/">Section</a></summary>
        <ul class="sidebar-nav--items">
          <li><a href="/section/page/" aria-current="page">Current page</a></li>
          <li><a href="/section/other/">Other page</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>