Utility classes can help remove repetition by creating a set of abstract classes that can be used throughout your project. Each class is responsible for doing one job and doing it well. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.

All helper classes use the !important flag to avoid specificity issues.

Background Color

Generates a background-color helper for all colors specified in your $colors map, in the following format: .background-{$category}-{$value}.

<div class="background-brand-primary"></div>
<div class="background-secondary-orange"></div>
<div class="background-greyscale-50"></div>


Adds a border to a given element in the specified direction(s). It uses the color value specified in the keyline category of your $colors map.

.border-left Adds a 1px keyline on the left.
.border-top Adds a 1px keyline on the top.
.border-right Adds a 1px keyline on the right.
.border-bottom Adds a 1px keyline on the bottom.
.border-all Adds a 1px keyline to every side.
.no-border Removes all borders.
<div class="border-bottom"></div>

Margin & Padding

Allows your to add or remove margin or padding in all directions, or a given direction. These are generated using the values stored in the $sizes map, to help create consistency throughout your project.

.padding-{direction}-{size} Applies padding in the specified direction of the specified size.
.margin-{direction}-{size} Applies margin in the specified direction of the specified size.
.no-margin Removes all margins.
.no-margin-{direction} Removes margin in the specified direction.
.no-padding-{padding} Removes padding in the specified direction.
<div class="border-all padding-base margin-bottom-quarter">.margin-bottom-quarter</div>
<div class="border-all padding-base margin-bottom-base">.margin-bottom-base</div>
<div class="border-all padding-base margin-bottom-triple">.margin-bottom-triple</div>
<div class="border-all padding-base no-margin">.no-margin</div>


.block Sets element display mode to block.
.inline-block Sets element display mode to inline-block.
.float-left Floats element to the left.
.float-right Floats element to the right.
.clearfix Clears floats (apply this to the parent element).
<div class="block"></div>
<div class="inline-block"></div>
<div class="float-left"></div>
<div class="float-right"></div>
<div class="clearfix"></div>


Rows & Columns

To create a grid, use the .row class (clears the floats), then .column-{number} classes for different column widths. Columns will grow to 100% of the container width at the breakpoint specified in your grid map.

<div class="row">
 <div class="columns-4">
 <div class="columns-5">
 <div class="columns-3">

Helper classes are also available to create different grids for different screen sizes.

<div class="columns">
 <div class="columns-4-device-x-small columns-5-device-medium">
 <div class="columns-4-device-x-small columns-3-device-medium">
 <div class="columns-4-device-x-small columns-4-device-medium">


Offsets allow you to shift a column to the right by a specified number of columns.

<div class="columns">
	<div class="columns-3 offset-9">


Typgrophy helper classes are prefixed with '.text-', followed by the helper name – e.g. .text-center.


Left, right and center.

This text is left-aligned
This text is centered
This text is right-aligned
<div class="text-left">This text is left-aligned</div>
<div class="text-center">This text is center-aligned</div>
<div class="text-right">This text is right-aligned</div>


These are generated using values specified in your $font-sizes map. These are useful for altering the visual appearance of semantically correct headings.

This text is X-Large
This text is Large
This text is Medium-Large
This text is Medium
This text is Base
This text is Small
This text is X-Small
<div class="text-x-large">This text is X-Large</div>
<div class="text-large">This text is Large</div>
<div class="text-medium-large">This text is Medium-Large</div>
<div class="text-medium">This text is Medium</div>
<div class="text-base">This text is Base</div>
<div class="text-small">This text is Small</div>
<div class="text-x-small">This text is X-Small</div>


These are generated using values stored in your $colors map.

Text Brand Primary
Text Brand Secondary
Text Greyscale-400
<div class="text-brand-primary">Text Brand Primary</div>
<div class="text-brand-primary">Text Brand Secondary</div>
<div class="text-greyscale-400">Text Greyscale-400</div>


Uppercase or capitalized.

This text is uppercase
This text is capitalized
<div class="text-uppercase">This text is uppercase</div>
<div class="text-capitalized">This text is capitalized</div>


Use this to hide an element altogether, or only for specific screen sizes. A helper class is generated using each value stored in the $breakpoints map.

<div class="is-hidden"></div>
// Hidden at all times.

<div class="is-hidden-above-device-small"></div>
// Hides above the device-small breakpoint.

<div class="is-hidden-below-device-small"></div>
// Hides below the device-small breakpoint.