Styleguide

Background color

  • v.0.0.1

Les utilitaires de background permettent de modifier les fonds de couleurs des éléments.

Couleur : Light

Class Usage
.u-bkgClrLight
background-color: #fff

Couleur : Clr0

Class Usage
.u-bkgClr0Darker
background-color: #202122
.u-bkgClr0Dark
background-color: #282b2c
.u-bkgClr0
background-color: #616566
.u-bkgClr0Light
background-color: #949ea1
.u-bkgClr0Lighter
background-color: #bdc3c5
.u-bkgClr0Lightest
background-color: #e9eeee
.u-bkgClr0LightestAlternate
background-color: #f2f2f2

Couleur : Clr1

Class Usage
.u-bkgClr1Darker
background-color: #993225
.u-bkgClr1Dark
background-color: #d84633
.u-bkgClr1
background-color: #fb523c
.u-bkgClr1Light
background-color: #fda397
.u-bkgClr1Lighter
background-color: #fee0dc

Couleur : Clr2

Class Usage
.u-bkgClr2Darker
background-color: #9f7000
.u-bkgClr2Dark
background-color: #db9b00
.u-bkgClr2
background-color: #ffb400
.u-bkgClr2Light
background-color: #ffd571
.u-bkgClr2Lighter
background-color: #fff1cf

Couleur : Clr3

Class Usage
.u-bkgClr3Darker
background-color: #0c3549
.u-bkgClr3Dark
background-color: #114f6d
.u-bkgClr3
background-color: #186b96
.u-bkgClr3Light
background-color: #85afc4
.u-bkgClr3Lighter
background-color: #c8e5f3

Couleur : Clr4

Class Usage
.u-bkgClr4
background-color: #29b8ff

Layout

  • v.0.0.1

Les utilitaires de Layout sont des helpers permettant de facilement appliquer certaines modifications de layout à un élément. (clearFix, floats, fix de "contexte de formattage de bloc"...)

Class Usage
.u-cf Empêcher les flottants de dépasser de leur conteneur. Plus d'informations sur le fonctionnement dans cet article d'Alsacréations.
.u-floatLeft Ajoute un float: left à l'élément.
.u-floatRight Ajoute un float: right à l'élément.
.u-noBfc Supprime le contexte de formatage de block. Plus d'information dans cet article d'Alsacréations sur le contexte de formatage block en CSS.
.u-flexPushleft Décale un enfant direct d'un parent en display:flex vers la droite

Show / hide

  • v.0.0.1

Les utilitaires Show-Hide permettent cacher ou afficher les élements.

Class Usage
.u-visuallyHidden Cache visuelement les élements, sauf pour les lecteurs d'écrans

Espacement

  • v.0.0.1

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;

Texte

  • v.0.0.1

Les utilitaires de texte permettent de modifier les styles de texte des éléments.

Modification de style

Class Usage
.u-txtUpper Texte tout en capitales
.u-txtLower Texte tout en minuscules
.u-txtCenter Texte centré
.u-txtLeft Texte aligné à droite
.u-txtRight Texte aligné à gauche
.u-txtBreak Indique que les mots normalement incassables peuvent être rompus à des points arbitraires s'il n'y a pas des points de rupture par ailleurs acceptables dans la ligne.
.u-txtTruncate Tronque le texte avec ellipsis

Modification de taille

Class Usage
.u-txtXXL font-size: 40 px
.u-txtXL font-size: 30 px
.u-txtL font-size: 18 px
.u-txtM font-size: 15 px
.u-txtS font-size: 14 px
.u-txtXS font-size: 12 px
.u-txtXXS font-size: 10 px

Text Color

  • v.0.0.1

Les utilitaires de couleurs permettent de modifier les couleurs des éléments.

Couleur : Light

Class Usage
.u-txtClrLight
color: #fff

Couleur : Clr0

Class Usage
.u-txtClr0
color: #616566
.u-txtClr0Light
color: #949ea1
.u-txtClr0Lighter
color: #bdc3c5
.u-txtClr0Dark
color: #282b2c
.u-txtClr0Darker
color: #202122

Couleur : Clr1

Class Usage
.u-txtClr1Darker
color: #993225
.u-txtClr1Dark
color: #d84633
.u-txtClr1
color: #fb523c
.u-txtClr1Light
color: #fda397
.u-txtClr1Lighter
color: #fee0dc

Couleur : Clr2

Class Usage
.u-txtClr2Darker
color: #9f7000
.u-txtClr2Dark
color: #db9b00
.u-txtClr2
color: #ffb400
.u-txtClr2Light
color: #ffd571
.u-txtClr2Lighter
color: #fff1cf

Couleur : Clr3

Class Usage
.u-txtClr3Darker
color: #0c3549
.u-txtClr3Dark
color: #114f6d
.u-txtClr3
color: #186b96
.u-txtClr3Light
color: #85afc4
.u-txtClr3Lighter
color: #c8e5f3

Couleur : Clr4

Class Usage
.u-txtClr4
color: #29b8ff

Taille

  • v.0.0.1

Les utilitaires de taille permettent modifier la taille des élements.

Class Usage
.u-w20 width: 20%
.u-w25 width: 25%
.u-w33 width: 33.333%
.u-w40 width: 40%
.u-w50 width: 50%
.u-w60 width: 50%
.u-w66 width: 66.666%
.u-w75 width: 75%
.u-w80 width: 80%
.u-w100 width: 100%