Grille CSS pour petites vignettes

Contrainte par la taille des vignettes

Le site sur lequel je travaille est essentiellement constitué de galeries d’images, de tailles différentes. Les plus petites vignettes ont des dimensions imposées de 120 x 90 pixels parce qu’elles sont fournies par un service externe, thumbshots.com. Si je ne peux les agrandir sans perdre en qualité, il est bien sûr techniquement possible de les réduire pour les adapter à une grille existante, mais ce n’est pas souhaitable, car elles sont déjà trop petites pour ce qu’elles représentent. Ces vignettes constituent donc le contenu déterminant, le reste pouvant être redimensionné au besoin.

Mon module de base est donc de 120 x 90 pixels, fixe. J’en déduis hâtivement que je ferais un site à colonnes de 120px de large minimum, nécessairement, avec une gouttière confortable, à ajuster. Premier problème : aucun des générateurs de grilles CSS que j’essaye ne propose cette largeur de colonne. Au passage, je ne comprends pas la logique de la plupart de ces générateurs, qui semblent reposer davantage sur la largeur de page désirée que sur les contraintes dimensionnelles des contenus.

Or je me fiche complètement de la largeur finale de ma composition ! Ce qui m’intéresse est de savoir comment y disposer harmonieusement mes vignettes, les petites, mais aussi des grandes et des moyennes. La largeur de page est à déduire de cet agencement et non l’inverse : c’est une conséquence, non un déterminant !

Aligner six vignettes…

En faisant des essais d’affichage d’un lot de vignettes à l’écran, je remarque que six s’alignent agréablement dans un écran standard, avec une gouttière de 20 pixels environ…

Je n’obtiens évidemment pas la même largeur selon que je compte ou pas la dernière gouttière. C’est a priori plus joli sans :

Mais comme je prévois de fluidifier ma grille pour qu’elle s’adapte à différentes largeurs d’écran, je préfère me simplifier la vie, en affectant la même gouttière à chaque module, y compris au dernier, ainsi qu’une marge basse équivalente, afin que ceux-ci puissent « tomber à la ligne » en restant toujours pareillement espacés quelque soit la largeur de page :

Dans ce cas, il faut ajouter une marge gauche préalable pour recentrer la composition :

Et en ajoutant une bordure aux vignettes ? Si je leur affecte un cadre de 5px d’épaisseur, comme c’est mon intention, tout se décale et la largeur de la composition augmente sensiblement :

Ces calculs m’agacent, car tout peut changer en fonction des autres contenus : il me faudra peut-être augmenter ou réduire la gouttière pour adapter la grille au reste… Bref, voici comment mon problème se pose mathématiquement :

Joli, n’est-ce pas ? Mais mon équation a trop d’inconnues ! Pour la résoudre, je continue à tâtonner empiriquement…

Taille des visuels

C’est en dessinant laborieusement dans un logiciel graphique que je trouverais le reste. En grossissant deux fois ma vignette initiale sur la grille, je détermine la taille des images des autres galeries. Il s’agit de captures d’écran, donc proportionnelles à une fenêtre standard de 1024 pixels de large :

Avec ça, je peux faire des alignements de 6 petites vignettes (120 x 90), 3 moyennes (270 x 203) ou 2 grosses (570 x 428). C’est très bien.

Mais j’ai besoin de pouvoir en aligner, non pas 6, 3 ou 2, mais quatre ! Il faut donc que je trouve laquelle des largeurs d’écran précédentes est divisible en 4, avec la même gouttière et le même encadrement de 5 pixels :

Ma page mesurera donc 900 pixels de large — sans compter la gouttière préalable, soit 920px hors tout. Et voici les dimensions d’autres visuels adaptés à cette grille et toujours proportionnels :

• 195 x 146
• 430 x 323
• 655 x 491
• 1024 x 768

Rythme vertical

J’ai par ailleurs choisi de travailler la typo au naturel, c’est-à-dire en 100 % par défaut, qui s’affiche ici en 16px, avec un interlignage agréable de 1.5em, soit 24px, ce qui n’est pas égal à ma marge basse de 20px. Pour préserver un rythme vertical constant, je suis tentée de réduire l’interlignage à 20px tout rond, de la même valeur que la gouttière, soit 1.25em, mais cela me semble amoindrir la lisibilité. Je n’y toucherais finalement pas.

Grille CSS

Première version : 6 colonnes

Comme il s’agit avant tout de constituer des galeries d’images, il me plaît de n’avoir qu’à changer le sélecteur parent pour changer le rythme de la galerie. Chaque item de la galerie sera ciblé par .unit, et sa largeur sera déterminée par le parent : .div6 lorsqu’il s’agit de diviser par 6, pour faire une série de 6 vignettes et .div2 pour une série de deux. Le code est finalement assez simple :

/* Afficher la grille */
.grid { background: url(img/bg/grid.png); width: 900px; padding-left: 20px; }

/* Module */
.unit { float: left; display: block; margin: 0 20px 20px 0; }

/* Series */
.div1  .unit { float:  none; }
.div2  .unit { width: 430px; }
.div3  .unit { width: 280px; }
.div4  .unit { width: 205px; }
.div5  .unit { width: 160px; }
.div6  .unit { width: 130px; }
.div12 .unit { width:  55px; }

Et s’applique dans la page HTML comme suit :

<div class="div6">
  <ul>
    <li class="unit">...</li>
  </ul>
</div>

Mais cela n’est pas très pratique pour faire des mises en pages moins symétriques, comme sur la page d’accueil, où je veux un grand visuel, suivi de 2 colonnes de 3 vignettes chacune… J’ai besoin de sélecteurs spécifiques, que j’appelle d’abord .size3of6, etc.

Seconde version : 12 colonnes

En cours de route, je me rends compte que ma grille est encore divisible. Elle repose sur 6 colonnes, ce qui me suffit, mais chacune est divisible en deux, ce qui me sera peut-être utile ultérieurement. J’en suis donc à cette équation :

C’est-à-dire une grille de 12 colonnes de 55 px de large, avec une gouttière de 20 px, et toujours mes images proportionnelles à une capture d’écran 1024 x 768, avec une bordure de 5 px, la plus petite mesurant 45 x 34 pixels. C’est beau !

Je recommence tous mes calculs et décide de nommer mes sélecteurs avec le nombre de colonnes contenues, indépendamment du parent, c’est-à-dire :

.unit1  { width:  55px; }
.unit2  { width: 130px; }
.unit3  { width: 205px; }
.unit4  { width: 280px; }
.unit5  { width: 355px; }
.unit6  { width: 430px; }
.unit7  { width: 505px; }
.unit8  { width: 580px; }
.unit9  { width: 655px; }
.unit10 { width: 730px; }
.unit11 { width: 805px; }
.unit12 { float:  none; }

C’est donc ce code qui est en usage sur le site de l’Herbier.

Générateurs de grilles

Je réalise que je peux enfin — maintenant que j’ai fais tous ces essais et calculs — utiliser un générateur de grille CSS. J’en essaye plusieurs, pour comparer le code, dont : Variable Grid System et Blueprint Grid CSS Generator. Ce que j’ai codé correspond à ce que produit le générateur issu de 960 Grid System, yihou ! Seule la nomenclature diffère : .grid_8 .prefix_11 .suffix_0. Blueprint est plus complet, avec ses .span-5 .append-4 .prepend-7 .pull-4, mais je n’ai pas besoin de tout ça.

Je découvre Grid Designer, un outil que j’aurais pu utiliser dès le début, non pour générer le CSS, mais pour calculer les différentes largeurs :

Fluidifier : modulaire plutôt qu’élastique

Reste à fluidifier. Je ne comprends pas l’intérêt des grilles élastiques, dons les largeurs sont exprimées en unité relative, en pourcentage : pourquoi réduire la largeur du colonage, indépendamment du texte qu’il contient, au détriment possible de la lisibilité. Que deviennent les visuels, dont la largeur reste fixe ? Ça me semble d’un maniement plutôt délicat en plus d’un faible intérêt. Mais surtout, ce n’est pas à la largeur de l’écran qu’il faut ajuster la largeur de colonne, mais au contenu ! Je préfère laisser les éléments, modulaires, passer à la ligne lorsque la fenêtre est réduite.

Gain de temps

Avec cette grille CSS, il m’aura fallu moins d’une heure pour monter toutes les pages de mon site ! et le résultat est plus harmonieux. J’ai certes pris beaucoup de temps à calculer cette grille, mais je dispose maintenant un outil qui me fait gagner un temps colossal dans la fabrication des pages.