Spacing
Spacing brings rhythm and fluidity to the interface. Our spacing tokens are based on Google Material scale with 16px as unit. Spacing can be used via padding and margin in web components.
Grid spacing
These spacing elements are not supposed to be rigid rules, but can help to create a cohesive rhythm throughout the layout.
Grid unity spacing : 8px - 16px - 24px - 32px - 48px - 64px - 96px
$spacer = 1rem = 16px
(according to body default font value)
How it works
Assign responsive-friendly margin
or padding
values to an element or a subset of its sides with shorthand classes.
Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built
from a default Sass map ranging from .25rem
to 3rem
.
Notation
Spacing that apply to all breakpoints, from xs
to xl
, have no breakpoint abbreviation in them. This is because those
classes are applied from min-width: 0
and up, and thus are not bound by a media query. The remaining breakpoints,
however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size}
for xs
and {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, and xl
.
Where property is one of:
m
- for classes that setmargin
p
- for classes that setpadding
Where sides is one of:
t
- for classes that setmargin-top
orpadding-top
b
- for classes that setmargin-bottom
orpadding-bottom
l
- for classes that setmargin-left
orpadding-left
r
- for classes that setmargin-right
orpadding-right
x
- for classes that set both*-left
and*-right
y
- for classes that set both*-top
and*-bottom
- blank - for classes that set a
margin
orpadding
on all 4 sides of the element
Where size is one of:
0
- for classes that eliminate themargin
orpadding
by setting it to0
1
- (by default) for classes that set themargin
orpadding
to$spacer * .5
2
- (by default) for classes that set themargin
orpadding
to$spacer
3
- (by default) for classes that set themargin
orpadding
to$spacer * 1.5
4
- (by default) for classes that set themargin
orpadding
to$spacer * 2
5
- (by default) for classes that set themargin
orpadding
to$spacer * 3
6
- (by default) for classes that set themargin
orpadding
to$spacer * 4
7
- (by default) for classes that set themargin
orpadding
to$spacer * 6
auto
- for classes that set themargin
to auto
Examples
Here are some representative examples of these classes: