Helper Classes

We have a number of helper classes that allow us to quickly style elements throughout the application without adding unnecessary bloat and complexity to our CSS. This also allows us to keep our CSS specificity low.

Spacing

For consistent spacing and to maintain a vertical rhythm, we use a level system for both margin and padding. Padding can be applied by using the classes padding--lv1 through padding--lv8, while margin uses the margin--lv1 through margin--lv8 scale. Use !padding--lv0 or !margin--lv0 to completely remove any margin or padding from the element.

Level 1: 6px

Level 2: 12px

Level 3: 18px

Level 4: 24px

Level 5: 30px

Level 6: 36px

Level 7: 42px

Level 8: 48px

To fine tune the padding and margin for an element, supplement the padding level with the following classes:

  • !padding-top--lv0 or !margin-top--lv0 for no space on top
  • !padding-bottom--lv0 or !margin-bottom--lv0 for no space on bottom
  • !padding-top-bottom--lv0 or !margin-top-bottom--lv0 for no space on top or bottom
  • !padding-left--lv0 or !margin-left--lv0 for no space on left
  • !padding-right--lv0 or !margin-right--lv0 for no space on right
  • !padding-left-right--lv0 or !margin-left-right--lv0 for no space on left or right
  • Below margin helpers:
  • !margin-bottom--lv1 for a margin bottom of 6px
  • !margin-bottom--lv2 for a margin bottom of 12px
  • !margin-bottom--lv3 for a margin bottom of 18px
  • !margin-bottom--lv4 for a margin bottom of 24px
  • !margin-bottom--lv5 for a margin bottom of 30px
  • !margin-bottom--lv6 for a margin bottom of 36px
  • !margin-bottom--lv7 for a margin bottom of 42px
  • !margin-bottom--lv8 for a margin bottom of 48px

Typography

Class Description
alignl Align text to the left
alignr Align text to the right
alignc Align text to the center
full-width By default, paragraphs have a max-width of 635px. To override, apply full-width to the <p> tag.
lowercase Transform all of the text to lowercase
uppercase Transform all of the text to uppercase
capitalize Capitalize all of the text
strike Strike through the text

Additional classes related to white space and word wrapping are available such as: nowrap, wspreline, wsnormal, wordwrap, breakall.

Display and visibility

Class name CSS
invisible visibility: hidden;
hide display: none !important;
inline display: inline;
inline-i display: inline !important;
block-i display:block !important;
block display:block !important;
inline-block-i display:inline-block !important;
inline-block display:inline-block;
overflow-hidden overflow: hidden
overflow-auto overflow: auto;
overflow-visible overflow: visible !important;
overflow-ellipsis white-space:nowrap; overflow: hidden; text-overflow: ellipsis;

Responsive Utilities

Class Phone Tablet Desktop
show-phone Visible Hidden Hidden
show-mobile Visible Visible Hidden
hide-phone Hidden Visible Visible
hide-mobile Hidden Hidden Visible
hide-desktop Visible Visible Hidden

Additional responsive classes

Class Description
left-on-small Align text to the left when at the phone size
nofloat-small float: none; when at the phone size
full-width-mobile width: 100%; when at the tablet size
full-width-phone width: 100%; when at the phone size
padding--lv0@xltablet padding: 0; when at the large tablet size
margin--lv0@xltablet margin: 0; when at the large tablet size