PRIMITIVE

Shell

The page's one horizontal measure: a max width, a fluid gutter, centred. Every section in the source design wrote it out by hand — one decision, spelled a dozen times.

A full-bleed band

The band takes the colour and the rules and reaches both window edges. The shell inside it keeps your content on the same grid as everything above.

A FULL-BLEED BAND

The band reaches both edges; the shell inside keeps the content on the same measure as every other section.

HTML

<div class="shell-flush" style="background:var(--ds-sunk); border-block:var(--ds-hairline) solid var(--ds-rule)">
  <div class="shell shell-section">
    <div class="section-head">
      <span class="section-head-kicker">A FULL-BLEED BAND</span>
      <span class="section-head-rule"></span>
    </div>
    <p class="placeholder-caption" style="margin-top:18px">
      The band reaches both edges; the shell inside keeps the content on the
      same measure as every other section.
    </p>
  </div>
</div>

Three measures, and which one to reach for

Three stated numbers, and no ratio joining them — each was chosen for a different reason, and inventing a relationship would be arithmetic theatre. The default is a READING width, where a longer line is a worse line. Widen the stage until they separate.

THE READING MEASURE — 1200px. Prose, rules and specs, where a longer line is a worse line.

THE SHOWING MEASURE — 1366px. Cards, pictures, a screenshot. This is the one to reach for.

WIDER — 1440px, and only 74px past the last one. Take it when a layout needs the room, not because it is further along.

HTML

<div class="shell-flush" style="background:var(--ds-sunk); border-block:var(--ds-hairline) solid var(--ds-rule)">
  <div class="shell shell-section">
    <p class="placeholder-caption">THE READING MEASURE — 1200px. Prose, rules and specs, where a longer line is a worse line.</p>
  </div>
</div>
<div class="shell-flush" style="background:var(--ds-raised); border-block:var(--ds-hairline) solid var(--ds-rule)">
  <div class="shell shell-wide shell-section">
    <p class="placeholder-caption">THE SHOWING MEASURE — 1366px. Cards, pictures, a screenshot. This is the one to reach for.</p>
  </div>
</div>
<div class="shell-flush" style="background:var(--ds-sunk); border-block:var(--ds-hairline) solid var(--ds-rule)">
  <div class="shell shell-wider shell-section">
    <p class="placeholder-caption">WIDER — 1440px, and only 74px past the last one. Take it when a layout needs the room, not because it is further along.</p>
  </div>
</div>

Reference

Read from primitives/shell.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.shell.shell-wide.shell-wider.shell-section.shell-section-lg.shell-band.shell-flush.shell-sunk

SETTINGSSet the first on one element; a theme sets the second for all of them.--shell-max — falls back to --ds-shell-max

READS--ds-hairline--ds-pad-band--ds-pad-section--ds-pad-section-lg--ds-pad-shell--ds-rule--ds-shell-max-wide--ds-shell-max-wider--ds-sunk

Notes

NEVER USE NEGATIVE MARGINS FOR THIS

A coloured band that reaches both edges is .shell-flush on the outside with a .shell inside it. The negative-margin spelling overflows the viewport the moment anything inside is wider than expected, and an overflow at page level is a horizontal scrollbar on every screen.

THE FOUR CLASSES

.shellmeasure and gutter

.shell-sectionadds vertical rhythm

.shell-section-lgthe same, one step taller

.shell-flusha full-bleed band