Spacing Utilites

Fizz has a number of utilities to control spacing within and between elements, based on the spacing values outlined in the Spacing section.

Stack

Stack describes the vertical space between elements, applied as margin. Fizz only applies stack margins to the bottom of elements to prevent collapsing margins.

You can also use stack utility classes to override default margins on containers using .fizz-flow- (detailed below).

This element has .fizz-stack-0 applied.

This element has .fizz-stack-4 applied.

This element has .fizz-stack-8 applied.

This element has .fizz-stack-12 applied.

This element has .fizz-stack-16 applied.

This element has .fizz-stack-24 applied.

This element has .fizz-stack-32 applied.

This element has .fizz-stack-48 applied.

This element has .fizz-stack-64 applied.

HTML
<p class="fizz-stack-0">This element has <strong>.fizz-stack-0</strong> applied.</p>
<p class="fizz-stack-4">This element has <strong>.fizz-stack-4</strong> applied.</p>
<p class="fizz-stack-8">This element has <strong>.fizz-stack-8</strong> applied.</p>
<p class="fizz-stack-12">This element has <strong>.fizz-stack-12</strong> applied.</p>
<p class="fizz-stack-16">This element has <strong>.fizz-stack-16</strong> applied.</p>
<p class="fizz-stack-24">This element has <strong>.fizz-stack-24</strong> applied.</p>
<p class="fizz-stack-32">This element has <strong>.fizz-stack-32</strong> applied.</p>
<p class="fizz-stack-48">This element has <strong>.fizz-stack-48</strong> applied.</p>
<p class="fizz-stack-64">This element has <strong>.fizz-stack-64</strong> applied.</p>

Inline

Inline describes the horizontal space between elements, applied as margin. Fizz's flexbox utilities have their own classes for applying inline margins between items, but you can use inline utility classes to override that value for individual items. The examples below show three buttons contained in a .fizz-flex-row-32, which has a default of 32px of inline margin between items.

.fizz-inline-0 applied to the middle button

.fizz-inline-4 applied to the middle button

.fizz-inline-8 applied to the middle button

.fizz-inline-12 applied to the middle button

.fizz-inline-16 applied to the middle button

HTML
<div class="fizz-flex-row-32">
<button class="fizz-button">Button</button>
<button class="fizz-button fizz-inline-0">Button</button>
<button class="fizz-button">Button</button>
</div>

...

<div class="fizz-flex-row-32">
<button class="fizz-button">Button</button>
<button class="fizz-button fizz-inline-16">Button</button>
<button class="fizz-button">Button</button>
</div>

Flow

Flow utilities allow you to apply consistent margins between elements within a container by applying a .fizz-flow- class to the parent rather than each individual child element. The following values for .fizz-flow- are available:

Here's a container with .fizz-flow-16 applied.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione rem reiciendis cumque illo accusamus! Nesciunt repudiandae quas quaerat, repellendus voluptas officiis quam eaque dolorem atque consectetur ea, quisquam autem illum.

Perferendis rerum ratione unde incidunt distinctio asperiores suscipit et, reiciendis vel quam libero repudiandae quia, iste recusandae adipisci? Itaque maiores earum velit nobis ad commodi eveniet. Minima accusantium nesciunt commodi!

Suscipit dolor vitae quidem dolorum assumenda, porro quo atque corrupti voluptatibus esse iusto sapiente tenetur quod beatae impedit laborum inventore id quibusdam, quia dolores natus saepe vel ipsa recusandae! Culpa!

HTML
<div class="fizz-flow-16 fizz-surface fizz-inset-square-16">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione rem reiciendis cumque illo accusamus! Nesciunt repudiandae quas quaerat, repellendus voluptas officiis quam eaque dolorem atque consectetur ea, quisquam autem illum.</p>

<p>Perferendis rerum ratione unde incidunt distinctio asperiores suscipit et, reiciendis vel quam libero repudiandae quia, iste recusandae adipisci? Itaque maiores earum velit nobis ad commodi eveniet. Minima accusantium nesciunt commodi!</p>

<p>Suscipit dolor vitae quidem dolorum assumenda, porro quo atque corrupti voluptatibus esse iusto sapiente tenetur quod beatae impedit laborum inventore id quibusdam, quia dolores natus saepe vel ipsa recusandae! Culpa!</p>
</div>

You can override .fizz-flow- on individual children by applying a .fizz-stack- class to them.

Inset

Inset utilites allow you to apply padding to an element. Most components already have proper padding applied to them, but if you're making a container you can use these to apply padding to it.

Inset None

Inset None removes padding from an element that otherwise has some. Use sparingly.

.fizz-inset-none

Inset Square

Inset Square applies padding equally to all four sides.

.fizz-inset-square-4

.fizz-inset-square-8

.fizz-inset-square-12

.fizz-inset-square-16

.fizz-inset-square-24

.fizz-inset-square-32

HTML
<div class="fizz-surface fizz-bordered fizz-inset-square-4">
<p><code>.fizz-inset-square-4</code></p>
</div>

...

<div class="fizz-surface fizz-bordered fizz-inset-square-32">
<p><code>.fizz-inset-square-32</code></p>
</div>

Inset Squish

Inset Squish applies more padding to the sides than to the top and bottom. (This always reminds me of the Headcrusher sketch from Kids in the Hall.)

.fizz-inset-squish-12

.fizz-inset-squish-16

.fizz-inset-squish-24

.fizz-inset-squish-64

.fizz-inset-squish-96

HTML
<div class="fizz-surface fizz-bordered fizz-inset-squish-12">
<p class="fizz-surface-blue fizz-inset-square-8"><code>.fizz-inset-squish-12</code></p>
</div>

<div class="fizz-surface fizz-bordered fizz-inset-squish-16">
<p><code>.fizz-inset-squish-16</code></p>
</div>

<div class="fizz-surface fizz-bordered fizz-inset-squish-24">
<p><code>.fizz-inset-squish-24</code></p>
</div>

<div class="fizz-surface fizz-bordered fizz-inset-squish-64">
<p><code>.fizz-inset-squish-64</code></p>
</div>

<div class="fizz-surface fizz-bordered fizz-inset-squish-96">
<p><code>.fizz-inset-squish-96</code></p>
</div>

Inset Stretch

Inset Stretch is the opposite of Inset Squish — it applies more padding to the top and bottom than to the sides.

.fizz-inset-stretch-24

.fizz-inset-stretch-32

HTML
<div class="fizz-surface fizz-bordered fizz-inset-stretch-24">
<p><code>.fizz-inset-stretch-24</code></p>
</div>
<div class="fizz-surface fizz-bordered fizz-inset-stretch-32">
<p><code>.fizz-inset-stretch-32</code></p>
</div>

Inset Vertical/Horizontal

Apply these classes if you only want to add padding in one dimension.

.fizz-inset-horizontal-8

.fizz-inset-horizontal-16

.fizz-inset-vertical-8

.fizz-inset-vertical-16

.fizz-inset-vertical-48

HTML
<div class="fizz-surface fizz-bordered fizz-inset-horizontal-8">
<p><code>.fizz-inset-horizontal-8</code></p>
</div>
<div class="fizz-surface fizz-bordered fizz-inset-horizontal-16">
<p><code>.fizz-inset-horizontal-16</code></p>
</div>
<div class="fizz-surface fizz-bordered fizz-inset-vertical-8">
<p><code>.fizz-inset-vertical-8</code></p>
</div>
<div class="fizz-surface fizz-bordered fizz-inset-vertical-16">
<p><code>.fizz-inset-vertical-16</code></p>
</div>

Creating Negative Margins

Sometimes on small screens you might have a container that needs to expand to the full width its container, breaking out of the usual padding of its parent. You can apply .fizz-expand-16 to do this, or .fizz-expand-16-on-small to only do it on small viewports.

Distributor Invoice # Amount Due
Starla-IL 12345 $1,065.40
Breakthru Beverage 12346 $2,018.20
Eagle Rock 12347 $330.00
Savannah Beer Company 12348 $10,000.00
HTML
<table class="fizz-table fizz-expand-16-on-small">
<thead>
<tr>
<th>Distributor</th>
<th class="fizz-nowrap fizz-text-right">Invoice #</th>
<th class="fizz-nowrap fizz-text-right">Amount Due</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Distributor">Starla-IL</td>
<td data-label="Invoice #" class="fizz-text-right">12345</td>
<td data-label="Amount Due" class="fizz-text-right">$1,065.40</td>
</tr>
<tr>
<td data-label="Distributor">Breakthru Beverage</td>
<td data-label="Invoice #" class="fizz-text-right">12346</td>
<td data-label="Amount Due" class="fizz-text-right">$2,018.20</td>
</tr>
<tr>
<td data-label="Distributor">Eagle Rock</td>
<td data-label="Invoice #" class="fizz-text-right">12347</td>
<td data-label="Amount Due" class="fizz-text-right">$330.00</td>
</tr>
<tr>
<td data-label="Distributor">Savannah Beer Company</td>
<td data-label="Invoice #" class="fizz-text-right">12348</td>
<td class="fizz-text-right">$10,000.00</td>
</tr>
</tbody>
</table>

Width

Fizz has utility classes that allow you to specify the width of a container relative to the viewport. In general the widths of elements should be automatically defined by their layout and display property. Block elements are 100% by default, while inline elements only take up as much room as the content within. Should you need to specify a width, the available utility classes are:

.fizz-full-width

.fizz-half-width

.fizz-third-width

.fizz-quarter-width

.fizz-fifth-width

HTML
<p class="fizz-full-width"><code>.fizz-full-width</code></p>
<p class="fizz-half-width"><code>.fizz-half-width</code></p>
<p class="fizz-third-width"><code>.fizz-third-width</code></p>
<p class="fizz-quarter-width"><code>.fizz-quarter-width</code></p>
<p class="fizz-fifth-width"><code>.fizz-fifth-width</code></p>

Min Width

Use .fizz-no-min-width to set the minimum width of an element to zero.

Max Content

Use .fizz-max-content to set an element's width to just as much space as it needs to accomodate the content within.

This element has .fizz-max-content.

HTML
<div class="fizz-bordered fizz-inset-square-16 fizz-max-content">
<p>This element has <code>.fizz-max-content</code>.</p>
</div>