Breakout

Keeps its children in a centered reading column with gutters, and lets any child carrying data-bleed span the full width.

Example

View Code 
<article class="breakout">
    <h1>A long read</h1>
    <p>The column keeps every paragraph at a readable width.</p>
    <img src="valley.jpg" alt="A valley at dusk, edge to edge" data-bleed>
    <p>And the picture runs from edge to edge.</p>
</article>

When to use it

Long-form pages: an article, a case study, documentation. The text sits in a column narrow enough to read, and the occasional picture, quote band, or code block breaks out to the full width without leaving the flow.

How it works

The breakout is a grid of three columns: a gutter, the reading column, and a gutter. The reading column is data-max wide, or the container minus two gutters when that is less, and the gutters share whatever remains, so the column is centered. Every child lands in the middle track. A child carrying data-bleed spans all three. The rows are separated by the gap, and children's own margins are zeroed, as in every gap-based layout. Prose is also capped at --yeti-measure, so a column set wider than the measure is not filled by paragraphs.

<div class="breakout" data-max="md">
    <p>Readable.</p>
    <div data-bleed>Edge to edge.</div>
    <p>Readable again.</p>
</div>

A child carrying data-note is a margin note: it follows the paragraph it belongs to in the source, and when the content box is at least xl wide it moves into the end gutter beside that paragraph, in the small muted text of a hint; narrower, it stays in the column as an aside. One note per paragraph; a second note after the same paragraph stacks below the first and pushes the next paragraph down a row.

<div class="breakout" data-max="md">
    <p>The main text carries the argument.</p>
    <aside data-note>A citation, or a caveat, that would interrupt the flow.</aside>
</div>

Why this name

The column is ordinary; what is special is that a child can break out of it. Foundation 6 had .grid-container.fluid for the whole page and nothing for one element; people reached for negative margins.

Attributes

Attribute Type Values Default Description
data-max enum 2xs, xs, sm, md, lg, xl, 2xl md The widest the reading column may be.
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md The gutter on each side, and the space between children.

Markers

Attributes that descendants carry, not the root.

Attribute Type Values On Description
data-bleed boolean > * Breaks the child out of the column to span the full width.
data-note boolean > * A margin note: in the end gutter beside the child it follows when the breakout is wide, in the column when it is not.

Children

  • > *: at least 1. The content, in the column. Any child may carry data-bleed to span the full width.
  • > [data-bleed]: any number. Children that break out of the column.
  • > [data-note]: any number. A margin note: in the end gutter beside the child it follows when the breakout is wide, in the column when it is not.

Tokens

Token Description
--yeti-width-md The default column width, chosen under the base measure so paragraphs fill it.
--yeti-space-md The default gutter and row gap.
--yeti-text-sm The note's text size.
--yeti-color-text-muted The note's text colour.
Internal tokens (may change between minor versions) - `--_yeti-max` - `--_yeti-gap`

Accessibility

  • Purely visual. A bleeding child is still in reading order.

Browser support

  • Used without guards: grid named lines, min() in track sizes
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.