Système de grille maison

Decrition

Je souhaitais aller plus loin dans la compréhension des systèmes de grille responsive. J'ai donc décidé de recréer un système similaire à celui du twitter bootsrap pour comprendre les mécanismes, les difficultés techniques et compromis derrière ces outils de grille.

Les grilles

Breakpoints

0 < Small < 640px < Medium < 1040px < Large

Les points de rupture des "media query" sont éditables dans des variables dans le fichier _grid.scss

Exemples

Col-12
Col-11
Col-1
Col-10
Col-2
Col-09
Col-3
Col-08
Col-4
Col-07
Col-5
Col-06
Col-6

Grilles responsives

col-s-12 col-m-6 col-l-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni perspiciatis repellendus, est dolor cumque beatae, soluta tenetur officiis nesciunt natus veniam at sequi facilis hic. Consequuntur omnis suscipit laboriosam exercitationem.

col-s-12 col-m-6 col-l-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni perspiciatis repellendus, est dolor cumque beatae, soluta tenetur officiis nesciunt natus veniam at sequi facilis hic. Consequuntur omnis suscipit laboriosam exercitationem.

col-s-12 col-m-6 col-push-m-3 col-l-4 col-push-l-0

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni perspiciatis repellendus, est dolor cumque beatae, soluta tenetur officiis nesciunt natus veniam at sequi facilis hic. Consequuntur omnis suscipit laboriosam exercitationem.

Show

Small
 
Medium
 
Large

Hide

Small
 
Medium
 
Large

En savoir plus

Plus d'infos sur le processus de création : behance

Voire les sources : github