Utilities

62 classes, shipped in css/main.css, for arranging and styling light-DOM markup: a 12-track grid, the gap scale, the type ramp and two visibility helpers. Every row below is read at build time from the stylesheet that emits it, declarations included.

Use these on page markup and on children you are spanning inside a grid. Arranging sibling COMPONENTS is <al-layout>’s job, not a wrapper of your own — which is also why .al-u-grid__item is not scoped under .al-u-grid in the source: the container may be a layout’s shadow root, where no.al-u-grid ancestor exists in the light DOM to match.

Four families, each emitted once bare and once inside every breakpoint, socol:8@md is a real class and so iscol:8. Breakpoints stack: the widest matching one wins.

Implicit columns

Uniform columns declare themselves on the container. Unlike float or flexbox grid libraries there is no wrapper element around each column.

<div class="al-u-grid cols:6@md cols:3@lg al-u-gap-lg">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Explicit columns

Columns that are not uniform declare their own span, on the element that spans it.

<div class="al-u-grid al-u-gap-lg">
  <div class="al-u-grid__item col:6 col:8@md">1</div>
  <div class="al-u-grid__item col:6 col:4@md">2</div>
</div>

Explicit rows

The same idea vertically — a cell that occupies two rows, with no row wrapper anywhere.

<div class="al-u-grid">
  <div class="al-u-grid__item col:8@md">1</div>
  <div class="al-u-grid__item col:4@md row:2@md">2</div>
  <div class="al-u-grid__item col:8@md">3</div>
</div>

Offset columns

offset:N starts an item in track N, leaving the tracks before it empty.

<div class="al-u-grid">
  <div class="al-u-grid__item col:7@md offset:2@md">1</div>
  <div class="al-u-grid__item col:3@md">2</div>
</div>

Every span, one grid

Multiple rows come from filling 12 tracks, not from a row wrapper per row. All12 spans, in one container:

A gap class makes its element a flex column and spaces the children. The value column below is resolved through the same token layer Foundations reads, so it is what this brand actually renders — not what the SCSS literally says.

<!-- The gap classes go on the PARENT. They set
     display:flex and a column direction as well as
     the gap, so a bare wrapper needs nothing else. -->
<div class="al-u-gap-lg">
  <div>Item</div>
  <div>Item</div>
</div>

<!-- ...and al-u-gap--row turns the same stack sideways. -->
<div class="al-u-gap-sm al-u-gap--row">
  <div>Item</div>
  <div>Item</div>
</div>

Two tiers, and the difference matters. A tier-2 class names a ROLE, which a brand, a density or a contrast setting is allowed to repoint; a tier-1 class pins a literal step of the ramp and follows nothing. Prefer tier 2 unless you have a reason not to.

.al-u-is-vishidden keeps content in the accessibility tree while removing it visually — it is for labels a screen reader needs and a sighted reader does not, never for content you simply want gone. Use hidden for that.