mostlycss
Theme

Cluster

.cluster

.cluster — a row of things that goes to a second line instead of off the page.

Examples

A row that goes to a second line

View “A row that goes to a second line” as

Orchestra Coro Danza Regia 

<p class="cluster">
  <a class="tag" href="#">Orchestra</a>
  <a class="tag" href="#">Coro</a>
  <a class="tag" href="#">Danza</a>
  <a class="tag" href="#">Regia</a>
</p>

Counted across the nine sites built with this library: 94 hand-written versions of this shape, in nine stylesheets out of nine — nearly three times as many as stack.

It is not display: flex; gap: the two declarations nobody remembers are flex-wrap: wrap, without which the row overflows the page rather than going to a second line, and min-inline-size: 0, without which a cluster inside another flex row refuses to narrow and holds the page open at 320px.

A label at one end, a control at the other

View “A label at one end, a control at the other” as

127 results

<div class="cluster cluster-between">
  <p>127 results</p>
  <button class="btn btn-sm btn-quiet" type="button">Clear filters</button>
</div>

.cluster-between pushes the first and last item to the edges and still wraps: on a narrow screen the two land on their own lines instead of the button falling off the end.

.cluster-end is the same idea with everything at the end.

Mixed type sizes sit on their baselines

View “Mixed type sizes sit on their baselines” as

1.839 sagre e fiere, in 5 regioni 

<p class="cluster cluster-baseline">
  <strong style="font-size: var(--font-size-2xl)">1.839</strong>
  <span>sagre e fiere, in 5 regioni</span>
</p>

Centred, a large figure and a small word share a midline and the word reads as lifted.

On their baselines they sit on the same line, which is what the eye expects of two things written side by side. .cluster-start is the other end of that axis, for items several lines tall.

Tokens 1

Level 2, declared on .cluster itself. Set any of them on that selector to restyle this utility without touching the skin.

Level 2 tokens declared by cluster
TokenDefault
--cluster-justifyflex-start

Variants and states

Variants

  • .cluster-baseline
  • .cluster-between
  • .cluster-end
  • .cluster-loose
  • .cluster-start
  • .cluster-tight

State it reads

None.

Before you ship it

What you have to do 3 requirements

  1. A child that holds long text needs min-inline-size: 0 too. This class sets it on itself, not on its children: doing that would stop a chip from sizing to its own label, which is the whole point of a cluster. Put it on the one child that has to give.
  2. Do not also put .stack on it. The stack's margins would add to this gap. One of the two owns the spacing.
  3. A cluster is not a list. If the items are a list, keep the <ul> and put the class on it — list-style: none on a <ul> takes the semantics with it in VoiceOver, so add role="list" back. a11y.css documents that pairing.

src/css/utilities/cluster.css · npx mostlycss add cluster