Helpers

Available for use is a large set of helper classes that may be used on elements freely. These aid immensely to a site build for quick development and lessen the need for extensive and overly-specific CSS selectors. The majority of these classes live within helpers.scss.

Spacing

These classes are held in spacing.scss as there is a long list. Classes are available for each side combination of an element (top, bottom, left, right) and vary in margin/padding from extra small (.5em) to extra large (6em). Spacing classes follow this formula:

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

Direction


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

Size


  • n = none
  • s = small
  • d = default
  • m = medium
  • l = large
  • x = xlarge

Examples:

Class Value
.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:

.l-padding-mobile-tn No top padding on mobile screens only (tablet viewport and below)
.l-margin-desktop-hs Small top and bottom margin on desktop screens only (beginning at tablet viewport width)

Typography

Class Value
.fine-print font-size: 12px;
.text-accent font-size: 22px;
.text-left text-align: left;
.text-center text-align: center;
.text-right text-align: right;
.text-capitalize text-transform: capitalize;
.text-upper text-transform: uppercase;

Display & Visibility

Class Value
.visuallyhidden Hide only visually, but have it available for screen readers
.hidden Hide visually and from screen readers
.hide-on-mobile display:none; until tablet viewport width
.hide-on-desktop display:none; from tablet viewport width

Alignment

These alignment classes take effect beginning from tablet viewport width.

.alignleft margin-right: 1.5em; margin-bottom: 1.5em; display:inline; float:left
.aligncenter clear: both; display: block; margin: 0 auto
.alignright 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.

Desktop and Mobile Desktop only Mobile only
width-25 n/a n/a
width-33 n/a n/a
width-50 n/a width-50--mobile
width-66 n/a n/a
width-75 n/a n/a
width-100 n/a width-100--mobile

Class Usage Example

class="width-33" 33% width in desktop and mobile
class="width-50--mobile" default width in desktop, 50% width in mobile
class="width-66 width-100--mobile" 66% width in desktop, 100% width in mobile

Design Elements

These classes refer to color variations that can be applied to elements.

Class Value
.background--dark background-color: $spruce;
.background--off-white background-color: $off-white;
.background--cerulean background-color: $cerulean;
.background--science background-color: $science;

Note that color variables are set in settings.scss.

There are mixins for gradient backgrounds that can be extended onto an element.

Mixin Value
%black-gradient Fades vertically from transparent to black (opacity .75).
%white-gradient Fades vertically from white (opacity .9) to full opacity white.
%gray-gradient Fades vertically from white to light gray.