Utility Classes

Utility classes are used to apply a single rule to a component. They can be used compositionally to modify elements as needed by a specific design context.

Spacing Classes

Below we describe a suite of utility classes to be used for spacing.

Available Classes

The utility classes available are of the following form:

  • .margin-[direction]-[size] - Margin of size [size] in direction [direction]
  • .padding-[direction]-[size] - Padding of size [size] in direction [direction]

Size can be

  • none - sets value to 0
  • tiny
  • small
  • medium
  • large
  • xlarge

Position can be

  • top
  • bottom
  • left
  • right
  • vert - top and bottom
  • horiz - left and right
  • absent (in which case, rule will apply both horizontally and vertically)

For example:

<button class="margin-none">Marginless Button</button>

Reset Classes

These classes are used to reset the styles needed by particular components.

Resetting lists

Use the .reset-list class to reset properties on a <ul> or <ol>.

The Four Seasons

  • Winter
  • Spring
  • Summer
  • Fall

The Four Seasons, reset

  • Winter
  • Spring
  • Summer
  • Fall
<!-- Standard List -->
<h3>The Four Seasons</h3>
<ul>
    <li>Winter</li>
    <li>Spring</li>
    <li>Summer</li>
    <li>Fall</li>
</ul>

<!-- Reset List -->
<h3>The Four Seasons, reset</h3>
<ul class='reset-list'>
    <li>Winter</li>
    <li>Spring</li>
    <li>Summer</li>
    <li>Fall</li>
</ul>

Resetting Buttons

Use the .reset-button class when you wish to reset properties on a <button>. This may be helpful if you need to style a custom button element.

<!-- Standard Button -->
<button>Example Button</button>

<!-- Reset Button -->
<button class="reset-button">Reset Button</button>

Reseting Child-Margins

Use the .reset-child-margins class when you wish to supply margins on children but do not want them applied to the first or last elements.

<div class="row padding-horiz-medium">
    <div class="small-4 padding-medium reset-child-margins" style="background-color: #F1F1F1;">

        <!-- This button has no top margin -->
        <button class="expand">Example Button</button>
        <button class="expand">Example Button</button>
        <button class="expand">Example Button</button>

        <!-- This button has no bottom margin -->
        <button class="expand">Example Button</button>
    </div>
</div>

Font Classes

Tabular Lining

Some themes supply a separate font used to apply tabular lining to numeric characters. This font may be applied to a component using the .text-tabular-lining utility class.

$199.99 - Standard Lining

$199.99 - Tabular Lining

<!-- Standard Text -->
<p>$199.99 - Standard Lining</p>

<!-- Tabular Figures -->
<p class="text-tabular-lining">$199.99 - Tabular Lining</p>

Color Classes

A handful of helpful utility classes to add text and background colors.

Text Colors

Base Text Colors

This is text color primary.

This is text color secondary.

This is text color success.

This is text color alert.

This is text color info.

This is text color warning.

<p class="text-primary">This is text color primary.</p>
<p class="text-secondary">This is text color secondary.</p>
<p class="text-success">This is text color success.</p>
<p class="text-alert">This is text color alert.</p>
<p class="text-info">This is text color info.</p>
<p class="text-warning">This is text color warning.</p>

Mute Text Colors

This is text color primary mute.

This is text color secondary mute.

This is text color success mute.

This is text color alert mute.

This is text color info mute.

This is text color warning mute.

<p class="text-primary-mute">This is text color primary mute.</p>
<p class="text-secondary-mute">This is text color secondary mute.</p>
<p class="text-success-mute">This is text color success mute.</p>
<p class="text-alert-mute">This is text color alert mute.</p>
<p class="text-info-mute">This is text color info mute.</p>
<p class="text-warning-mute">This is text color warning mute.</p>

Neutral Text Colors

This is text color white.

This is text color medium grey.

This is text color dark grey.

This is text color off black.

This is text color black.

<p class="padding-small bg-black text-white">This is text color white.</p>
<p class="text-medium-grey">This is text color medium grey.</p>
<p class="text-dark-grey">This is text color dark grey.</p>
<p class="text-off-black">This is text color off black.</p>
<p class="text-black">This is text color black.</p>

Background Colors

Base Background Colors

This is background color primary.
This is background color secondary.
This is background color success.
This is background color info.
This is background color alert.
This is background color warning.
<div class="padding-small margin-bottom-tiny text-white bg-primary">This is background color primary.</div>
<div class="padding-small margin-bottom-tiny text-white bg-secondary">This is background color secondary.</div>
<div class="padding-small margin-bottom-tiny text-white bg-success">This is background color success.</div>
<div class="padding-small margin-bottom-tiny text-white bg-info">This is background color info.</div>
<div class="padding-small margin-bottom-tiny text-white bg-alert">This is background color alert.</div>
<div class="padding-small margin-bottom-tiny text-white bg-warning">This is background color warning.</div>

Pastel Background Colors

This is background color primary pastel.
This is background color secondary pastel.
This is background color success pastel.
This is background color alert pastel.
This is background color info pastel.
This is background color warning pastel.
<div class="padding-small margin-bottom-tiny text-white bg-primary-pastel">This is background color primary pastel.</div>
<div class="padding-small margin-bottom-tiny bg-secondary-pastel">This is background color secondary pastel.</div>
<div class="padding-small margin-bottom-tiny bg-success-pastel">This is background color success pastel.</div>
<div class="padding-small margin-bottom-tiny bg-alert-pastel">This is background color alert pastel.</div>
<div class="padding-small margin-bottom-tiny bg-info-pastel">This is background color info pastel.</div>
<div class="padding-small margin-bottom-tiny bg-warning-pastel">This is background color warning pastel.</div>

Neutral Background Colors

This is background color white.
This is background color off white.
This is background color light grey.
This is background color medium grey.
This is background color dark grey.
This is background color off black.
This is background color black.
<div class="padding-small margin-bottom-tiny text-black bg-white">This is background color white.</div>
<div class="padding-small margin-bottom-tiny text-black bg-off-white">This is background color off white.</div>
<div class="padding-small margin-bottom-tiny text-black bg-light-grey">This is background color light grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-medium-grey">This is background color medium grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-dark-grey">This is background color dark grey.</div>
<div class="padding-small margin-bottom-tiny text-white bg-off-black">This is background color off black.</div>
<div class="padding-small margin-bottom-tiny text-white bg-black">This is background color black.</div>

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.