Styleguide

Espacement

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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;