L’ajout des classes CSS pour spécifier la largeur des colonnes dans le code HTML est le lot des frameworks CSS qui proposent tous un mécanisme pour créer une grille de mise en page. Dans leur très grande majorité, ces frameworks ont besoin d’une classe pour la première colonne (.first pour The Simpler Grid) ou la dernière colonne (.last pour Blueprint CSS) voire pour la première et la dernière colonne (.alpha et .omega pour 960 Grid System) pour annuler les marges droites et/ou gauches attribuées par avance aux colonnes. →
Archives des tags : blueprint
Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
Mon comparatif entre 960 Grid System et Blueprint CSS m’a permis de faire le point sur les fonctionnalités que l’on retrouve dans un framework CSS, en mettant en lumière leurs avantages et inconvénients respectifs. Tout naturellement, j’ai voulu les mélanger pour ne garder que le meilleur. Pour faire bonne mesure, j’ai ajouté The Simpler Grid découvert récemment que j’ai ajouté à ma réflexion pour créer un espèce de The Blue «940» Grid Simpler. J’envisage d’utiliser ce système de grille simple et efficace en complément du concentré de bonnes pratiques HTML5 Boilerplate. →
PXtoEM : Conversion Pixel — EM
PXtoEM est un outil simple et pratique créé par Brian Cray qui permet de connaitre les correspondances entre les tailles de polices de caractère exprimées en pixels avec les autres unités que l’on rencontre sur le web comme les EM’s, les pourcentages ou les points. Cette dernière unité, plus particulièrement utilisé dans les documents destinés à l’impression, trouvera à s’exprimer dans votre feuille de style destinée à l’impression. →
Frameworks CSS — Blueprint vs 960 Grid System
Blueprint et 960 Grid System sont deux frameworks CSS que j’ai utilisés parmi les 25 que j’ai recensés et survolés dans Choisir un framework CSS. J’ai ainsi pu me faire une idée plus précise de leurs qualités respectives. Je ne me suis pas attardé sur les aspects typographiques — même s’ils ont leur importance : j’ai préféré faire l’analyse du système de grille de mise en page (grid.css et 960.css). Pourquoi comparer ces deux frameworks ? Tout simplement parce qu’ils proposent pratiquement les mêmes «fonctionnalités» avec quelques différences dans la mise en oeuvre. Après une rapide introduction sur Blueprint et 960 Grid System, vous trouverez dans la suite de cet article une comparaison et une explication de code. →
Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.
Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière, Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML. →