Spacing
Spacing is the standard padding and margin size that one can adjust to customize the layout of an interface.
The spacing mechanism
Spacing can be applied to any element by setting one or more of the spacing classes.
Considering N is a level (see the available spacing levels in the section bellow), here are the 7 different targets supported by our spacing mechanism.
- pN: uniform (all sides)
- pyN: vertical (top and bottom sides)
- pxN: horizontal (left and right sides)
- ptN: top side
- prN: right side
- pbN: bottom side
- plN: left side
The spacing levels
With each level, the size of the spacing increases proportionally.
Only padding is showcased in the section below for the sake of simplicity, but the exact same classes exist for the margin as well. Just replace the p by a m to apply a spacing to the margin.
Level 1
.p1
.py1
.px1
.pt1
.pr1
.pb1
.pl1
Level 2
.p2
.py2
.px2
.pt2
.pr2
.pb2
.pl2
Level 3
.p3
.py3
.px3
.pt3
.pr3
.pb3
.pl3
Level 4
.p4
.py4
.px4
.pt4
.pr4
.pb4
.pl4
Level 5
.p5
.py5
.px5
.pt5
.pr5
.pb5
.pl5
No guidelines exist for Spacing yet.