Utilities

These utility classes have one or two CSS properties that are meant to save you from creating several identical classes to do the same thing, like just centering some text.

Example Text

<div class="[modifier class]">
    Example Text
</div>

.disabled Disable an Element

Example Text

.clearfix Clear floats to keep the parent container in shape

Example Text

.f-none float: none;

Example Text

.f-left float: left;

Example Text

.f-right float: right;

Example Text

.ta-left text-align: left;

Example Text

.ta-center text-align: center;

Example Text

.ta-right text-align: right;

Example Text

7-1 Type Utilities

These are specific typography related utilities

The quick
brown fox
jumps over
the lazy dog.

<div class="type [modifier class]">
    The quick<br />
    brown fox<br />
    jumps over<br />
    the lazy dog.
</div>

.fw-light Changes the type to be 300 weight

The quick
brown fox
jumps over
the lazy dog.

.fw-normal Changes the type to be 400 weight

The quick
brown fox
jumps over
the lazy dog.

.fw-bold Changes the type to be 700 weight

The quick
brown fox
jumps over
the lazy dog.

.fs-small Small font-size

The quick
brown fox
jumps over
the lazy dog.

.fs-base Base font-size

The quick
brown fox
jumps over
the lazy dog.

.fs-large Large font-size

The quick
brown fox
jumps over
the lazy dog.

7-2 Margin Utilities

These utilities allow you to easily remove margins that you don't want

Do you like margins?

<h1 class="[modifier class]">
    Do you like margins?
</h1>

.m-zero Remove margins

Do you like margins?

.mt-zero Remove top margin only

Do you like margins?

.mb-zero Remove bottom margin only

Do you like margins?