Layout

The invisible parts: containers that set line length, list containers, media objects, wells, and dividers. Nearly all of it is composition — the divider is the only new vocabulary.

Containers

max-w-7xl — Full — app screens, tables
max-w-3xl — Constrained — detail pages
max-w-lg — Narrow — forms, focused tasks

Containers are plain utilities: mx-auto max-w-* px-4 sm:px-6. Pick the width by content type, not by screen.

List containers

Card with dividers

  • First item
  • Second item
  • Third item

Separate cards

  • First item
  • Second item
  • Third item

Flat with dividers

  • First item
  • Second item
  • Third item

Wells

Well

Sunken surface for secondary content — settings explanations, quoted text, or the inside of a danger zone.

Well in a card

Deploy notes

bin/rails db:migrate
bin/rails runner Backfill.run

Media objects

Basic — aligned to top

16×16

The media object: a fixed block beside flowing content. Alignment comes from items-start / items-center / items-end on the flex row.

Aligned to center

16×16

The media object: a fixed block beside flowing content. Alignment comes from items-start / items-center / items-end on the flex row.

Aligned to bottom

16×16

The media object: a fixed block beside flowing content. Alignment comes from items-start / items-center / items-end on the flex row.

Media on right, nested

Media can sit on either side, and objects nest — a reply inside a comment is just another media object.

JT

Nested reply with an avatar.

16×16

Dividers

Continue
Earlier today
Attachments 
<div class="divider">
  <span class="divider-line"></span>
  <span class="divider-label">Continue</span>
  <span class="divider-line"></span>
</div>