Improvise. Organize. Customize.
Get Formulize GitHub

Layout

Layout classes arrange their children. They respond to the space they are given, not to the size of the screen, so the same markup works full screen, in the drawer, on a phone and embedded in another site. Nest them to build anything. The gap is the only space between the children: their top and bottom margins are removed. Change the gap with a gap utility.

Stack

Children one above the other. The default way to arrange sections, fields and paragraphs.

ClassWhat it does
fz-stackChildren one above the other, 4 steps (16px) apart.

Example

<div class="fz-stack">
  <h3 class="fz-text-lg fz-font-semibold">Program summary</h3>
  <p>A stack puts the same space between each of its children.</p>
  <p class="fz-text-muted">Change the space with a gap utility, such as fz-gap-2.</p>
</div>

Cluster

Children side by side, vertically centred, wrapping onto new lines when they run out of room. For buttons, badges, links and other small things.

ClassWhat it does
fz-clusterSide by side, wrapping, 2 steps (8px) apart.
  • To push the rest of the row to the far end, put an fz-spacer element before it, or fz-ms-auto on the first thing to push.

Example

<div class="fz-cluster">
  <span class="fz-badge fz-badge--success">Approved</span>
  <span class="fz-badge">Grade 7</span>
  <span class="fz-badge fz-badge--info">Science</span>
  <button type="button" class="fz-btn fz-btn--sm fz-ms-auto">Edit tags</button>
</div>

Auto grid

Equal columns: as many as fit, each at least 10rem wide. There are fewer columns as the space narrows, and one column on a phone, with nothing else to set.

ClassWhat it does
fz-auto-gridEqual columns, as many as fit, 4 steps apart.
fz-auto-grid--max-{2-6}At most this many columns.
fz-auto-grid--narrowColumns can be as narrow as 8rem, so more fit.
fz-auto-grid--wideColumns are at least 18rem, so fewer fit.
  • For a different minimum, set --fz-auto-grid-min on the element: style="--fz-auto-grid-min: 14rem".
  • In the drawer at its narrowest, the default fits two columns.

Example

<div class="fz-auto-grid fz-auto-grid--max-3">
  <div class="fz-card"><p class="fz-text-sm fz-text-muted">Open</p><p class="fz-text-2xl fz-font-semibold fz-tabular-nums">24</p></div>
  <div class="fz-card"><p class="fz-text-sm fz-text-muted">In review</p><p class="fz-text-2xl fz-font-semibold fz-tabular-nums">7</p></div>
  <div class="fz-card"><p class="fz-text-sm fz-text-muted">Closed this month</p><p class="fz-text-2xl fz-font-semibold fz-tabular-nums">112</p></div>
</div>

With sidebar

A side of a set width next to a main area that takes the rest. When the main area would be narrower than half the space, the two stack instead.

ClassWhat it does
fz-with-sidebarThe first child is the side, 16rem wide; the second is the main area.
fz-with-sidebar--endThe side is the second child, at the end.
  • For a different width, set --fz-sidebar-width on the element: style="--fz-sidebar-width: 12rem".

Example

<div class="fz-with-sidebar">
  <nav class="fz-card" aria-label="Sections">
    <div class="fz-stack fz-gap-2"><a href="#">Details</a><a href="#">Contacts</a><a href="#">History</a></div>
  </nav>
  <div class="fz-card"><p>The main area takes the rest of the width.</p></div>
</div>

Switcher

Two or three things in equal columns while there is room, and all stacked when there is not: never part way.

ClassWhat it does
fz-switcherSide by side while wider than 32rem, otherwise stacked.
  • To switch at a different width, set --fz-switcher-threshold on the element.

Example

<div class="fz-switcher">
  <div class="fz-card"><p class="fz-card__title">Billing address</p><p class="fz-text-muted">123 Main Street</p></div>
  <div class="fz-card"><p class="fz-card__title">Shipping address</p><p class="fz-text-muted">Same as billing</p></div>
</div>

Container

Centres content at a comfortable maximum width, with space at the sides.

ClassWhat it does
fz-containerAt most 72rem wide, centred.
fz-container--narrowAt most 42rem: for forms and reading.
fz-container--wideAt most 80rem.

Example

<div class="fz-container fz-container--narrow">
  <div class="fz-card"><p>This card is at most 42rem wide, and centred.</p></div>
</div>

Spacer

An empty element that takes up the free space in a row, pushing what follows it to the far end.

ClassWhat it does
fz-spacerGrows to fill the free space.

Example

<div class="fz-cluster">
  <button type="button" class="fz-btn fz-btn--ghost">Back</button>
  <span class="fz-spacer"></span>
  <button type="button" class="fz-btn">Save draft</button>
  <button type="button" class="fz-btn fz-btn--primary">Submit</button>
</div>

Layout utilities

Tailwind's layout utilities, with Tailwind's meanings. fz-grid only sets display: grid, and fz-grid-cols-3 is exactly three columns at every width, since there are no screen-size variants: for columns that adapt, use fz-auto-grid.

ClassWhat it does
fz-flexdisplay: flex
fz-inline-flexdisplay: inline-flex
fz-griddisplay: grid
fz-flex-{row,col}Children in a row, or a column.
fz-flex-{wrap,nowrap}Wrap onto new lines, or don't.
fz-flex-1On a child: grow and shrink, ignoring its own size.
fz-flex-autoOn a child: grow and shrink from its own size.
fz-flex-noneOn a child: neither grow nor shrink.
fz-growOn a child: take up the free space.
fz-shrink-0On a child: never narrower than its content.
fz-items-{start,center,end,baseline,stretch}Align the children across the row.
fz-justify-{start,center,end,between}Distribute the children along the row.
fz-self-{start,center,end}On a child: align this one.
fz-grid-cols-{1-6}Exactly this many equal columns.
fz-col-span-{1-6}On a child: span this many columns.
fz-col-span-fullOn a child: span the whole row.
fz-gap-{n}The space between the children, on a layout class or anything with fz-flex or fz-grid.
fz-gap-x-{n}The space between columns only.
fz-gap-y-{n}The space between rows only.

Example

<div class="fz-grid fz-grid-cols-3 fz-gap-4">
  <div class="fz-card fz-col-span-2">Spans two columns</div>
  <div class="fz-card">One column</div>
  <div class="fz-card fz-col-span-full">The whole row</div>
</div>