Les dispositions

jdb-cell-row

Descriptions de classes

Les classes `jdb-cell(-position)`

La classe jdb-cell apporte une disposition en colonnes à vos éléments quelqu'ils soient, tableaux ou divs.

.jdb-cell dans un tableau :

Base

.jdb-cell-top

.jdb-cell-middle

.jdb-cell-bottom

.jdb-cell avec des simples div :

01. Lundi

02. Mardi

03. Mercredi

04. Jeudi

Haut

Milieu

Bas

Éléments de bloc HTML

De base, les éléments de bloc HTML (comme les éléments div) s'affichent sous forme de blocs verticaux :

Lorem ipsum, dolor sit amet.

Code :

<div class="jdb-container jdb-pale-yellow">
  <p>Lorem ipsum, dolor sit amet.</p>
</div>

<div class="jdb-container jdb-sand">
  <p>Lorem ipsum, dolor sit amet.</p>
</div>

Disposition en cellule

La classe jdb-cell redéfinit les éléments de bloc à afficher horizontalement (comme les cellules de tableau) :

Lorem ipsum, dolor sit amet.

Code :

<div class="jdb-cell jdb-container jdb-pale-yellow">
  <p>Lorem ipsum, dolor sit amet.</p>
</div>

<div class="jdb-cell jdb-container jdb-sand">
  <p>Lorem ipsum, dolor sit amet.</p>
</div>

Disposition en conteneur

La ligne jdb-cell est un conteneur pour les cellules (colonnes).
La largeur du conteneur jdb-cell-row définit la largeur totale de toutes les cellules contenues.
La largeur par défaut est 100% :

Lorem ipsum, dolor sit amet.

Code :

<div class="jdb-cell-row">
  <div class="jdb-cell jdb-container jdb-pale-yellow">
    <p>Lorem ipsum, dolor sit amet.</p>
  </div>

  <div class="jdb-cell jdb-container jdb-sand">
    <p>Lorem ipsum, dolor sit amet.</p>
  </div>
</div>

Si vous modifiez la largeur du conteneur de cellules, cela réduira la largeur totale des cellules contenues :

Lorem ipsum, dolor sit amet.

Code :

<div class="jdb-cell-row" style="width:70%">
  <div class="jdb-cell jdb-container jdb-pale-yellow">
    <p>Lorem ipsum, dolor sit amet.</p>
  </div>

  <div class="jdb-cell jdb-container jdb-sand">
    <p>Lorem ipsum, dolor sit amet.</p>
  </div>
</div>

Les cellules s'auto-ajustent

La classe jdb-cell a une très belle norme de réglage automatique intégrée. Les éléments côte à côte s'ajustent automatiquement à la largeur nécessaire :

Lorem ipsum, dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Code :

<div class="jdb-cell jdb-container jdb-pale-yellow">
  <p>Lorem ipsum, dolor sit amet.</p>
</div>

<div class="jdb-cell jdb-container jdb-sand">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</div>

Les cellules s'ajustent à la même hauteur

Les éléments jdb-cell côte à côte s'ajusteront également automatiquement à la même hauteur :

Lorem ipsum, dolor sit amet.

Code :

<div class="jdb-cell jdb-container jdb-pale-yellow">
  <p>Lorem ipsum, dolor sit amet.</p>
  <p>Lorem ipsum, dolor sit amet.</p>
  <p>Lorem ipsum, dolor sit amet.</p>
</div>

<div class="jdb-cell jdb-container jdb-sand">
  <p>Lorem ipsum, dolor sit amet.</p>
</div>

Responsive

La classe jdb-mobile ajoute la première réactivité mobile à tout élément HTML.

Utilisé avec jdb-cell, elle affichera les colonnes de disposition verticalement sur les petits écrans ou téléphones mobiles et horizontalement sur les écrans moyens et grands.

Sur les écrans moyens et large :

Lorem ipsum, dolor sit amet.

Sur les petits écrans :

Lorem ipsum, dolor sit amet.

Code :

<div class="jdb-cell jdb-mobile jdb-container jdb-pale-yellow">
  <p>Lorem ipsum, dolor sit amet.</p>
</div>

<div class="jdb-cell jdb-mobile jdb-container jdb-sand">
  <p>Lorem ipsum dolor, sit.</p>
</div>

Alignement facile

La classe jdb-cell facilite l'alignement vertical du texte.

Il y a 3 classes d'alignement différentes :

jdb-cell-top (defaut)
jdb-cell-middle
jdb-cell-bottom

01. Janvier

03. Mars

05. Mai

07. Juillet

Aligné au milieu

Aligné en bas

Code :

<div class="jdb-cell jdb-container jdb-black">
  <p>01. Janvier</p>
  <p>03. Mars</p>
  <p>05. Mai</p>
  <p>07. Juillet</p>
</div>

<div class="jdb-cell jdb-cell-middle jdb-container jdb-gray">
  <p>Aligné au milieu</p>
</div>

<div class="jdb-cell jdb-cell-bottom jdb-container jdb-light-gray">
  <p>Aligné en bas</p>
</div>

La classe jdb-cell-row étire les éléments pour s'adapter à la largeur de la page:

01. Janvier

03. Mars

05. Mai

07. Juillet

Aligné au milieu

Aligné en bas

Code :

<div class="jdb-cell-row">
  <div class="jdb-cell jdb-container jdb-black">
    <p>01. Janvier</p>
    <p>03. Mars</p>
    <p>05. Mai</p>
    <p>07. Juillet</p>
  </div>

  <div class="jdb-cell jdb-cell-middle jdb-container jdb-gray">
    <p>Aligné au milieu</p>
  </div>

  <div class="jdb-cell jdb-cell-bottom jdb-container jdb-light-gray">
    <p>Aligné en bas</p>
  </div>
</div>

Les classes `jdb-cell(-position)`

JdB.CSS fournit les classes de disposition suivantes :

Classe	Rôle
jdb-cell-row	Conteneur pour les cellules (colonnes).
jdb-cell	Cellule de disposition (colonne).
jdb-cell-top	Aligne le contenu en haut d'une cellule (colonne).
jdb-cell-middle	Aligne le contenu au milieu vertical d'une cellule (colonne).
jdb-cell-bottom	Aligne le contenu au bas d'une cellule (colonne).
jdb-mobile	Ajoute une réactivité mobile-first à une cellule (colonne) afin de la rendre responsive. Affiche les éléments sous forme d'éléments de bloc sur les appareils mobiles.

Les dispositions

jdb-cell-row

Les classes jdb-cell(-position)

.jdb-cell dans un tableau :

.jdb-cell avec des simples div :

Éléments de bloc HTML

Disposition en cellule

Disposition en conteneur

Les cellules s'auto-ajustent

Les cellules s'ajustent à la même hauteur

Responsive

Alignement facile

Les classes jdb-cell(-position)

Les classes `jdb-cell(-position)`

Les classes `jdb-cell(-position)`