Spacing
Use spacing utilities to control elments' margins and paddings responsively.
Introduction
All spacing utilities are extend with the
screen width breakpoint postfixes.
Margin utility classes are named using the format:
.m{direction}-{value}-{postfix},
and padding utility classes are named using the format:
.p{direction}-{value}-{postfix}.
It means all directions if the {direction} part is not included.
We use shorthand class names and meaningful value words for these utilities, all abbreviations and value words are listed in the below tables.
Direction Abbreviations
| Abbreviation | Direction |
|---|---|
| t | top |
| r | right |
| b | bottom |
| l | left |
| x | left and right |
| y | top and bottom |
Value Words
| Word | Value |
|---|---|
| tiny | $spacing-tiny-rem |
| small | $spacing-small-rem |
| medium | $spacing-medium-rem |
| large | $spacing-large-rem |
| none | 0 |
| auto(only for margins) | auto |
Examples
In the below example, we control the elements’ margins and paddings responsively according to screen widths.
<div class="p-small px-medium-m py-large-l bc-primary">
<div class="bc-danger">
<div class="p-large mx-small my-medium-m m-large-l bc-dark"></div>
</div>
</div>
Sass Variables
$spacing-tiny-rem: baseline(0.5) !default
$spacing-small-rem: baseline(1) !default
$spacing-medium-rem: baseline(2) !default
$spacing-large-rem: baseline(4) !default