Grille

Ajouté à la version :

0.0.1

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 :

0.1.0(actuelle)

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>