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-2 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-2">This element has <strong>.fizz-stack-2</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>

Gap

Gap is able to be used with fizz-flex-row, fizz-flex-multirow, and fizz-grid classes.

This element has .fizz-gap-0 applied.

This element has .fizz-gap-2 applied.

This element has .fizz-gap-4 applied.

This element has .fizz-gap-8 applied.

This element has .fizz-gap-12 applied.

This element has .fizz-gap-16 applied.

This element has .fizz-gap-24 applied.

This element has .fizz-gap-32 applied.

This element has .fizz-gap-48 applied.

This element has .fizz-gap-64 applied.

HTML

<p class="fizz-flex-row fizz-gap-0">This element has <strong>.fizz-gap-0</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-2">This element has <strong>.fizz-gap-2</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-4">This element has <strong>.fizz-gap-4</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-8">This element has <strong>.fizz-gap-8</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-12">This element has <strong>.fizz-gap-12</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-16">This element has <strong>.fizz-gap-16</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-24">This element has <strong>.fizz-gap-24</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-32">This element has <strong>.fizz-gap-32</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-48">This element has <strong>.fizz-gap-48</strong> applied.</p>
<p class="fizz-flex-row fizz-gap-64">This element has <strong>.fizz-gap-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:

.fizz-flow-4
.fizz-flow-8
.fizz-flow-12
.fizz-flow-16
.fizz-flow-24
.fizz-flow-32
.fizz-flow-48

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.

This element has .fizz-no-min-width.

HTML

<p class="fizz-bordered fizz-inset-square-16 fizz-no-min-width">
  This element has <code>.fizz-no-min-width</code>.
</p>

Max Width

Use .fizz-max-width to set the max width of an element to 1440px.

This element has .fizz-max-width.

HTML

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

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>

Containers

The fizz-container-spacing class is provided to give padding to align inner content so it does not go to the edge of a container. This class is dynamic and adjusts for each breakpoint automatically. Inline-padding on mobile is 16px, then goes to 32px at tablet, 48px at max-width, and finally to auto when it gets to 1536px or the max-width added to the inline-padding (1440+48+48). See Breakpoints for information on our current breakpoint sizes.

`fizz-container-spacing`

This container will automatically resize and provide margins at each breakpoint.

HTML

<div class="fizz-container-margin">
  This container will automatically resize and provide margins at each breakpoint.

There are also other container classes that may help you cap the max width of content to a specific size.

Container classes are provided to cap a containers width and center it with margin-inline of auto.

`fizz-container-large`

This container has a max-width of 1440px and margin-inline of auto.

HTML

<div class="fizz-container-large">
    This container has a max-width of 1440px and margin-inline of auto.
  </div>

`fizz-container-medium`

This container has a max-width of 1024px and margin-inline of auto.

HTML

<div class="fizz-container-medium">
    This container has a max-width of 1024px and margin-inline of auto.
  </div>

`fizz-container-small`

This container has a max-width of 700px and margin-inline of auto.

HTML

<div class="fizz-container-small">
    This container has a max-width of 700px and margin-inline of auto.
  </div>

`fizz-container-xs`

This container has a max-width of 375px and margin-inline of auto.

HTML

<div class="fizz-container-xs">
    This container has a max-width of 375px and margin-inline of auto.
  </div>