JdB.CSS BETA

Le responsive

jdb-responsive, jdb-col, jdb-row, jdb-rest

Tags Grilles
Partager cette page
Descriptions de classes

Réactivité intégrée

JdB.CSS comprend un système de grille réactif et axé sur les mobiles pour gérer la mise en page.

1/2

1/2

1/3

1/3

1/3

1/3

2/3

3/4

1/4

1/4

1/4

1/2

1/4

1/2

1/4

1/4

1/4

1/4

1/4

1/2

1/4

1/4

2/3

1/3

50px

rest

1/4

rest

100px

45px

rest

Les classes responsives

Le système de grille de JdB.CSS est réactif et les colonnes se réorganiseront automatiquement en fonction de la taille de l'écran.

Les classes réactives doivent être placées dans une classe jdb-row (ou classe jdb-row-padding) pour être entièrement réactives.

Code :
<div class="jdb-row">
  <div class="jdb-half jdb-container jdb-gray">
    <h2>jdb-half</h2>
  </div>
  <div class="jdb-half jdb-container jdb-light-gray">
    <h2>jdb-half</h2>
  </div>
</div>

<br/>

<div class="jdb-row-padding">
  <div class="jdb-half jdb-container jdb-light-gray">
    <h2>jdb-half</h2>
  </div>
  <div class="jdb-half jdb-container jdb-gray">
    <h2>jdb-half</h2>
  </div>
</div>

Les classes jdb-half, jdb-third, jdb-twothird, jdb-quarter et jdb-threequarter sont redimensionnées à 100% lorsque la largeur de l'écran est inférieure à 601 pixels. En savoir plus sur les proportions.

Combinaisons

jdb-quarter

jdb-half

jdb-quarter

jdb-quarter

jdb-quarter

jdb-half

jdb-half

jdb-quarter

jdb-quarter

jdb-third

jdb-twothird

jdb-quarter

jdb-threequarter

Lignes imbriquées

Les lignes peuvent être imbriquées dans d'autres lignes.

jdb-half

jdb-half

Je suis un paragraphe.

jdb-half

Je suis un paragraphe.

jdb-half

jdb-half

Je suis un paragraphe.

jdb-half

Je suis un paragraphe.

Code :
<div class="jdb-row">
  <div class="jdb-half jdb-container jdb-pale-green">
    <p class="jdb-lg jdb-bold">jdb-half</p>
    <div class="jdb-row">
      <div class="jdb-half jdb-container jdb-pale-red">
        <p class="jdb-lg jdb-bold">jdb-half</p>
        <p>Je suis un paragraphe.</p>
      </div>
      <div class="jdb-half jdb-container jdb-yellow">
        <p class="jdb-lg jdb-bold">jdb-half</p>
        <p>Je suis un paragraphe.</p>
      </div>
    </div>
  </div>
  <div class="jdb-half jdb-container jdb-pale-yellow">
    <p class="jdb-lg jdb-bold">jdb-half</p>
    <div class="jdb-row">
      <div class="jdb-half jdb-container jdb-gray">
        <p class="jdb-lg jdb-bold">jdb-half</p>
        <p>Je suis un paragraphe.</p>
      </div>
      <div class="jdb-half jdb-container jdb-khaki">
        <p class="jdb-lg jdb-bold">jdb-half</p>
        <p>Je suis un paragraphe.</p>
      </div>
    </div>
  </div>
</div>

Les proportions

Les autres classes de proportions que celles présentées ci-dessus se basent sur la classe jdb-col. La classe jdb-col définit une colonne dans une grille réactive de 12 colonnes. Avec elle, il est possible :

  1. d'utiliser la classe jdb-rest pour occuper le reste de la largeur de l'élément parent (jdb-row ou jdb-row-padding).
  2. d'utiliser la propriété CSS width pour définir la largeur en pourcentage ou en pixel.

jdb-row vs. jdb-row-padding

La classe jdb-row définit un conteneur sans remplissage, tandis que la classe jdb-row-padding ajoute un remplissage gauche et droit de 8px à chaque colonne. En savoir plus sur la différence entre jdb-row et jdb-row-padding.

Affichage/Masquage réactif

Les classes jdb-hide-small, jdb-hide-medium et jdb-hide-large et leurs dérivées masquent des éléments sur des tailles d'écran spécifiques.

Remarque : Il faut redimensionnez la fenêtre du navigateur pour visualiser et comprendre son fonctionnement.

Je suis visible sur tous les écrans.

jdb-hide-sm sera caché sur les petits écrans (smartphones)

jdb-hide-md sera masqué sur les écrans moyens (tablettes)

jdb-hide-lg sera masqué sur les écrans larges (ordinateurs)

Et moi je serai masqué sur les écrans larges (ordinateurs) et moyens (tablettes)

Code :
<div class="jdb-container jdb-khaki">
  <p>Je suis visible sur tous les écrans.</p>
</div>
<div class="jdb-container jdb-hide-sm jdb-pale-red">
  <p>jdb-hide-sm sera caché sur les petits écrans (smartphones)</p>
</div>
<div class="jdb-container jdb-hide-md jdb-light-gray">
  <p>jdb-hide-md sera masqué sur les écrans moyens (tablettes)</p>
</div>
<div class="jdb-container jdb-hide-lg jdb-sand">
  <p>jdb-hide-lg sera masqué sur les écrans larges (ordinateurs)</p>
</div>
<div class="jdb-container jdb-hide-md jdb-hide-lg jdb-sand">
  <p>Et moi je serai masqué sur les écrans larges (ordinateurs) et moyens (tablettes)</p>
</div>
Partager cette page
Tags Grilles