Micro CSS Grid Framework

Dans la lignée du 1kb CSS Grid Framework, j’ai décidé de monter un micro Framework de Grid afin de gérer des blocs flottants, de largeur fixe ou relative.

N’ayant pas besoin de la compatibilité IE6 dans la plupart des cas, j’ai pu utiliser les sélecteurs CSS 2.1 pour économiser quelques noms de classes. Le seul impératif étant d’appliquer la classe de colonne en premier.

Dans l’exemple ci-dessous, je fais deux blocs de largeur égale, via une classe « 50p » pour « 50% », mais il est également possible de la nommer convenablement (comme « col_sidebar » .. sémantique, quand tu nous tiens), tant qu’elle est préfixée par « col_ ».

Code HTML

    
a
    
b

Code CSS

.grid{overflow:hidden}
.grid *[class^="col_"]{float:left;overflow:hidden}
.col_50p{width:50%}

/*Exemples de classes de colonnes*/
.col_contenu{width:600px}
.col_sidebar{width:300px}

Avec quelques aménagements dans le HTML et le CSS, on peut mettre en place des gouttières :

    
a
    
b

*[class^="grid_"]{overflow:hidden}
*[class^="grid_"] *[class^="col_"]{float:left;overflow:hidden}
.grid_1p *[class^="col_"] + *[class^="col_"]{margin-left:1%}
.col_49p{width:49%}

C’est évidemment incompatible avec IE, sauf aide de Selectivizr et d’un éventuel bloc en clear:both à la suite. Comme pour la plupart des systèmes de Grilles, il vaut mieux éviter de styliser directement le bloc, et de privilégier le style sur un enfant.

à utiliser judicieusement, étant donné le peu de sémantique des blocs DIV, et le fait que, soyons francs, ce système ressemble affreusement à l’utilisation des TABLE, comme au « bon vieux temps ». Le terme framework est ici largement à prendre au second degré (:

Un retour, une question, une insulte ? Direction les commentaires 😉