Spacing

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 = 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

References

• BUX Design Principle: Webpage Layout