HTML & CSS

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.

J’importe le fichier 940.css dans H5BP lors de la mise en place du zoning des pages web. Lorsque cette étape est validée, je fais le ménage dans le code HTML en supprimant les classes inhérentes au système de grille pour mettre les déclarations appropriées dans la feuille de style. En effet, 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. CSS avancées — Vers HTML5 et CSS3, page 72. (1).

C’est ainsi que  :

<div id="logo" class="first span-6">

devient :

<div id="logo">
#logo {
    position: relative;
    float: left;
    width: 220px;
    clear: left;
}

Cela dit, si le site comporte un grand nombre de gabarits différents et/ou si ces gabarits sont susceptibles de changer dynamiquement selon le contexte, il peut être judicieux de garder les classes de la grille dans le code HTML pour moduler le colonage en jouant uniquement sur les classes .span-x. En outre, il est facile de cibler le premier élément enfant en CSS ou en Javascript pour ajouter une classe .first. A cet égard, la prise en charge plus large de la pseudo-classe :first-child (à partir de IE7) par rapport à :last-child (à partir de IE9) milite en faveur de l’introduction de The Simpler Grid dans l’affaire (cf. Compatibilité CSS et Internet Explorer).

Système de grille sur mesure

Suite au comparatif 960.gs vs. Blueprint, j’ai décidé de fusionner les deux frameworks en faisait le minimum de modifications pour obtenir :

  1. Le système de marge unique à droite proposé par Blueprint pour créer les gouttières entre les colonnes. L’ajout de la class `.last` est déjà un tue-l’amour de l’intégration, alors ne parlons pas des classes `.alpha` et `.omega` de 960 Grid System.
  2. Le placement des colonnes dans la page indépendamment de leur position dans le code proposé par 960 Grid System avec des classes `.push` et `.pull` plus concises grâce à la déclaration `position: relative;` sur chaque colonne.
  3. En chemin, j’ai été également tenté par The Simpler CSS Grid qui reprend le meilleur de 960 Grid System et de Blueprint CSS tout en diminuant légèrement le nombre de déclarations pour parvenir au même résultat.
Mis en place par Nick La de Webdesigner Wall (@nickla), The Grid Simpler revisite les frameworks CSS Blueprint et 960.gs
The Grid Simpler : une grille simple et souple

Contrairement à Blueprint, The Simpler Grid place la gouttière à gauche des colonnes. La classe .last est remplacée par .first, ce qui oblige par ailleurs à modifier les classes .border et .colborder dans la feuille de style pour créer des bordures à gauche des colonnes et non plus à droite. Ceci peut éventuellement être un problème (ou un avantage) selon votre maquette et la hauteur respective des zones situées de part et d’autre de la bordure. Selon le cas, la bordure peut suivre la hauteur de votre sidebar ou de votre zone de contenu.

Dans le code HTML, il faut aussi supprimer les classes .last et ajouter les classes .first en conséquence, sans oublier de modifier l’emplacement des classes .border et .colborder.

J’ai encore un peu de mal à me représenter cette gouttière à gauche des colonnes plutôt qu’à droite, certainement en raison des habitudes liées au sens de lecture mais je m’accroche 😉

The Blue «940» Grid Simpler

Après quelques tentatives aussi burlesques qu’inutiles pour proposer ma propre nomenclature pour le nom des différentes classes, j’ai conservé les intitulés de Blueprint qui permettent de profiter des générateurs de grilles disponibles sur le marché, comme l’excellente application Air Boks pour modifier plus rapidement le pas de la grille (il suffira de copier-coller les déclaration contenant des largeurs).

En ce qui concerne la grille elle-même, 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.

Elément de base pour afficher une grille en background

Tout cela nous donne une largeur de 940 pixels. Il s’agit de la largeur utile disponible dans 960 Grid System une fois que l’on a retranché les marges de 10 pixels à droite et à gauche. Pour retrouver ces marges — pour mettre une image en background, un dégradé CSS3 ou un simple aplat de couleur, par exemple –, il suffit d’indiquer une largeur de 960 pixels sur la balise body qui servira ainsi de container, and the cat’s in the bag!

Astuce : l’excellent http://griddle.it permet de créer l’image de votre grille personnalisée à la volée en ajoutant la largeur, le nombre de colonnes et la largeur de la gouttière à la fin de l’url comme http://griddle.it/940-24-20?vertical=20 ou http://griddle.it/940-12-20?vertical=20 par exemple.

Pour tester The Blue «940» Grid Simpler, je me suis basé sur les exemples de pages et de grilles disponibles dans les démonstrations de Blueprint CSS en adaptant le code source en conséquence.

Clearfix ?

Si vous n’utilisez pas HTML5 Boilerplate et si vous avez besoin d’un clearfix (la classe .first peut ne pas suffire), ajoutez-donc quelques lignes à la fin de votre feuille de style principale et la classe clearfix sur les boites contenant des éléments span pour rétablir le flux :

.clearfix:before,
.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

(1) Petit clin-d’œil au dernier livre de Raphaël Goetter que je remercie au passage pour la citation en attendant une fiche de lecture à venir concernant cet excellent ouvrage que je vous recommande d’acheter avant que les stocks soient épuisés !

Publié le par Bruno Bichet