Spacing
Component status:Ready
A set of global spacing values that can be applied via utility classes or as Sass Variables.
Values#
| Sass Variable | Class suffix | Value |
|---|---|---|
| $sp-4 | -sp-4 | 4px |
| $sp-8 | -sp-8 | 8px |
| $sp-12 | -sp-12 | 12px |
| $sp-16 | -sp-16 | 16px |
| $sp-24 | -sp-24 | 24px |
| $sp-32 | -sp-32 | 32px |
| $sp-48 | -sp-48 | 48px |
| $sp-64 | -sp-64 | 64px |
| $sp-96 | -sp-96 | 96px |
Utility class implementation#
Margins and padding can be applied using a set of CSS utility classes to add or remove margin and padding from any block-level element.
The CSS classes for the spacing system use the following conventions:
mar= marginpad= paddingtop,right,bottom,left= the top, right, bottom, left side of the elementtb= Top and bottom of the elementlr= Left and right of the elementsp-4,sp-8,sp-12,sp-16,sp-24,sp-32,sp-48,sp-64,sp-96= various spacing valuesnone= Remove margin/padding from any of the previous combinations
Examples#
bux-mar-top-sp-16would add 16px of margin to the top of the element it was applied tobux-pad-tb-sp-24would add 24px padding to the top and bottom of the element it was applied tobux-mar-all-nonewould remove all margin from the element it was applied to