CSS - Color & border

Les couleurs

Les classes couleurs ont pour but d'uniformiser le rendu visuel en définissant des couleurs de base pour les fond, les textes et les bordures.

Les actions les utilisent directement ou à travers des variables SCSS.

Vous pouvez surcharger les valeurs par défaut des variables du fichier assets/scss/_variables.scss dans le fichier assets/_variables.scss.

Exemple d'utilisation

un texte vert sur fond bleu et  rouge sur fond jaune entouré de orange 

<span class="bg-bleuClair t-vertClair">
  un tete vert sur fond bleu et 
  <span class="bg-jaune bg-hover-rouge t-rouge t-hover-jaune bd-orange b2">
   rouge sur fond jaune entouré de orange
  </span>
</span>

Syntaxe

[bg|t|b|bd]-[hover-]<couleur>

Nom des couleurs

Les noms existent en français et en anglais. Vous trouverez la correspondance de nom ci-dessous

Les couleurs de fond

bg-noir
bg-black
bg-grisFonce
bg-darkGrey
bg-gris
bg-grey
bg-grisClair
bg-lightGrey
bg-grisPale
bg-paleGrey
bg-blanc
bg-white
bg-bleuFonce
bg-darkBlue
bg-bleu
bg-blue
bg-bleuClair
bg-lightBlue
bg-bleuPale
bg-paleBlue
bg-vertFonce
bg-darkGreen
bg-vert
bg-green
bg-vertClair
bg-lightGreen
bg-brun
bg-brown
bg-beige
bg-tan
bg-rougeFonce
bg-darkRed
bg-rouge
bg-red
bg-rougeClair
bg-lightRed
bg-jauneFonce
bg-darkYellow
bg-jaune
bg-yellow
bg-jauneClair
bg-lightYellow
bg-orange
bg-orange
bg-rose
bg-pink
bg-violet
bg-purple
bg-transparent
bg-30
bg-50
bg-80

Les couleurs de fond lors survol

bg-hover-noir
bg-hover-grisFonce
bg-hover-gris
bg-hover-grisClair
bg-hover-grisPale
bg-hover-blanc
bg-hover-bleuFonce
bg-hover-bleu
bg-hover-bleuClair
bg-hover-bleuPale
bg-hover-vertFonce
bg-hover-vert
bg-hover-vertClair
bg-hover-brun
bg-hover-beige
bg-hover-rougeFonce
bg-hover-rouge
bg-hover-rougeClair
bg-hover-jauneFonce
bg-hover-jaune
bg-hover-jauneClair
bg-hover-orange
bg-hover-rose
bg-hover-violet
bg-hover-transparent
bg-30
bg-50
bg-80

Couleur de texte et bordures

CSS spécifique à la démonstration: border:5px dotted transparent; background-color:tan;

t-noir
bd-hover-noir
t-grisFonce
bd-hover-grisFonce
t-gris
bd-hover-gris
t-grisClair
bd-hover-grisClair
t-grisPale
bd-hover-grisPale
t-blanc
bd-hover-blanc
t-bleuFonce
bd-hover-bleuFonce
t-bleu
bd-hover-bleu
t-bleuClair
bd-hover-bleuClair
t-bleuPale
bd-hover-bleuPale
t-vertFonce
bd-hover-vertFonce
t-vert
bd-hover-vert
t-vertClair
bd-hover-vertClair
t-brun
bd-hover-brun
t-beige
bd-hover-beige
t-rougeFonce
bd-hover-rougeFonce
t-rouge
bd-hover-rouge
t-rougeClair
bd-hover-rougeClair
t-jauneFonce
bd-hover-jauneFonce
t-jaune
bd-hover-jaune
t-jauneClair
bd-hover-jauneClair
t-orange
bd-hover-orange
t-rose
bd-hover-rose
t-violet
bd-hover-violet
t-hover-transparent
bd-hover-transparent

Les ombrages

bg-bleuClair
ombre
bg-bleuClair
ombreMax
bg-bleuClair
ombre-hover
bg-bleuClair
ombreMax-hover

Les bordures

La syntaxe abrégée pour les bordures est bd-rouge qui ajoute une bordure des 4 côtés de 1pixel de couleur rouge

Pour une bordure plus large à gauche, il faut ajouter bd-rouge bdl3

Pour juste la bordure inférieure en pointillé, le plus simple est ceci bd-rouge bd0 bdb2 bd-dotted on annule (bd0) et on spécifie (bdb2).

Pour avoir ceci, il faut mettre les classes bd-rouge bd0 bdl3 bdb2

Le système est un peu long, mais permet un code CSS pas trop lourd

Pour des angles arrondis bd-rouge bd-arrondi ou bd-rond.

Détails