27 frameworks CSS — Mettez une grille dans votre site web

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint.

52Framework

Ce framework est résoluement tourné vers l’avenir en utilisant HTML5 avec header, nav, section, article, footer et CSS3 avec le sélecteur ::selection, les coins arrondis, les ombres portées pour le texte ou les blocs. La grille est composée de 16 colonnes de 52 pixels chacune séparées par une gouttière de 8 pixels. Les fichiers CSS de 52Framework vont à l’essentiel et si je préfère le système de grille de Blueprint, ça vaut le coup de de s’inspirer de reset.css (avec les nouvelles balises HTML5) et de general.css pour avoir des éléments de formulaires avec des coins arrondis et des ombres portées.

Element CSS Framework

Ce framework propose un environement global pour créer un site web avec un ensemble de dossiers prêts à être remplis : /clientFiles, /concepts, /copy, /js,  etc. et d’autres contenant les éléments de base du framework comme /css (qui contient les fichiers du framework proprement dit) et /elementsImages qui contient les icônes qui accompagnent externalLinks.css. Ces deux derniers éléments faisant tout le charme de ce framework en fournissant des classes CSS et des icônes pour représenter les liens externes.

Baseline CSS

Aligner des lignes comportant des textes de tailless différentes n’est pas toujours facile et c’est l’objectif de ce framework moderne (oui, ça veut dire qu’il y a un soupçon de HTML5et de CSS3 dedans). Notez que la compatibilité avec IE6 n’est pas garantie. Au menu : un reset CSS avec certaines des nouvelles balises HTML5 (mais curieusement avec des balises HTML dépréciées également), un système de grille, des styles de formulaires et un peu de  typographie pour terminer.

960.gs

Ce système de grille est conçu pour fluidifier votre chaine de production avec des dimensions communément utilisées à partir d’une largeur de 960 pixels. Existe en deux parfums : 12, 16 ou 24 colonnes. Des classes comme push_XX ou pull_XX permettent de réarranger les blocs indépendamment de leur ordre d’apparition dans le code HTML. Un générateur de grille personnalisée permet de spécifier la largeur et le nombre des colonnes et la taille de la gouttière. Il existe même un générateur de blocs permettant de définir votre mise en page .

tripoli

Redéfinit une feuille de style par défaut pour les balises HTML de manière à assurer un rendu identique sur les navigateurs présents sur le marché. Propose de nombreux fichiers additionnels comme layout.css pour la grille ou negative.css pour inverses les contrastes, etc.

yaml

Yet Another Multicolumn Layout est un framework (x)html/css pour la création de maquettes robustes et flexibles centré sur la légèreté et l’accessibilité. Propose un générateur WYSIWYG YAML Builder pour construire votre mise en page.

bluetrip

Le meilleur de Blueprint et de Tripoli avec un zeste de Hartija pour la feuille de style à l’impression, la simplicité de 960 Grid System. Le fichier screen.css regroupe le reset CSS d’Eric Meyer, le système de grille, la gestion des liens externes (icône selon l’extension ou la destination) et de l’inversion des contraste, plus des styles pratiques pour la gestion des textes.

typogridphy

Basé sur 960 Grid System, ce framework permet de créer des grilles flexibles d’une grande beauté typographique.

yui grids

Offre un jeu prédéfinit de largeur de page comprenant six templates avec la possibilité de subdiviser les blocs. Au total c’est plus de 1 000 combinaisons de maquettes pour seulement 4kb.

elasticss

Basé sur des techniques de colonnage traditionnel en 4 colonnes, ce framework permet de multiples combinaisons et subdivisions. Il se distingue des autres par sa capacité à produire facilement des design fixes, liquides ou élastiques.

sencss

Un frameword zen qui ne vous obligera pas à adopter un système de grille particulier mais qui fournit plutôt un ensemble de styles pour les parties les plus répétitives de votre travail sans trop s’éloigner du style par défaut des navigateurs. Grille verticale en 18 pixels. Fournit des jeux de polices de caractères spécifiques pour Windows, Mac et Linux.

the golden grid

Ce système de grille est le fruit d’une recherche constante de la grille parfaite : rien de tel que le nombre d’Or pour se rapprocher des dieux !

css-boilerplate

Par l’un des créateurs de Blueprint qui a décidé de se remettre à l’ouvrage pour aboutir à un framework qui ne vous obligera plus à choisir entre sémantique et efficacité : c’est vous qui décidez d’utiliser float: left; width: 240px; margin-right: 110px ou class="column span-2 append-1" !

BIC

De bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css). Cf. BIC, un framework orienté couleur et typographie.

bungee

Propose une grille de 12 colonnes dont la plus petite subdivision vaut 4em. Pour les nostalgiques des pixels, ça fait environ 64px. Avec un niveau de zoom par défaut, un site construit avec Bungee mesure 768px de large, et s’affiche donc parfaitement sur un écran de faible résolution.w

sparkl

Combine un marquage HTML CHIC (Code HTML Intrinsèquement Classe — POSH en anglais) et du javascript non-intrusif pour créer des sites web à l’épreuve des balles et conformes aux Standards. Ce framework CSS très modulaire vous permettra de vous concentrer sur vos besoins.

hartija

Regroupe les meilleures pratiques en matière de feuille de style destinées à l’impression.

The 1Kb CSS Grid

Une grille minimaliste qui tient en une quinzaine de déclarations CSS idéale pour les débutant qui veulent comprendre le principe général des frameworks et pour les intégrateurs aguerris qui verront là un moyen économique de donner un rythme horizontal à leur mise en page. Choix du nombre de colonnes, de la gouttière et de la largeur totale avant le téléchargement.

1 line CSS Grid Framework

Vous avez bien lu, il s’agit d’un framework qui tient en une seule déclaration .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; } Etonnant, non ?

emastic

Très complète, cette bibliothèque CSS s’utilise aussi bien avec des em qu’avec des % et s’accommode de largeur fixes ou fluides pour un poids de 4Kb pour la version compressée. Nombreuses démonstrations disponibles pour voir ce qu’il est possible de faire.

malo

Petit frère de emastic, malo se distingue par sa légèreté au service d’une grille en pourcentage.

logicss

basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités de redimensionnements de texte et un rythme vertical. Trois systèmes de grilles très souples personnalisables à l’aide d’une boite à outils. Design élastique avec l’unité em, liquide via les pourcentages % ou fixe avec les px.

MyCSS Grid System

Système de grille en 960px avec une utilisation du nombre d’or pour obtenir des proportions harmonieuses. Assez verbeux dans le nombre de classes pour placer des éléments.

A CSS Framework

Cet ensemble de fichiers CSS propose des maquettes prêtes à l’emploi en 1, 2 ou 3 colonnes avec un header, footer, sidebar et navigation horizontale ou verticale. Un fichier framework.html est disponible pour commencer.

Frame

Frame: A CSS framework from the year 2050 se veut la nouvelle manière de mettre en page les contenus et de construire des interfaces web. Il combine les idées de 960.gs, de Blueprint et de nombreuses techniques pour obtenir le framework css le plus simple et le plus fluide de tous les temps !

Formee

Formee est un framework spécialisé dans la mise en forme des éléments de formulaires. Le système de grille pour l’alignement des labels et autres input est basé sur 960.gs. Ce mini-framework est composé de deux feuilles de style : form-style.css et form-structure.css qui parlent d’elles-mêmes.

Marker CSS

Marker CSS se distingue par une syntaxe prenant en compte un nombre important de propriétés. Peut-être trop à mon humble avis, mais tout les goûts sont dans la nature ! Par exemple <body class="A s13 c666 tc"> signifie : A pour famille de police Arial ; s13 font-size 13 pixels ; c666 couleur présélectionnée ; et tc pour avoir le texte aligné au centre.

PS : Cette liste est une version réactualisée de celle que j’ai déjà publiée en juin 2009 à la fin de l’article Frameworks CSS, mettez vos grilles au pas !. Toute ressemblance avec des listes de frameworks CSS publiées ces derniers temps, bla bla bla…

11 commentaires » | Publié le Mercredi 10 février 2010 dans Conception de site web, HTML & CSS
Vous pouvez laisser un commentaire ou un trackback depuis votre site.

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.

Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d'intégration de votre site web : le poids, l'intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j'aime bien tester les frameworks qui tombent à portée de souris, et je n'hésite pas à faire des expériences d'hybridation : rien de tel qu'un bout de reset CSS d'Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint. 52Framework : Ce framework est résoluement tourné vers l'avenir en utilisant HTML5 avec `header`, `nav`, `section`, `article`, `footer` et CSS3 avec le sélecteur `::selection`, les coins arrondis, les ombres portées pour le texte ou les blocs. La grille est composée de 16 colonnes de 52 pixels chacune séparées par une gouttière de 8 pixels. Les fichiers CSS de 52Framework vont à l'essentiel et si