Les couleurs

jdb-color

Rouge .jdb-red	Rose .jdb-pink
Violet .jdb-purple	Violet foncé .jdb-deep-purple
Indigo .jdb-indigo	Bleu .jdb-blue
Bleu clair .jdb-light-blue	Cyan .jdb-cyan
Aqua .jdb-aqua	Sarcelle .jdb-teal
Vert .jdb-green	Vert clair .jdb-light-green
Citron .jdb-lime	Sable .jdb-sand
Kaki .jdb-khaki	Jaune .jdb-yellow
Ambre .jdb-amber	Orange .jdb-orange
Orange foncé .jdb-deep-orange	Bleu gris .jdb-blue-gray
Marron .jdb-brown	Gris clair .jdb-light-gray
Gris .jdb-gray	Gris foncé .jdb-dark-gray
Rouge pâle .jdb-pale-red	Jaune pâle .jdb-pale-yellow
Vert pâle .jdb-pale-green	Bleu pâle .jdb-pale-blue
Noir .jdb-black	Blanc .jdb-white

Couleurs d'arrière-plan

La classe jdb-color met une couleur d'arrière-plan à l'élément qui porte la classe, et définit automatiquement la couleur du texte selon la saturation de la couleur de l'arrière-plan. Ex. : Une arrière-plan sombre aura un texte claire et vice versa.

Il y a au total 25 couleurs d'arrière-plan prédéfinies sur JdB.CSS.

Il est inutile et déconseillé d'utiliser plusieurs classes pour un même élément. Une seule classe lui sera appliqué.

Coloration des éléments HTML

Les classes jdb-color et jdb-text-color peuvent être utilisées pour n'importe quel élément HTML.

Conteneurs/Panneaux

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui tempora ipsa placeat omnis, nam iste quaerat.

Boutons

Textes

Rouge Violet Bleu Vert Orange Sarcelle

Bordures

Rouge

Vert

Bleu

Noir

Gris

Jaune

Code :

<div class="jdb-panel jdb-border jdb-border-red">
  <p>Rouge</p>
</div>

Tableaux

Nom	Points
Jill Smith	120
Eve Jackson	94
Adam Johnson	67

Cartes

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda unde eos harum sint dignissimos omnis delectus culpa corporis minima eius! Culpa maiores incidunt aliquid ipsam obcaecati repudiandae dolor tempora quia!

Couleurs d'arrière-plan

Les classes jdb-color définissent la couleur d'arrière-plan pour n'importe quel élément HTML.

Elles définissent automatiquement la couleur de texte par rapport au contraste de l'arrière-plan : un arrière-plan sombre aura un texte blanc et un arrière-plan clair aura un texte noir pour une meilleur lisibilité.

Magnifique titre

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, odio totam necessitatibus iste dolor aut, et atque, eos labore numquam quo adipisci repellat sit quos voluptatem reprehenderit ex architecto laboriosam!

Magnifique titre

Code :

<!-- Conteneur avec arrière-plan rouge pâle -->
<div class="jdb-container jdb-pale-red">
  <h3>Magnifique titre</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, odio totam necessitatibus iste dolor aut,
  et atque, eos labore numquam quo adipisci repellat sit quos voluptatem reprehenderit ex architecto laboriosam!</p>
</div>

<!-- Conteneur avec arrière-plan violet -->
<div class="jdb-container jdb-deep-purple">
  <h3>Magnifique titre</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, odio totam necessitatibus iste dolor aut,
  et atque, eos labore numquam quo adipisci repellat sit quos voluptatem reprehenderit ex architecto laboriosam!</p>
</div>

Les couleurs gray et grey sont interchangeables dans toutes les classes JdB.CSS (jdb-gray = jdb-grey). ...gray est celui choisi pour les exemples de code.

Couleurs de texte

Les classes jdb-text-color définissent la couleur du texte pour n'importe quel élément HTML à l'exception de img, video et canvas.

Il est inutile et déconseillé d'utiliser plusieurs classes pour un même élément. Une seule classe lui sera appliqué.

Magnifique titre

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Code :

<div class="jdb-text-pink">
  <h3>Magnifique titre</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div>

Sur du blanc

jdb-text-red

jdb-text-pink

jdb-text-purple

jdb-text-deep-purple

jdb-text-indigo

jdb-text-blue

jdb-text-light-blue

jdb-text-cyan

jdb-text-aqua

jdb-text-teal

jdb-text-green

jdb-text-light-green

jdb-text-lime

jdb-text-sand

jdb-text-khaki

jdb-text-yellow

jdb-text-amber

jdb-text-orange

jdb-text-deep-orange

jdb-text-brown

jdb-text-blue-gray

jdb-text-blue-grey

jdb-text-light-gray

jdb-text-light-grey

jdb-text-gray

jdb-text-grey

jdb-text-dark-gray

jdb-text-dark-grey

jdb-text-black

jdb-text-white

Sur du gris

jdb-text-red

jdb-text-pink

jdb-text-purple

jdb-text-deep-purple

jdb-text-indigo

jdb-text-blue

jdb-text-light-blue

jdb-text-cyan

jdb-text-aqua

jdb-text-teal

jdb-text-green

jdb-text-light-green

jdb-text-lime

jdb-text-sand

jdb-text-khaki

jdb-text-yellow

jdb-text-amber

jdb-text-orange

jdb-text-deep-orange

jdb-text-brown

jdb-text-blue-gray

jdb-text-blue-grey

jdb-text-light-gray

jdb-text-light-grey

jdb-text-gray

jdb-text-grey

jdb-text-dark-gray

jdb-text-dark-grey

jdb-text-black

jdb-text-white

Sur du noir

jdb-text-red

jdb-text-pink

jdb-text-purple

jdb-text-deep-purple

jdb-text-indigo

jdb-text-blue

jdb-text-light-blue

jdb-text-cyan

jdb-text-aqua

jdb-text-teal

jdb-text-green

jdb-text-light-green

jdb-text-lime

jdb-text-sand

jdb-text-khaki

jdb-text-yellow

jdb-text-amber

jdb-text-orange

jdb-text-deep-orange

jdb-text-brown

jdb-text-blue-gray

jdb-text-blue-grey

jdb-text-light-gray

jdb-text-light-grey

jdb-text-gray

jdb-text-grey

jdb-text-dark-gray

jdb-text-dark-grey

jdb-text-black

jdb-text-white

Couleurs au survole du curseur

Les classes jdb-hover-color définissent la couleur d'arrière-plan pour n'importe quel élément HTML lorsque le curseur survole cet élément.

Survolez-moi...

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Code :

<!-- Conteneur gris qui devient noir au survole du curseur -->
<div class="jdb-container jdb-dark-gray jdb-hover-black">
  <h3>Survolez-moi...</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div>

Les classes jdb-hover-text-color définissent la couleur du texte pour n'importe quel élément HTML lorsque le curseur survole cet élément.

Survolez-moi...

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Code :

<!-- Conteneur avec un text noir qui devient violet au survole du curseur -->
<div class="jdb-container jdb-sand jdb-hover-text-purple">
  <h3>Survolez-moi...</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div>