Styleguide

Grille

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Une définition de grille est composée d'un élément .grid, puis d'enfants avec une classe .grid-wX.

Tailles de grille disponibles :

  • 25% : .grid-w25
  • 33% : .grid-w33
  • 50% : .grid-w50
  • 66% : .grid-w66
  • 75% : .grid-w75
  • 100% : .grid-w100
<div class="grid">
  <div class="grid-w50"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w50"></div>
  <div class="grid-w50"></div>
  <div class="grid-w33"></div>
  <div class="grid-w33"></div>
  <div class="grid-w33"></div>
  <div class="grid-w66"></div>
  <div class="grid-w33"></div>
  <div class="grid-w100"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w75"></div>
  <div class="grid-w25"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w80"></div>
  <div class="grid-w40"></div>
  <div class="grid-w60"></div>
</div>

Grille Columns

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

Le composant de grille columns se déclare avec la classe .gridColumns.

<div class="gridColumns">
  <div></div>
  <div></div>
</div>

Définition du nombre de colones

Ajouter la classe de modification .gridColumns--X à l'élément ayant la classe .gridColumns afin de modifier son nombre de colonnes.

Nombres de colonnes disponibles :

  • 2 : .gridColumns--2
  • 3 : .gridColumns--3
  • 4 : .gridColumns--4
<div class="gridColumns gridColumns--2">
  <div></div>
  <div></div>
</div>
<div class="gridColumns gridColumns--3">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="gridColumns gridColumns--4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Modification de la largeur de gouttière

Ajouter la classe de modification .gridColumns--gutterL à l'élément ayant la classe .gridColumns afin de modifier son style.

<div class="gridColumns gridColumns--2 gridColumns--gutterL">
  <div></div>
  <div></div>
</div>