39 frameworks CSS — Mettez une grille dans votre design

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. Ceci dit, j’aime bien tester les frameworks CSS qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation. Le potentiel didactique de ces projets est très intéressant. Ne vous en privez pas.

Liste mise à jour le 13/06/2015

New! ChewingGrid

Système de grilles CSS fluide bâti sur la propriété Flexbox.

Fallback avec float

Foldy960

Foldy960 n’est pas un énième framework CSS : il s’agit simplement de quelques classes pour donner à 960.gs un aspect Responsive.

KNACSS

CSS « reset » pour commencer un projet à partir de zéro avec plein d’accessibilité, de performance, et de responsive webdesign.

Prend en charge les styles de base, la typographie, les modèles de boîte, les alignements et positionnements d’éléments, les grilles de mise en page.

röCSSti

Micro-framework CSS minimaliste, simple, très léger et personnalisable.

Idéal pour des sites en responsive, complexes ou simples.

Röccsti a été créé pour répondre à des contraintes de production rapides, efficaces et qualitatives, c’est le micro-framework utilisé pour tous les projets de l’agence web

940.CSS Version Fluide

Cette version fluide de 940.CSS utilise des valeurs exprimées en pourcentage à la place des pixels. Les valeurs permettent d’utiliser la grille de 940.css «version fixe» lorsque le .container est réglé sur 940px. Ceci permet de caler les blocs sur la grille fixe placée en background et de remettre une valeur en pourcentage sur le container lorsque la mise en page est terminée.

24 colonnes

Largeur fluide ou fixe en « fixant » la largeur du container principal

Ingrid

Ingrid est un système de grille fluide dont l’objectif est de réduire l’utilisation des classes sur les éléments individuels de manière à être moins intrusif et rendre les maquette « responsive » plus facile à faire. Ingrid est conçue pour être facilement personnalisable.

Largeur fluide

99lime HTML KickStart

Dans la lignée de Bootstrap, 99Lime est un framework complet avec un jeu de composant impressionnant : typographie, tooltips, boutons, navigation par onglets (tabs), fil d’Ariane, système de grille, images, Slideshow (Carousel), Media, etc.

12 colonnes,

Largeur fluide

CSS Common (ex. CSSNormalize)

Plutôt qu’un framework, CSS Common est à considérer comme une base de départ pour vos projets.

   Inclut un reset CSS inspiré de celui de HTML Boilerplate ; une feuille de style par défaut, stylisant les balises HTML les plus utilisées ; une feuille d’objets CSS utilisés fréquemment et des modules fonctionnant indépendamment.

CSS Common est disponible sur Github.

Micro CSS Grid Framework

Dans la lignée du 1kb CSS Grid Framework, @Darklg a décidé de monter un micro Framework afin de gérer des blocs flottants, de largeur fixe ou relative, pour faire une mise en page avec une grille CSS.

940.CSS Version Fixe

940.css est la fusion des frameworks 960 Grid System, Blueprint CSS et The Simpler Grid dont elle reprend les meilleures idées. Elle est composée de 24 colonnes de 20 pixels chacune séparées par une gouttière de 20 pixels en adaptant légèrement la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or. Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixel en utilisant : font-size: 13px; line-height: 1.539. Plus d’information dans l’article Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid ».

24 colonnes

Largeur fixe

Foundation

Ce framework HTML & CSS a été créé par l’agence web Zurb pour la conception des maquettes fonctionnelles (wireframes, mockups) quelque soit le type de périphériques. Il est composé d’une grille de mise en page, de la gestion des boutons et des formulaires.

12 colonnes

Largeur fixe et fluide

Bootstrap, from Twitter

Bootstrap est une boite à outils issue de Twitter conçue pour donner un coup d’accélérateur à la création de vos sites ou applications web. Il inclut : une base CSS et HTML pour la typographie, les formulaires, les boutons, les tableaux, les grilles, la navigation, etc. Voir aussi le combo Boostrap + HTML5 Boilerlate.

12 colonnes

Largeur Fixe

inuit.css

   Ce framework CSS est un concentré des bonnes pratiques et des années d’expériences de Harry Roberts. Il tient compte : des périphériques mobiles (tablette PC, iPhone, Android, etc.), des nouvelles balises HTML5, de la typographie. Il contient le minimum pour une meilleure extensibilité et flexibilité. Il fait le deuil de IE6 et «last but not least» (si j’ose dire), inuit.css s’affranchit des classes .end, .last ou .first ! Suivez @inuitcss 😉

Générateur de grille avec choix du nombre de colonne

Largeur fixe ou fluide, au choix

Tiny Fluid Grid

Ce générateur de grille fluide ne vous demandera pas de sortir votre calculatrice : choisissez entre 12, 16 ou 24 colonnes, le pourcentage pour l’espace entre les colonnes (gouttière) et les largeurs mini et maxi de votre page. Le système de grille est basé sur 960.gs.

12, 16 ou 24 colonnes

Largeur fluide

Flurid

Flurid est un système de grille de mise en pages fluide qui fonctionne avec Internet Explorer versions 6 et 7. Une mise en page fluide garantie l’utilisation optimale de l’espace, quelle que soit la résolution de l’utilisateur.

Largeur fluide

CSS:resetr

Essayez le reset CSS de votre choix parmi la quinzaine de de reset disponibles et observez les résultats sur différents types de contenus.

Gridinator

Outil en ligne pour calculer votre grille de mise en pages et obtenir les fichiers CSS & HTML ainsi que l’image de la grille pour vous aider à caler votre mise en page.

Two Lines CSS Framework

Système de grille qui tient en deux lignes avec l’utilisation de display:table et display:table-cell. Voir aussi du même auteur : CSS Mobile Reset — Reset CSS léger adapté aux périphériques mobiles : remise à zéro du minimum de balises HTML et proposition de nouvelles valeurs pour le minimum d’éléments HTML. Très pratique aussi pour les autres périphériques.

The Simpler CSS Grid

Cette grille de mise en page a la particularité de bénéficier de l’expérience des auteurs des autres systèmes de grilles comme Blueprint ou 960.gs : elle brille par sa simplicité et son intelligence. Voir The Simpler 978px Grid et The Simpler 940px Grid.

The Square Grid

   Ce framework est base sur une grille de 35 colonnes égales que l’on peut regrouper pour obtenir des maquettes aux formats suivants : 18 colonnes de 28px, 12 colonnes de 56px, 9 colonnes de 84px, 6 colonnes de 140px, 4 colonnes de 224px, 3 colonnes de 308px et 2 colonnes de 476px toutes séparées par une gouttière de 28px pour une largeur totale de 994px.

35 colonnes

Largeur fixe

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.

16 colonnes

Largeur fixe

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.

12, 16 ou 24 colonnes

Largeur fixe

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.

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.

Nombre de colonne au choix,

Largeur fixe, fluide ou élastique

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.

12 colonnes

Largeur élastique

hartija

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

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.

Largeur fluide

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.

Largeur fixe, fluide ou élastique

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.

Largeur fixe

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 !