Spacing
Documentation
Les utilitaires d'espacement permettent facilement d'appliquer des margin / padding sur un élément. A utiliser pour assembler différents composants sans avoir à définir une nouvelle classe de wrapper.
Définition
- p, m = padding, margin
- a, t, r, b, l = all, top, right, bottom, left
- s, m, l, n = Small (10 px), Medium (20 px), Large (40 px) , None (0)
Margin
| Class | Usage |
|---|---|
.u-mas | margin: 10 px; |
.u-mam | margin: 20 px; |
.u-mal | margin: 40 px; |
.u-man | margin: 0; |
.u-mts | margin-top: 10 px; |
.u-mtm | margin-top: 20 px; |
.u-mtl | margin-top: 40 px; |
.u-mtn | margin-top: 0; |
.u-mrs | margin-right: 10 px; |
.u-mrm | margin-right: 20 px; |
.u-mrl | margin-right: 40 px; |
.u-mrn | margin-right: 0; |
.u-mbs | margin-bottom: 10 px; |
.u-mbm | margin-bottom: 20 px; |
.u-mbl | margin-bottom: 40 px; |
.u-mbn | margin-bottom: 0; |
.u-mls | margin-left: 10 px; |
.u-mlm | margin-left: 20 px; |
.u-mll | margin-left: 40 px; |
.u-mln | margin-left: 0; |
Padding
| Class | Usage |
|---|---|
.u-pas | padding: 10 px; |
.u-pam | padding: 20 px; |
.u-pal | padding: 40 px; |
.u-pan | padding: 0; |
.u-pts | padding-top: 10 px; |
.u-ptm | padding-top: 20 px; |
.u-ptl | padding-top: 40 px; |
.u-ptn | padding-top: 0; |
.u-prs | padding-right: 10 px; |
.u-prm | padding-right: 20 px; |
.u-prl | padding-right: 40 px; |
.u-prn | padding-right: 0; |
.u-pbs | padding-bottom: 10 px; |
.u-pbm | padding-bottom: 20 px; |
.u-pbl | padding-bottom: 40 px; |
.u-pbn | padding-bottom: 0; |
.u-pls | padding-left: 10 px; |
.u-plm | padding-left: 20 px; |
.u-pll | padding-left: 40 px; |
.u-pln | padding-left: 0; |