Layout and grid

Twelve columns

Put .grid on a container. Each child spans all 12 columns until you say otherwise. Gutters grow from 16px on a phone to 32px on a wide screen.

How to use it

• .span-1 to .span-12 set how many columns a child takes.
• .start-1 to .start-12 set the column it starts in. Combine them: class="span-9 start-4" runs from column 4 to 12.
• Below 48rem (tablets) every child is full width, so phones get one column without extra classes.
• Children that don’t fill a row wrap to the next one. Rows space themselves with row-gap (32px).
• Nest a .grid inside a child to divide it again.

Halves

Two equal columns: a form and its help, two cards.

Thirds

Three cards or figures.

Sidebar and content

A narrow column for a title or filters, and a wide one for content.

Editorial offset

Jewel’s signature: content panels start their content at column 4, under the section head, and leave the first three columns empty.

Centered

A narrow centered column for reading.

Four breakpoints, mobile first

Style the phone first, then add min-width rules. Custom properties can’t be read inside @media, so write the value and name the token beside it: @media (min-width: 48rem) { … } /* --bp-md */.

The frame

A page is the background, the cap, then .page holding the sticky header and a column of content panels. The gradient shows between the panels.

<body>
  <div class="jewel-bg" aria-hidden="true"></div>
  <div class="jewel-cap" aria-hidden="true"></div>
  <div class="page">
    <header class="site-header">…</header>
    <main class="panel-stack">
      <section class="panel panel--pad grid">
        <header class="section-head"><p class="label">01 — Section</p></header>
        <div class="span-9 start-4">…</div>
      </section>
    </main>
  </div>
</body>

Section head

A numbered label opens each content panel. The rule under it runs to both edges of the panel. Content follows in span-9 start-4.

With a side nav

Wrap the page in .with-side-nav to put a sticky nav column beside the content from 64rem. This site is built that way; see Side nav.

<div class="with-side-nav">
  <aside class="with-side-nav__aside panel"><nav class="side-nav">…</nav></aside>
  <main class="panel-stack">…</main>
</div>

Z-index

Use the scale, never a raw number. Sheets, the lightbox and pop-up menus open in the browser’s top layer, above everything.