THE REFERENCE ROOM

Every screen.

Design from the smallest useful layout upwards. Test wrapping, long words, readable type and touch targets rather than chasing particular devices.

Mobile-first breakpoints

One column, then three

The default works on a narrow screen. A min-width media query adds columns when there is room.

HTML

<div class="layout">
  <div>HTML</div>
  <div>CSS</div>
  <div>TYPE</div>
</div>

Edit HTML

CSS

.layout { display: grid; gap: 16px; }
.layout div { background: #7FFF00; padding: 20px; }
@media (min-width: 600px) {
  .layout { grid-template-columns: repeat(3, 1fr); }
}

Edit CSS

Try this → Resize your browser or change the breakpoint to 400px.

Fluid widths

Flexible containers

Percentages follow the parent; max-width prevents an excessively wide measure.

HTML

<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>

Edit HTML

CSS

body { width: 90%; max-width: 900px; margin: auto; }
p { max-width: 60ch; overflow-wrap: anywhere; }

Edit CSS

Try this → Try 80% and compare at narrow widths.

Fluid typography

Minimum, preferred, maximum

clamp() lets the type grow without getting too small or too large.

HTML

<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>

Edit HTML

CSS

h1 {
  font-size: clamp(2rem, 6vw, 5rem);
}
p {
  max-width: 60ch;
}
@media (min-width: 600px) {
  body { padding: 40px; }
}

Edit CSS

Try this → Try clamp(1.5rem, 8vw, 6rem).

Touch and focus

Room to interact

A generous button target is easier to use by touch. Visible focus helps keyboard users.

HTML

<button type="button">Follow the rabbit</button>

Edit HTML

CSS

button { min-height: 44px; padding: 12px 20px; }
button:focus-visible { outline: 3px solid #FF1493; outline-offset: 4px; }

Edit CSS

Try this → Tab to the button; compare 44px and 60px minimum heights.