Skip to content

← Guides

Build a content website

Start with native HTML and CSS-only layouts and patterns. Add optional view transitions or Datastar only when the application needs them—not by default.

Progressive ladder

  1. 1. Foundations

    Load foundation and theme CSS. Semantic HTML carries meaning before any layout skin.

    ResetSemantic base

  2. 2. Page frame

    Use page-shell and region-rhythm for landmarks and section spacing.

    Page shell

  3. 3. Reading column

    Apply prose for long-form measure, lede, figures, and missing-media fallbacks.

    Prose

  4. 4. In-page navigation

    Author fragment links in a labelled table of contents; do not infer headings in JavaScript.

    Table of contents

  5. 5. Editorial recipes

    Compose article and archive pages from the patterns above with server-owned metadata.

    Editorial articleArchive index

Editorial article recipe

Composes page-shell, sticky sidebar, prose, breadcrumbs, and series links. No JavaScript required.

Ryan Baird · · 8 min read

Designing for content that refuses to be tidy

Editorial pages compose existing page-shell, prose, table-of-contents, and breadcrumb patterns. The server owns metadata, series links, and reading order.

Overview

Start with semantic HTML, then add layout and prose skins when CSS is available.

Measure and rhythm

Use class="thin-flow" inside prose sections when lists and paragraphs must keep block formatting context.

Series navigation

Independent footer content

Read the complete Editorial article contract

Show code
<div class="thin-page-shell">
  <header class="thin-container">
    <nav class="thin-breadcrumbs" aria-label="Breadcrumbs">
      <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/notes/">Field notes</a></li>
        <li aria-current="page">Designing for content</li>
      </ol>
    </nav>
  </header>
  <div class="thin-sticky-sidebar">
    <aside aria-labelledby="article-contents">
      <nav class="thin-table-of-contents" aria-labelledby="article-contents">
        <h2 id="article-contents">On this page</h2>
        <ol>
          <li><a href="#overview" aria-current="location">Overview</a></li>
          <li><a href="#measure">Measure and rhythm</a></li>
          <li><a href="#series">Series navigation</a></li>
        </ol>
      </nav>
    </aside>
    <main id="content">
      <article class="thin-prose" aria-labelledby="article-title">
        <header>
          <p>
            <span class="thin-icon">
              <svg class="thin-icon" aria-hidden="true">
                <use href="/icons/sprite.svg#user">
                </use>
              </svg>
              <span>Ryan Baird</span>
            </span> · <time datetime="2026-08-01">August 1, 2026</time> · <span>8 min read</span>
          </p>
          <h1 id="article-title">Designing for content that refuses to be tidy</h1>
        </header>
        <p class="thin-lede">Editorial pages compose existing page-shell, prose, table-of-contents, and breadcrumb patterns. The server owns metadata, series links, and reading order.</p>
        <h2 id="overview">Overview</h2>
        <p>Start with semantic HTML, then add layout and prose skins when CSS is available.</p>
        <h2 id="measure">Measure and rhythm</h2>
        <p>Use <code>class="thin-flow"</code> inside prose sections when lists and paragraphs must keep block formatting context.</p>
        <section id="series" aria-labelledby="series-heading">
          <h2 id="series-heading">Series navigation</h2>
          <nav aria-label="Series">
            <ul class="thin-cluster">
              <li><a href="/notes/01/">← Previous</a></li>
              <li><a href="/notes/">All notes</a></li>
              <li><a href="/notes/03/">Next →</a></li>
            </ul>
          </nav>
        </section>
      </article>
    </main>
  </div>
  <footer class="thin-container">
    <p>Independent footer content</p>
  </footer>
</div>

Archive index recipe

Server-rendered chronological list with durable pagination links.

Field notes archive

Chronological index with durable pagination links.

2026

Read the complete Archive index contract

Show code
<main class="thin-page-shell" id="content">
  <header class="thin-container">
    <h1>Field notes archive</h1>
    <p>Chronological index with durable pagination links.</p>
  </header>
  <section class="thin-region-rhythm" aria-labelledby="archive-heading">
    <div class="thin-container">
      <h2 id="archive-heading">2026</h2>
      <ol class="thin-archive-index">
        <li>
          <article>
            <header class="thin-cluster">
              <h3><a href="/notes/designing-for-content/">Designing for content that refuses to be tidy</a></h3>
              <time datetime="2026-08-01">August 1</time>
            </header>
            <p>A short excerpt remains readable when CSS is unavailable.</p>
          </article>
        </li>
        <li>
          <article>
            <header class="thin-cluster">
              <h3><a href="/notes/measure-without-breakpoints/">Measure without breakpoints</a></h3>
              <time datetime="2026-07-12">July 12</time>
            </header>
            <p>Intrinsic layouts respond to container width, not viewport guesses.</p>
          </article>
        </li>
      </ol>
      <nav class="thin-pagination" aria-label="Archive pages">
        <a href="?page=1" aria-current="page">1</a>
        <a href="?page=2">2</a>
      </nav>
    </div>
  </section>
</main>