Pattern Library

Helpers

On this page:

The helper classes below aid immensely to site development and lessen the need for custom inline styling.

Spacing

Helper classes that control margins and padding are available for each side (top, bottom, left, right) of an element and vary in size from extra small (.5em) to extra large (6em). Spacing classes follow this formula:

.l-<type>-<direction><size>

Type

  • margin
  • padding

Direction

  • a = all
  • t = top
  • r = right
  • b = bottom
  • l = left
  • h = horizontal (left and right)
  • v = vertical (top and botto)

Size

  • n = none
  • s = small (0.5em)
  • d = default (1em)
  • m = medium (2em)
  • l = large (4em)
  • x = xlarge (6em)

Examples:

Class CSS
l-margin-ad margin: 1em;
l-padding-hl padding-left: 4em; padding-right: 4em;
l-padding-tm padding-top: 2em;
l-margin-bx margin-bottom: 6em;
l-margin-vs margin-top: 0.5em; margin-bottom: 0.5em;
l-margin-ll margin-left: 4em;

For device-specific spacing, add either desktop or mobile to the class, like so:

Class Result
l-padding-mobile-tn No top padding on mobile view only
l-margin-desktop-hs Small top and bottom margin on desktop view only

Typography

Class CSS
All Devices Desktop only Mobile only
fine-print n/a n/a font-size: 0.8em;
text-accent text-accent--desktop n/a font-size: 1.2em;
text-left text-left--desktop text-left--mobile text-align: left;
text-center text-center--desktop text-center--mobile text-align: center;
text-right text-right--desktop text-right--mobile text-align: right;
text-capitalize n/a n/a text-transform: capitalize;
text-upper n/a n/a text-transform: uppercase;
no-wrap n/a n/a white-space: nowrap;

Lists

Classes apply to <ul> and <ol>.

Class CSS
All Devices Desktop only Mobile only
two-columns two-columns--desktop two-columns--mobile column-count:2
two-columns two-columns--desktop two-columns--mobile column-count:3
four-columns four-columns--desktop n/a column-count:4

Examples:

Class Result
<ul class="two-columns"> Unordered list will automatically split into 2 columns on all views
<ol class="two-columns--desktop"> Ordered list will automatically split into two columns on desktop view only
<ul class="three-columns--desktop two-columns--mobile"> Unordered list will automatically split into three columns on desktop view and two columns on mobile view

Display & Visibility

Class Result
visuallyhidden Hide element visually, but have it available for screen readers
hidden Hide element visually and from screen readers
hide-on-mobile Hide element visually and from screen readers on mobile view only
hide-on-desktop Hide element visually and from screen readers on desktop view only

Alignment

These alignment classes take effect beginning from tablet viewport width.

Class CSS
All Devices Desktop only Mobile only
align-left n/a n/a margin-right: 1.5em
margin-bottom: 1.5em
display: inline
float: left
aligncenter n/a n/a clear: both
display: block
margin: 0 auto
alignright n/a n/a margin-left: 1.5em
margin-bottom: 1.5em
display: inline
float: right
pull-left pull-left--desktop pull-left--mobile float: left
pull-center pull-center--desktop pull-center--mobile margin: 0 auto
display: block
pull-right pull-right--desktop pull-right--mobile float: right

Width

Width percentages could be applied to elements using the following classes. The number in the class represents the percentage.

Class CSS
All Devices Desktop only Mobile only
width-25 n/a n/a width: 25%
width-33 n/a n/a width: 33%
width-50 n/a width-50--mobile width: 50%
width-66 n/a n/a width: 66%
width-75 n/a n/a width: 75%
width-100 n/a width-100--mobile width: 100%

Class Usage Example

Usage Result
class="width-33" 33% width on all views
class="width-50--mobile" default width on desktop view, 50% width on mobile view
class="width-66 width-100--mobile" 66% width on desktop view, 100% width on mobile view

Background Colors

Most colors with a name in our Color Palette (e.g. cerulean, robin, etc) can be applied as a background color to an element with class [color name]-bg. Note that not all named colors are available as a background color helper class.

Examples:

Color variables are set in _color-classes.scss.