Styleguide
Retour sommaire

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

ClassUsage
.u-maSmargin: 10 px;
.u-maMmargin: 20 px;
.u-maLmargin: 40 px;
.u-maNmargin: 0;
.u-mtSmargin-top: 10 px;
.u-mtMmargin-top: 20 px;
.u-mtLmargin-top: 40 px;
.u-mtNmargin-top: 0;
.u-mrSmargin-right: 10 px;
.u-mrMmargin-right: 20 px;
.u-mrLmargin-right: 40 px;
.u-mrNmargin-right: 0;
.u-mbSmargin-bottom: 10 px;
.u-mbMmargin-bottom: 20 px;
.u-mbLmargin-bottom: 40 px;
.u-mbNmargin-bottom: 0;
.u-mlSmargin-left: 10 px;
.u-mlMmargin-left: 20 px;
.u-mlLmargin-left: 40 px;
.u-mlNmargin-left: 0;

Padding

ClassUsage
.u-paSpadding: 10 px;
.u-paMpadding: 20 px;
.u-paLpadding: 40 px;
.u-paNpadding: 0;
.u-ptSpadding-top: 10 px;
.u-ptMpadding-top: 20 px;
.u-ptLpadding-top: 40 px;
.u-ptNpadding-top: 0;
.u-prSpadding-right: 10 px;
.u-prMpadding-right: 20 px;
.u-prLpadding-right: 40 px;
.u-prNpadding-right: 0;
.u-pbSpadding-bottom: 10 px;
.u-pbMpadding-bottom: 20 px;
.u-pbLpadding-bottom: 40 px;
.u-pbNpadding-bottom: 0;
.u-plSpadding-left: 10 px;
.u-plMpadding-left: 20 px;
.u-plLpadding-left: 40 px;
.u-plNpadding-left: 0;