Utilities

Background Colors

Use classes .bg-- and then the color you want.

<div class="clearfix mb2">
    <div class="bg--darkest-gray p4 float-left"></div>
    <div class="bg--dark-gray p4 float-left"></div>
    <div class="bg--gray p4 float-left"></div>
    <div class="bg--light-gray p4 float-left"></div>
    <div class="bg--lightest-gray p4 float-left"></div>
    <div class="bg--shade p4 float-left"></div>
</div>

<div class="clearfix">
    <div class="bg--red p4 float-left"></div>
    <div class="bg--blue p4 float-left"></div>
    <div class="bg--green p4 float-left"></div>
    <div class="bg--yellow p4 float-left"></div>
    <div class="bg--purple p4 float-left"></div>
    <div class="bg--orange p4 float-left"></div>
</div>

Text Colors

Use classes .text-- and then the color you want.

Darkest gray

Dark gray (default)

Gray

Light gray

Lightest gray

Shade

Red

Blue

Green

Yellow

Purple

Orange

<div class="mb2">
    <p class="text--darkest-gray m0">Darkest gray</p>
    <p class="text--dark-gray m0">Dark gray (default)</p>
    <p class="text--gray m0">Gray</p>
    <p class="text--light-gray m0">Light gray</p>
    <p class="text--lightest-gray m0">Lightest gray</p>
    <p class="text--shade m0">Shade</p>
</div>

<div>
    <p class="text--red m0">Red</p>
    <p class="text--blue m0">Blue</p>
    <p class="text--green m0">Green</p>
    <p class="text--yellow m0">Yellow</p>
    <p class="text--purple m0">Purple</p>
    <p class="text--orange m0">Orange</p>
</div>

Common Utilities

We have multiple utility classes. Below a some of the most common examples.

.centered

.block

.inline-block

.hidden-overflow

.auto-overflow

.scroll-overflow

.float-left with .clearfix

.float-right with .clearfix

.full-height

.full-width

.relative (can also use .absolute and .fixed)

<div class="centered inline-block border--full mb2 ps"><code>.centered</code></div>
<span class="block border--full mb2 ps"><code>.block</code></span>
<div class="inline-block border--full mb2 ps"><code>.inline-block</code></div>
<div class="hidden-overflow border--full mb2 ps" style="height:42px;">
    <p class="m0"><code>.hidden-overflow</code></p>
    <p class="m0"><code>.hidden-overflow</code></p>
    <p class="m0"><code>.hidden-overflow</code></p>
</div>
<div class="auto-overflow border--full mb2 ps" style="height:42px;">
    <p class="m0"><code>.auto-overflow</code></p>
    <p class="m0"><code>.auto-overflow</code></p>
    <p class="m0"><code>.auto-overflow</code></p>
</div>
<div class="scroll-overflow border--full mb2 ps" style="height:42px;">
    <p class="m0"><code>.scroll-overflow</code></p>
    <p class="m0"><code>.scroll-overflow</code></p>
    <p class="m0"><code>.scroll-overflow</code></p>
</div>
<div class="clearfix mb2">
    <div class="float-left border--full ps"><code>.float-left</code> with <code>.clearfix</code></div>
    <div class="float-right border--full ps"><code>.float-right</code> with <code>.clearfix</code></div>
</div>
<div class="mb2" style="height:75px;">
    <div class="full-height border--full ps"><code>.full-height</code></div>
</div>
<div class="full-width border--full mb2 ps"><code>.full-width</code></div>
<div class="relative border--full ps"><code>.relative</code> (can also use <code>.absolute</code> and <code>.fixed</code>)</div>

Text Utilities

Some useful text classes.

"Small" size.

Bold, italic, and capitalize first letter.

Center aligned.

Right aligned.

Centered on mobile.

Small on mobile.

Text shadow (hard to tell on white background).

Combine .no-wrap with .ellipsis and a max width to crop at a certain point like this blah blah blah blah.

<p class="small">"Small" size.</p>
<p><span class="bold">Bold</span>, <span class="italic">italic</span>, and <span class="capitalize">capitalize first letter</span>.</p>
<p class="center">Center aligned.</p>
<p class="right-align">Right aligned.</p>
<p class="center-on-mobile">Centered on mobile.</p>
<p class="small-on-mobile">Small on mobile.</p>
<p clas="text-shadow">Text shadow (hard to tell on white background).</p>
<p class="no-wrap ellipsis ml0" style="max-width:700px;">Combine <code>.no-wrap</code> with <code>.ellipsis</code> and a max width to crop at a certain point like this blah blah blah blah.</p>

Borders

Apply borders with border-- and the side, or full.

Full border

Top border

Right border

Bottom border

Left border

<div class="border--full mb2">Full border</div>
<div class="border--top mb2">Top border</div>
<div class="border--right mb2">Right border</div>
<div class="border--bottom mb2">Bottom border</div>
<div class="border--left mb2">Left border</div>

Rounding

Rounding applies our border radius of 3px. You can also use .circle to create a circle if the height and width of the object are the same.

Full rounded

Top rounded

Right rounded

Bottom rounded

Left rounded

Circle

<div class="border--full rounded mb2">Full rounded</div>
<div class="border--full rounded--top mb2">Top rounded</div>
<div class="border--full rounded--right mb2">Right rounded</div>
<div class="border--full rounded--bottom mb2">Bottom rounded</div>
<div class="border--full rounded--left mb2">Left rounded</div>
<div class="border--full circle pt3" style="width:75px;height:75px;">Circle</div>

All of our spacing is based on a baseline of .4rem – each level is a successive multiplication of the baseline. Margin and padding classes are named with m or p, then the side (t for top, r for right, etc), then the size (s stands for "small," you can use 0 to remove space, and the hightest number is 5). Forgo the side to apply the space to all sides (i.e. .m3).

<div class="mb2"><span class="prs bg--gray"></span></div>
<div class="mb2"><span class="pr1 bg--gray"></span></div>
<div class="mb2"><span class="pr2 bg--gray"></span></div>
<div class="mb2"><span class="pr3 bg--gray"></span></div>
<div class="mb2"><span class="pr4 bg--gray"></span></div>
<div class="mb3"><span class="pr5 bg--gray"></span></div>

<div class="mb2"><span class="mls border--left"></span></div>
<div class="mb2"><span class="ml1 border--left"></span></div>
<div class="mb2"><span class="ml2 border--left"></span></div>
<div class="mb2"><span class="ml3 border--left"></span></div>
<div class="mb2"><span class="ml4 border--left"></span></div>
<div><span class="ml5 border--left"></span></div>