Ce site est entièrement responsive. Néanmoins, certains styles peuvent être mieux appréciés sur un écran plus grand.

Documentation

Découvrez le fonctionnement du framework Slim à travers la documenation. Tous les composants y sont abordés, et illustrés des mises en situation.

Grille

La grille fonctionne avec des colonnes en pourcentage. Cette logique de pourcentage rend la grille plus fléxible

Colonne de 50%
Colonne de 50%
<div class="cols-row">
	<div class="col-50">Colonne de 50%</div>
	<div class="col-50">Colonne de 50%</div>
<div>
100%
90%
10%
80%
20%
75%
25%
66%
33%
60%
20%
20%
40%
40%
20%
33%
33%
33%
25%
25%
25%
25%
20%
20%
20%
20%
20%
10%
10%
10%
10%
10%
10%
10%
10%
10%
10%

Fonctionnement de la grille

La grille contient entre 1 et 10 colonnes. Le principe de grille est le même que celui appliqué en typographie. Peu importe la largeur de la colonne, celle-ci sera toujours proportionnelle au autres.

Pour commencer, nos colonnes sont contenu dans une div cols-row.

<div class="cols-row">

<div>

Placez à l'interieur de cette div vos colonnes

<div class="cols-row">
	<div class="col-60">60%</div>
	<div class="col-20">20%</div>
	<div class="col-20">20%</div>
<div>
60%
20%
20%

Sans goutière - cols-split

L'espace entre chaque colonne est une "goutière" de 3%. Avec la classe cols-split Il est possible d'enlever les goutières tout en gardant les proportions des colonnes.

<div class="cols-row cols-split">
	<div class="col-60">60%</div>
	<div class="col-20">20%</div>
	<div class="col-20">20%</div>
<div>
60%
20%
20%

Placement des colonnes au centre - col-centre

Positionner une colonne de n'importe quelle taille au centre de votre grille. Vous pouvez la centrer avec la classe col-centre.

<div class="cols-row">
	<div class="col-centre col-50">50%</div>
<div>
50%

Placement des colonnes en poussant à droite - col-push-droite

Positionner une colonne de n'importe quelle taille à droite de votre grille avec col-push-droite.

<div class="cols-row">
	<div class="col-push-droite col-60">60%</div>
<div>
60%

Placement des colonnes en poussant du bord gauche vers la droite- col-push-xx

Positionner une colonne de n'importe quelle taille dans votre grille en la décallant du bord gauche intérieur.

<div class="cols-row">
	<div class="col-push-20 col-50">50%</div>
<div>

<div class="cols-row">
	<div class="col-push-50 col-30">30%</div>
<div>
50%
30%