FivePaths microsite framework

<header>
  <p>Structure</p>
  <h2>Sections and bands</h2>
  <p>A section is a band across the page, and <code>data-band</code> picks its ground.</p>
</header>

<figure data-width="wide">
  <img src="example-screen.svg" alt="A page laid out in the framework: a header, a dark hero, and three cards" width="1600" height="1000">
  <figcaption><code>data-width="wide"</code> takes the wider track. <code>"full"</code> runs to the viewport edges and drops the frame.</figcaption>
</figure>

<ul>
  <li>Each item gets a drawn dot, so nothing falls back to a missing glyph.</li>
  <li>Running text is capped at a readable measure.</li>
</ul>

<ul data-marker="check">
  <li>Both colour schemes</li>
  <li>A 44px target on every control</li>
</ul>

<ol>
  <li>Link the release.</li>
  <li>Write the markup.</li>
  <li>Check both schemes.</li>
</ol>

<ol data-list="steps">
  <li><h3>Pin a release</h3><p>The sheet you reviewed is the sheet you serve.</p></li>
  <li><h3>Write elements</h3><p>Their position carries the layout.</p></li>
  <li><h3>Run the checks</h3><p>Contrast, targets and reflow, in both schemes.</p></li>
</ol>

<ul data-list="cards" data-cols="3">
  <li><a href="#tokens">
    <h3>A card that links</h3>
    <p>The link fills the card, so the whole card is the target.</p>
    <span>See the tokens</span>
  </a></li>
  <li><div>
    <h3>A card that does not</h3>
    <p>Its content sits in a div and gets the same padding.</p>
  </div></li>
  <li><div>
    <h3>Three across</h3>
    <p><code>data-cols</code> sets the count once there is room for it.</p>
  </div></li>
</ul>

<ul data-list="chips">
  <li>base.css</li>
  <li>tokens.json</li>
  <li>theme-1.0.0.js</li>
</ul>

<ul data-list="logos" data-width="full">
  <li style="--logo-h: 2.4rem"><a href="https://fivepaths.com"><img src="/brand/fivepaths/fivepaths-logo.svg" alt="FivePaths" width="108" height="111"></a></li>
</ul>

<div data-actions>
  <a href="#start">Set up a page</a>
  <a href="base.css">Read base.css</a>
</div>

<div data-layout="split">
  <div>
    <h3>One option</h3>
    <p>Each child is a panel.</p>
  </div>
  <div data-band="dark">
    <h3>The other</h3>
    <p><code>data-band="dark"</code> on a panel re-points its tokens, so it reads correctly with no rules of its own.</p>
  </div>
</div>

<div data-layout="feature">
  <div>
    <h3>Copy on one side</h3>
    <p>Two columns that stack below 56rem. <code>flip</code> swaps them, <code>uneven</code> weights them, and <code>top</code> aligns them to the top.</p>
  </div>
  <figure>
    <img src="example-screen.svg" alt="A page laid out in the framework: a header, a dark hero, and three cards" width="1600" height="1000">
  </figure>
</div>

<figure tabindex="0" aria-label="Release files">
  <table>
    <caption>Release files</caption>
    <thead><tr><th scope="col">File</th><th scope="col">Changes</th></tr></thead>
    <tbody>
      <tr><th scope="row">base-3.6.1.css</th><td>Never</td></tr>
      <tr><th scope="row">base.css</th><td>With each release</td></tr>
      <tr><th scope="row">tokens.json</th><td>With each release</td></tr>
    </tbody>
  </table>
</figure>

<figure>
  <blockquote><p>This sheet is for generated markup, where the component set is closed and a checker fails a build whose structure does not match.</p></blockquote>
  <figcaption>base.css, header comment</figcaption>
</figure>

<figure>
  <figcaption>site.css</figcaption>
  <pre tabindex="0"><span class="k">main</span> { <span class="m">color</span>: <span class="p">var(--fp-ink)</span>; }</pre>
</figure>

<dl>
  <dt>Band</dt>
  <dd>The ground a section sits on.</dd>
  <dt>Measure</dt>
  <dd>The cap on a line of running text, in <code>ch</code>.</dd>
</dl>

<aside>
  <p>Note</p>
  <p>The first paragraph is the label, so the severity is written as well as coloured.</p>
</aside>
<aside data-severity="warning">
  <p>Warning</p>
  <p>A published release is never revised. Cut a new one and move the pin.</p>
</aside>
<aside data-severity="critical">
  <p>Important</p>
  <p>Every colour is a token. A colour written as a literal misses the dark scheme and the dark bands.</p>
</aside>

<details>
  <summary>What the triangle shows</summary>
  <p>It points right while the panel is closed and down once it is open.</p>
</details>

<p>A link in a sentence, like this one to <a href="#tokens">the tokens</a>, keeps the height of its line; <code>data-target</code> marks a link that stands alone.</p>
<p><a data-target href="tokens.json">tokens.json</a> <span aria-hidden="true">·</span> <a data-target href="base.css">base.css</a></p>

<p>
  <span data-chip>v3</span>
  <span data-route="blue">Blue</span>
  <span data-route="green">Green</span>
  <span data-route="red">Red</span>
  <span data-route="orange">Orange</span>
  <span data-route="purple">Purple</span>
</p>
<small>Fine print is a small element, in the muted ink.</small>

<form data-layout="stack" action="#forms">
  <div><label for="s-name">Name</label><input id="s-name" name="name" autocomplete="name"></div>
  <div><label for="s-email">Email</label><small id="s-email-hint">Only used to reply.</small><input id="s-email" type="email" name="email" autocomplete="email" aria-describedby="s-email-hint"></div>
  <div><label for="s-topic">About</label>
    <select id="s-topic" name="topic"><option>A correction</option><option>The data</option><option>Something else</option></select></div>
  <div><label for="s-message">Message</label><textarea id="s-message" name="message"></textarea></div>
  <fieldset>
    <legend>Reply by</legend>
    <label><input type="radio" name="reply" value="email" checked> Email</label>
    <label><input type="radio" name="reply" value="phone"> Phone</label>
  </fieldset>
  <label><input type="checkbox" name="copy"> Send me a copy</label>
  <div data-actions><button type="submit">Send</button><button type="reset">Clear</button></div>
</form>

<form data-layout="filters" action="#forms" role="search" aria-label="Filter records">
  <div><label for="f-kind">Kind of item</label>
    <select id="f-kind" name="kind"><option value="">Any</option><option>Ordinance</option><option>Resolution</option><option>Agreement</option></select></div>
  <div><label for="f-from">From</label><input id="f-from" type="date" name="from"></div>
  <div><label for="f-q">Words in the title or the report</label><small id="f-q-hint">Every word must appear.</small><input id="f-q" type="search" name="q" aria-describedby="f-q-hint"></div>
  <div data-actions><button type="submit">Show records</button><button type="reset">Reset</button></div>
</form>

<form data-layout="stack" action="#forms" novalidate>
  <aside data-severity="critical" tabindex="-1">
    <p>There is a problem</p>
    <ul>
      <li><a href="#e-email">Enter an email address, like name@example.com</a></li>
      <li><a href="#e-reply-email">Choose how to be replied to</a></li>
    </ul>
  </aside>
  <div><label for="e-email">Email</label>
    <small id="e-email-error" data-severity="critical"><span class="visually-hidden">Error: </span>Enter an email address, like name@example.com</small>
    <input id="e-email" type="email" name="email" value="name.example.com" autocomplete="email" required aria-invalid="true" aria-describedby="e-email-error"></div>
  <fieldset aria-describedby="e-reply-error">
    <legend>Reply by</legend>
    <small id="e-reply-error" data-severity="critical"><span class="visually-hidden">Error: </span>Choose how to be replied to</small>
    <label><input id="e-reply-email" type="radio" name="e-reply" value="email" required> Email</label>
    <label><input type="radio" name="e-reply" value="phone" required> Phone</label>
  </fieldset>
  <div data-actions><button type="submit">Send</button></div>
</form>

<nav aria-label="Pages">
  <ul data-list="chips">
    <li><a href="#forms" rel="prev">Previous</a></li>
    <li><a href="#forms">1</a></li>
    <li><a href="#forms" aria-current="page">2</a></li>
    <li><a href="#forms">3</a></li>
    <li><a href="#forms" rel="next">Next</a></li>
  </ul>
</nav>