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.