v1.0
Overview and Base Variables
These patterns are based on our style guide
Breakpoints
Mobile breakpoints
| Variable |
Value |
Pixels |
| $small-screen-max |
40em |
640px |
| $medium-screen-min |
$small-screen-max |
640px |
| $medium-screen-max |
64em |
1024px |
| $large-screen-min |
$medium-screen-max |
1024px |
Navigation breakpoints
| Variable |
Value |
Notes |
| $midrange-nav-max |
66.5em (~1060px) |
Point at which full nav + search no longer fits in one line |
| $mobile-nav-max |
31em (490px) |
Point at which full nav + collapsed right-side nav no longer fit in one line |
Spacing
Base Spacing
| Variable |
Value |
| $base-spacing-smallest |
6px |
| $base-spacing-small |
12px |
| $base-spacing-medium |
30px |
| $base-spacing-large |
50px |
| $base-spacing-xlarge |
70px |
Container Padding
| Variable |
Value |
| $section-padding |
70px |
| $section-padding–mobile |
50px |
| $header-padding |
70px |
| $container-edge-padding |
20px |