Skip to main content

Spacing

Component status:Ready
A set of global spacing values that can be applied via utility classes or as Sass Variables.

Values#

Sass VariableClass suffixValue
$sp-4 -sp-44px
$sp-8 -sp-88px
$sp-12 -sp-1212px
$sp-16 -sp-1616px
$sp-24 -sp-2424px
$sp-32 -sp-3232px
$sp-48 -sp-4848px
$sp-64 -sp-6464px
$sp-96 -sp-9696px

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 = margin
  • pad = padding
  • top, right, bottom, left = the top, right, bottom, left side of the element
  • tb = Top and bottom of the element
  • lr = Left and right of the element
  • sp-4, sp-8, sp-12, sp-16, sp-24, sp-32, sp-48, sp-64, sp-96 = various spacing values
  • none = Remove margin/padding from any of the previous combinations

Examples#

bux-mar-top-sp-16 would add 16px of margin to the top of the element it was applied to.

bux-pad-tb-sp-24 would add 24px padding to the top and bottom of the element it was applied to.

bux-mar-all-none would remove all margin from the element it was applied to.