12 Columns Grid
Utilisant depuis quelques temps les grilles CSS mais n'arrivant pas à trouver un modèle Responsive correspondant tout à fait à mes attentes (contenant uniquement l'essentiel pour démarrer un projet), j'ai fini par réaliser mon propre système.
Parmi différentes grilles que j'ai pu tester, entre celles dépendant de LESS ou SASS, celles basé sur un modèle liquide (pas toujours très pratique lorsque l'on doit gérer un projet en pixel perfect) ainsi que le choix des noms souvent bizarres et plus que discutables pour les sélecteurs (sans parler des usines à gaz contenant tout un tas de choses inutiles, et à mon avis, plus proches de frameworks que de simples grilles), pas évident de trouver quelque chose de simple et léger.
A noter toutefois qu'après de nombreuses recherches, j'ai trouvé quelques perles comme KNACSS proposée par l'équipe d'Alsacréations et Pure.css qui semble encore plus puissant/intéressant puisque qu'il s'appuye sur la propriété FLEXBOX pour positionner les éléments (rétro-compatibilité pour les dinosaures du web assurée avec INLINE-BLOCK).
Bref, étant amené à travailler de temps à autre sur le modèle de grille CSS 12 colonnes proposé par 960.gs et appréciant la nomenclature des classes CSS ainsi que le nom des sélecteurs, j'ai choisi de m'appuyer sur ce modèle pour réaliser cette grille Responsive de façon simple et structurée.
Je me suis également inspiré de la méthode employée par Skeleton pour définir les points de rupture des Media Queries.
(n'hésitez pas à redimensionner votre navigateur pour voir la grille s'adapter en temps réel)
Afin d'accéler encore un peu plus le lancement de tout nouveau projet, j'ai également décliné cette grille en une seconde version ayant pour base une dimension de 960 pixels en plus de celle ayant comme base 1200 pixels.
Vous êtes bien sur libre de récupérer, d'adapter et d'utiliser cette grille CSS comme bon vous semble.
N'hésitez pas à me contacter pour me faire part de vos suggestions afin d'améliorer/corriger d'éventuelles choses dans cette grille.
/* WCGrid Responsive V1.3 (Warin Creations Grid Responsive)
Copyright 2014, Laurent Warin
http://warin-creations.be */
body{
min-width:1200px;
margin:0;
padding:0}
/* ***** Containers ***** */
.container_12{
margin-left:auto;
margin-right:auto;
width:1200px;
overflow:hidden}
/* ***** Grid >> Global ***** */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{
display:inline;
float:left;
position:relative;
margin-left:10px;
margin-right:10px}
/* ***** Grid >> Children ***** */
.alpha{margin-left:0}
.omega{margin-right:0}
/* ***** Grid >> 12 Columns ***** */
.grid_1{width:80px}
.grid_2{width:180px}
.grid_3{width:280px}
.grid_4{width:380px}
.grid_5{width:480px}
.grid_6{width:580px}
.grid_7{width:680px}
.grid_8{width:780px}
.grid_9{width:880px}
.grid_10{width:980px}
.grid_11{width:1080px}
.grid_12{width:1180px}
/* ***** Prefix Extra Space >> 12 Columns ***** */
.prefix_1{padding-left:100px}
.prefix_2{padding-left:200px}
.prefix_3{padding-left:300px}
.prefix_4{padding-left:400px}
.prefix_5{padding-left:500px}
.prefix_6{padding-left:600px}
.prefix_7{padding-left:700px}
.prefix_8{padding-left:800px}
.prefix_9{padding-left:900px}
.prefix_10{padding-left:1000px}
.prefix_11{padding-left:1100px}
/* ***** Suffix Extra Space >> 12 Columns ***** */
.suffix_1{padding-right:100px}
.suffix_2{padding-right:200px}
.suffix_3{padding-right:300px}
.suffix_4{padding-right:400px}
.suffix_5{padding-right:500px}
.suffix_6{padding-right:600px}
.suffix_7{padding-right:700px}
.suffix_8{padding-right:800px}
.suffix_9{padding-right:900px}
.suffix_10{padding-right:1000px}
.suffix_11{padding-right:1100px}
/* ***** Clear Floated Elements ***** */
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0}
.clearfix:before,
.clearfix:after{
content:"\0020";
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0}
.clearfix:after{clear:both}
/* ================= Responsive desktop (12 columns) ================= */
/* Note: Design for a width of 960px to 1199px */
@media only screen and (min-width: 960px) and (max-width: 1199px){
body{min-width:960px}
/* ***** Containers ***** */
.container_12{width:960px}
/* ***** Grid >> 12 Columns ***** */
.grid_1{width:60px}
.grid_2{width:140px}
.grid_3{width:220px}
.grid_4{width:300px}
.grid_5{width:380px}
.grid_6{width:460px}
.grid_7{width:540px}
.grid_8{width:620px}
.grid_9{width:700px}
.grid_10{width:780px}
.grid_11{width:860px}
.grid_12{width:940px}
/* ***** Prefix Extra Space >> 12 Columns ***** */
.prefix_1{padding-left:80px}
.prefix_2{padding-left:160px}
.prefix_3{padding-left:240px}
.prefix_4{padding-left:320px}
.prefix_5{padding-left:400px}
.prefix_6{padding-left:480px}
.prefix_7{padding-left:560px}
.prefix_8{padding-left:640px}
.prefix_9{padding-left:720px}
.prefix_10{padding-left:800px}
.prefix_11{padding-left:880px}
/* ***** Suffix Extra Space >> 12 Columns ***** */
.suffix_1{padding-right:80px}
.suffix_2{padding-right:160px}
.suffix_3{padding-right:240px}
.suffix_4{padding-right:320px}
.suffix_5{padding-right:400px}
.suffix_6{padding-right:480px}
.suffix_7{padding-right:560px}
.suffix_8{padding-right:640px}
.suffix_9{padding-right:720px}
.suffix_10{padding-right:800px}
.suffix_11{padding-right:880px}
}
/* ================= Responsive tablette portrait (12 columns) ================= */
@media only screen and (min-width: 768px) and (max-width: 959px){
body{min-width:768px}
/* ***** Containers ***** */
.container_12{width:768px}
/* ***** Grid >> 12 Columns ***** */
.grid_1{width:44px}
.grid_2{width:108px}
.grid_3{width:172px}
.grid_4{width:236px}
.grid_5{width:300px}
.grid_6{width:364px}
.grid_7{width:428px}
.grid_8{width:492px}
.grid_9{width:556px}
.grid_10{width:620px}
.grid_11{width:684px}
.grid_12{width:748px}
/* ***** Prefix Extra Space >> 12 Columns ***** */
.prefix_1{padding-left:64px}
.prefix_2{padding-left:128px}
.prefix_3{padding-left:192px}
.prefix_4{padding-left:256px}
.prefix_5{padding-left:320px}
.prefix_6{padding-left:384px}
.prefix_7{padding-left:448px}
.prefix_8{padding-left:512px}
.prefix_9{padding-left:576px}
.prefix_10{padding-left:640px}
.prefix_11{padding-left:704px}
/* ***** Suffix Extra Space >> 12 Columns ***** */
.suffix_1{padding-right:64px}
.suffix_2{padding-right:128px}
.suffix_3{padding-right:192px}
.suffix_4{padding-right:256px}
.suffix_5{padding-right:320px}
.suffix_6{padding-right:384px}
.suffix_7{padding-right:448px}
.suffix_8{padding-right:512px}
.suffix_9{padding-right:576px}
.suffix_10{padding-right:640px}
.suffix_11{padding-right:704px}
}
/* ================= Responsive mobile Portrait & Paysage (12 columns) ================= */
@media only screen and (max-width: 767px){
body{min-width:300px}
/* ***** Containers ***** */
.container_12{width:280px;padding:0 10px}
/* ***** Grid >> 1 Column ***** */
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.force_full{width:260px}
/* ***** Prefix Extra Space >> 1 and 2 Columns ***** */
.prefix_1,.prefix_2,.prefix_3,.prefix_4,.prefix_5,.prefix_6,.prefix_7,.prefix_8,.prefix_9,.prefix_10,.prefix_11{padding-left:0}
/* ***** Suffix Extra Space >> 1 and 2 Columns ***** */
.suffix_1,.suffix_2,.suffix_3,.suffix_4,.suffix_5,.suffix_6,.suffix_7,.suffix_8,.suffix_9,.suffix_10,.suffix_11{padding-right:0}
}
/* ================= Responsive mobile payasage (2 columns) ================= */
@media only screen and (min-width: 480px) and (max-width: 767px){
body{min-width:420px}
/* ***** Containers ***** */
.container_12{width:400px;padding:0 10px}
/* ***** Grid >> 2 Columns ***** */
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11{width:180px}
/* ***** Grid >> 1 Column ***** */
.grid_12{width:380px}
/* ***** Suffix and Prefix >> 1 Column ***** */
.force_full{width:380px !important} /* force any grid on 1 column */
.force_prefix{padding-left:200px !important} /*for prefix 1 column */
}
/* ================= Responsive mobile portrait (1 column) ================= */
/* Note: Design for ONLY a width of 320px to 479px (not 480px to 767px) */
@media only screen and (max-width: 479px){
/* ***** Suffix and Prefix >> 1 Column ***** */
.force_full_min{ /* force any grid on 1 column */
width:260px !important}
}