kit

Container

A centred column with a maximum width and side gutters that never drop below 16px, for page bodies and readable text.

Tier 1 · CSS only Layout preview

Example

sm: 40rem, centred, with gutters

Prose containers keep a line to about seventy characters, which is a comfortable length to read. Text wider than that gets tiring, because the eye has further to travel back to the start of each line.

Show the markup 
<div class="kit-stack demo-fill" data-gap="3">
  <div class="demo-frame demo-gutters"><div class="kit-container" data-size="sm"><div class="demo-box">sm: 40rem, centred, with gutters</div></div></div>
  <div class="demo-frame demo-gutters"><div class="kit-container" data-size="prose"><p class="demo-text">Prose containers keep a line to about seventy characters, which is a comfortable length to read. Text wider than that gets tiring, because the eye has further to travel back to the start of each line.</p></div></div>
</div>

Usage

<main class="kit-container">…</main>
<article class="kit-container" data-size="prose">…</article>
Attribute Values Default
data-size prose about 70 characters, sm 40rem, md 56rem, lg 72rem, xl 90rem, full lg
data-flush present to drop the gutters, inside something that has its own gutters

The gutter grows from 16px on a phone to 32px on a wide screen, and the maximum width is for the content, so the gutters never eat into it.

Accessibility

  • Layout only. prose keeps lines to a comfortable reading length, which helps everyone and especially people with dyslexia or low vision who zoom in.