Espacement
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; |