Spacing function
For layout purpose use thefunction.grid(size)
(size)
values can be found below:
0 | 0 |
---|---|
1 | 8px |
2 | 16px |
3 | 24px |
4 | 32px |
5 | 40px |
6 | 48px |
7 | 56px |
8 | 64px |
9 | 72px |
10 | 80px |
Example:
.component { margin: grid(2) grid(3); }
this will return:
.component { margin: 16px 24px; }
Spacing utility classes
For layout purpose feel free to use spacing classesm-(size)p-(size)m(side)-(size)p(side)-(size)
Before using the spacing utility classes please include the apropiate mixin in your app:
@include margin;
@include padding;
The (side) values are:
t | top |
---|---|
r | right |
b | bottom |
l | left |
x | x-axis |
y | y-axis |
Examples:
<div className="m-3 p-2">
<div className="mt-1 pb-3">
Tip: Don't mix spacing classes with the component classes. We suggest using them outside the component.
Example:
<div className="m-3 p-2"> <div className="component-class"> component </div> </div>
Combined spacing classes
To shorten html code combined classes can be used:
mx-(size)
my-(size)
px-(size)
py-(size)
Example:
<div className="mx-3 py-2"> ... </div>
this will return a div
with these styles:
.div { margin-left: 24px; margin-right: 24px; padding-top: 16px; padding-bottom: 16px; }