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.
The ! prefix is a way to indicate !important on the style.
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--lv0ormargin-top--lv0for no space on toppadding-bottom--lv0ormargin-bottom--lv0for no space on bottompadding-top-bottom--lv0ormargin-top-bottom--lv0for no space on top or bottompadding-left--lv0ormargin-left--lv0for no space on leftpadding-right--lv0ormargin-right--lv0for no space on rightpadding-left-right--lv0ormargin-left-right--lv0for no space on left or right
- Below margin helpers:
-
margin-bottom--lv0for a margin bottom of 0px -
margin-bottom--lv1for a margin bottom of 6px -
margin-bottom--lv2for a margin bottom of 12px -
margin-bottom--lv3for a margin bottom of 18px -
margin-bottom--lv4for a margin bottom of 24px -
margin-bottom--lv5for a margin bottom of 30px -
margin-bottom--lv6for a margin bottom of 36px -
margin-bottom--lv7for a margin bottom of 42px -
margin-bottom--lv8for a margin bottom of 48px
Typography
| Class | Description |
|---|---|
font-style--italic | Bring emphasis through italics |
font-style--normal | Override established font style |
font-weight--light | Apply font-weight of 300 |
font-weight--bold | Apply font-weight of 500 |
text-align--left | Align text to the left |
text-align--right | Align text to the right |
text-align--center | Align text to the center |
text-transform--lowercase | Transform all of the text to lowercase |
text-transform--uppercase | Transform all of the text to uppercase |
text-transform--capitalize | Capitalize the first letter of each word |
text-transform--none | Override another text transform to show default |
text-decoration--line-through | Strike through the text |
full-width | By default, paragraphs have a max-width of 635px. To override, apply full-width to the <p> tag. |
Additional classes related to white space and word wrapping are available such as: white-space--normal, white-space--nowrap, white-space--preline, word-wrap--break-all, and word-wrap--break-word.
Display and visibility
| Class name | CSS |
|---|---|
display--none | display: none !important; |
display--inline | display: inline; |
display--inline-block | display: inline-block; |
display--block | display: block; |
display--flex | display: flex; |
display--table | display: table; |
display--table-cell | display: table-cell; |
overflow--hidden | overflow: hidden |
overflow--auto | overflow: auto; |
overflow--visible | overflow: visible !important; |
overflow-ellipsis | white-space:nowrap; overflow: hidden; text-overflow: ellipsis; |
zin-0 | z-index: inherit; |
zin-lv1 | z-index: 1; |
zin-lv2 | z-index: 10; |
zin-lv3 | z-index: 100; |
zin-lv4 | z-index: 1000; |
zin-lv5 | z-index: 10000; |
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 |
|---|---|
text-align--left@tablet | Align text to the left when at the tablet size. @phone variation is also available. |
width--100@tablet | width: 100%; when at the tablet size. @phone variation is also available. |
padding--lv0@xltablet | padding: 0; when at the large tablet size. @tablet and @phone variations are also available. |
margin--lv0@xltablet | margin: 0; when at the large tablet size. @tablet and @phone variations are also available. |