14 Frameworks CSS – Quel est le meilleur ?

Les frameworks CSS sont de plus en plus à la mode et de plus en plus nombreux et diversifiés. Un framework CSS, est-ce forcément une bonne idée ? Si oui, lequel utiliser ? Certains sont plus populaires que d’autres, tels que BluePrint ou 360 Grid System. Sont-ils vraiment les meilleurs ? Rien n’est plus sur.

Pourquoi utiliser un Framework CSS ?

- pour le temps de développement : comme tout framework, ils ont pour but d’abstraire les parties de notre code qui se trouve sur toutes nos applications. Cette argument compte surtout lors de l’élaboration d’une maquette de site web ou la seul le résultat visuel est important.
- Pour la compatibilité entre navigateur : les problèmes de compatibilité sont bien connus des développeurs web et les frameworks nous permettent de nous libérer de ce fardeau.
- Pour l’esthétique : certains frameworks sont spécialisés dans un type de rendu ou dans la typographique. Ils peuvent donc nous permettre de découvrir des techniques ou des mises en forme dont nous ne pensons pas. D’autant plus que l’on ne connait pas forcément l’ensemble des propriétés CSS.

Les inconvénients d’utiliser un framework CSS.

- Les frameworks CSS peuvent être considérer comme une mauvaise pratique. Les pages (X)HTML sont par définition sémantiques, c’est à dire qu’elles devraient avoir le même rôle qu’un fichier XML, ne contenir uniquement des tag, des classes et des id définissant leur contenu. Ainsi en théorie, la feuille de style et la page HTML doivent être totalement indépendante. En pratique, si vous utilisez un framework et que vous décidez d’en changer, alors vous n’avez pas le choix de modifier tout votre HTML.

- Le code du Framework non utilisé sera quand même envoyé au navigateur du client. Les connexions sont de plus en plus rapide, et la taille des données envoyées de plus en plus négligeable. Mais celà peut-être considérer comme une sur-couche qui peut faire ralentir les navigateurs ou les machines les plus anciennes.

Quel Framework CSS choisir ?

52framework


Il permet d’utiliser les nouvelles fonctionnalités de HTML5 (tag header, nav, section, article, footer) et de CSS3 (arrondis, effets, ombres et sélecteurs), tout en restant compatible avec IE6.
Le principe de grid est utilisé. Elle est composé de 16 colonnes de 52px séparé par une gouttière de 8px.

960 Grid System


Il est Basé sur une grille de 960px et de 12 ou 16 colonnes. Beaucoup de framework se sont basé sur lui et sa notoriété est grande. Il est aujourd’hui beaucoup comparé à Blueprint, et ont chacun leurs avantages et inconvénients.

Fluid 960 Grid System

La version fluide avec grid extensible de 960gs. Il est maintenant intégré à ce dernier.

Blueprint

Ce framework est basé sur une grille de 950px et de 24 colonnes. Le point fort est la prise en charge de références typographiques, la gestion du CSS pour l’impression, ainsi qu’une gestion cross-browser parfaite. Possède un script lib/compress.rb qui permet de donner des noms de classes sémantiques. Il fait partie des framework très populaires et possède de ce fait une bonne communauté.

BlueTrip CSS Framework

Le but de ce framework était de réunir les fonctionnalités de tous les autres. Il dispose d’une grille de 24 colonnes, d’une typographie et des formulaires épurés, des styles pour les boutons et les messages de statut et une feuille de style pour l’impression.

Elastic CSS


Il permet de facilement la création d’un layout cross-browser complexe de page web, Il utilise un système sur 4 colonnes avec la possibilité de les combiner à l’infinie sous leur forme fixe ou élastique.

Elements CSS Framework

Ce framework propose une structure pour la création d’un nouveau site web. Elle est composée de plusieurs dossiers : clientFiles, concepts, copy, js, css ; où sont censés se retrouver les différents éléments du site. Le point fort de ce framework est le fichier CSS externalLink.css qui permet de mettre des icones sur vos liens externes et ainsi indiquer à l’utilisateur si le lien pointe vers une adresse web, email, un document Word ou un PDF.

Emastic

Framework très léger (4kb) basé sur une grille fluide donnant la possibilité d’utiliser les pixels, les pourcentages ou les em. Emastic inclue aussi la typographie et des styles pré-définis.

Malo

Ce Framework est très léger. Il contient 8 lignes de CSS et pèse 0.25kb. Il permet juste de découper votre page en 2 à 5 parties et ainsi créer un layout rudimentaire qu’il faudra retravailler de vous même.

SenCSs

Contrairemenet à la plupart des framework CSS, SenCSs ne fournit pas de grille de mise en page, mais il gère tout le reste : les polices, les couleurs, les alignements, les marges, les formulaires, les titres, les citations…

The 1Kb CSS Grid

Framework minimaliste, qui grâce à une interface permet de créer une grille de 450px à 1600px, sur 9-16 colonnes. La feuille de style ainsi généré ne fait que quelques lignes et pèsent moins de 1kb.

Tripoli

Ce framework propose une feuille de style pour uniformiser les éléments HTML entre les navigateurs. Il possède également des feuilles de style annexe afin de donner des effets particuliers tels que le contraste ou le négatif. On peut considérer ce framework comme un reset.css amélioré.

YAML: Yet Another Multicolumn Layout

C’est un framework pour des layout avec plusieurs colonnes.  Son point fort est la légèreté et l’accessabilité. Il existe même un outil YAML Builder qui permet de construire sa page avec une simple interface graphique.

YUI Grids CSS

Crée par Yahoo!, ce Framework CSS est basé sur une grille fluide ou fixe. Il comporte plusieurs format de largeur de page (750px, 950px et 974px).

YUI Grids CSS est inclus dans le package de YUI, mais ne pèse que 16ko, mais comporte plus de 1000 combinaisons de maquettes.

Aucun framework CSS ne correspondent à ce que je veux faire.

Vous comprendrez bien sur que si vous ne trouvez chaussure à votre pied. C’est peut-être que votre application n’est pas assez générique pour rentrer dans un moule et qu’il serait peut-être bien de ne pas en utiliser et donc de partir de zéro. Le choix d’un framework CSS ne devrait pas être un reflexe. Par définition, le développeur va s’adapter au framework et du coup s’imposer des limites qui peuvent mettre en difficulté l’intégration du design.
Il reste néanmoins intéressant d’utiliser un reset global afin d’avoir une base CSS cross-browser.

Articles similaires :

Mots-clefs : , , , , , , , , , , , , , , ,

2 commentaires sur “14 Frameworks CSS – Quel est le meilleur ?”

  1. Zadkiel dit :

    Hello,

    Bravo pour ce jolie récapitulatif !

    Petit détail qui me chagrine :

    « - Les frameworks CSS peuvent être considérer comme une mauvaise pratique. Les pages (X)HTML sont par définition sémantiques, c’est à dire qu’elles devraient avoir le même rôle qu’un fichier XML, ne contenir uniquement des tag, des classes et des id définissant leur contenu. Ainsi en théorie, la feuille de style et la page HTML doivent être totalement indépendante. En pratique, si vous utilisez un framework et que vous décidez d’en changer, alors vous n’avez pas le choix de modifier tout votre HTML. »

    J’ai du mal à comprendre cette argument. Ton CSS reste bien séparé de ton HTML: en changeant la définition des class dans ton css tu peut changer le style de ta page sans toucher à ton HTML.

    • bugz dit :

      Hello,

      Quand on écrit class="column span-8": les labels « column » et « span-8 » font référence à des notions de style et non de contenu.

      En terme de sémantique c’est comparable à écrire class="red" : le label « red » définit le style. Pour changer la couleur, il faudra soit changer le CSS et donner à la class « red » une autre couleur que le rouge ce qui sémantiquement est une abération, soit changer la class dans le HTML, ce qui équivaut à changer le support de donnée, alors que celle-ci est toujours la même.

      Pour respecter la sémantique de la page les attributs class ne doivent pas définir le style, mais la donnée tel que class="content"ou class="comment"ou class="relatedarticles".

Laisser une réponse