Frameworks CSS
Attention: cet article date du 8 mars 2017
Ce qu'il contient est peut être encore valable...
... ou complètement obsolète!
L’objectif d’un Framework CSS est de fournir une collection de classes prêtes à l’emploi, facilitant le démarrage d’un projet web ou mobile.
Il en existe tellement, certains très répandus d’autres un peu moins, qu’une petite étude comparative ne me parait pas inutile…
J’en ai retenu 9, sélection fort incomplète mais qui permet toutefois d’y voir un peu plus clair.
Exemples théoriques de grilles
Rien ne ressemble plus à un système de grille qu’un système de grille?
Pas sûr…
Multi colonage en précisant chaque taille
<div class="container">
<div class="row">
<div class="col-mobile-12 col-tablette-6 col-ordinateur-8"></div>
<div class="col-mobile-12 col-tablette-6 col-ordinateur-4"></div>
</div>
</div>
Double nommage « column » et « taille »
A noter que les classes sont souvent en chiffres, mais pas systématiquement.
<div class="container">
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
</div>
Automatique
Trois div dans notre div? Elles feront un tiers (sauf de forcer manuellement)
<div class="grid"> <div></div> <div></div> <div></div> </div>
1 sur 3, 2 sur 3…
<div class="grid"> <div class="col span_1_of_3"> </div> <div class="col span_2_of_3"></div> </div>
Et tous les autres cas de figures non croisés…