We have a bunch of classes for adding margins to elements. The classes go up in half rem increments.
Syntax is .m1 (margin: 1rem) .mt1 (margin-top: 1rem) .mb1 (margin-bottom: 1rem), .ml1 (margin-left: 1rem), .mt1 (margin-right: 1rem)
Increments go from 0 to 9rem
There are also size specific margins with the syntax: {size}-mb1
Added some specific margins: 0.6rem, 0.7rem, 0.75rem, 0.8rem, 0.9rem, 1.5rem
.full-mb2.large-mb3.small-mb4
We have a bunch of classes for adding paddings to elements. The classes go up in half rem increments.
Syntax is .p1 (padding: 1rem) .pt1 (padding-top: 1rem) .pb1 (padding-bottom: 1rem), .pl1 (padding-left: 1rem), .pt1 (padding-right: 1rem)
Increments go from 0 to 9rem
There are also size specific paddings with the syntax: {size}-pb1
Added some specific paddings: 0.6rem, 0.7rem, 0.75rem, 0.8rem, 0.9rem, 1.5rem
.small-p3.large-p2.full-p1
Just like the grid, there are helper classes for hiding and showing items on various screen sizes.
Syntax is .hide-on-{size} and .show-on-{size}. If you hide something on a smaller size, you will need the show-on for the next size for it to show up.
Note that .show-on-{size} does a display: block; however if you put a .flex or .inline-block class onyour element, it will do display:flex or display:inline-block respectively.
There is also just a generic .hide class that adds display:none
No differentiation between mobile and non-mobile as they should never show at the same time and can therefore exist on the same layer.
| Z-Index | |
|---|---|
| Page Base | 0 |
| Share Sticky | 199 |
| Subscribe Sticky | 399 |
| Page Specific Navigation | 599 |
| Main Navigation | 790 |
| Main Navigation Overlays (dropdowns, subnavs) | 791-799 |
| Overlay | 998 |
| Overlay Content | 999 |
These also have the {size}- variants
.circle { border-radius: 50%; }
.hide { display: none; }
.flex { display: flex; }
.inline-block { display: inline-block; }
.cursor-pointer { cursor: pointer; }
.width100 { width: 100% }