940.css version fluide — Grille de mise en page en pourcentage

La grille de mise en page 940.css — issue de la technique Calculer une grille de mise en page « typo » avec le nombre d’Or — existe désormais en version fluide avec des valeurs exprimées en pourcentage à la place des pixels. J’ai choisi des pourcentages permettant 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.

Rapido

• Télécharger 940-fluid.css,
• Voir un exemple de page de contenu,
• Voir un exemple de grille (placement des blocs),
• 940.css en version fixe.

Le fichier

Pixels vs Pourcentage

Le passage des pourcentages aux pixels ne s’effectue pas sans douleur : il est difficile en effet d’imbriquer des blocs possédant une largeur en pourcentage les uns dans les autres, sans effet de bord. Dans le contexte des grilles de mise en page, les pourcentages de pourcentages donnent des valeurs qui diminuent lorsque les blocs sont imbriqués.

Imbriquer les blocs

Pour palier cet inconvénient, j’ai ajouté des classes spécifiques pour diviser des blocs de manière égale lorsqu’ils sont imbriqués. Voici une page composée d’une zone de contenu principale divisée en deux blocs, et d’une barre latérale.

.container (24 colonnes)
    .span-16
        .span-8
        .span-8
    .span-8

Problème

Dans un monde «fixe», les .span-x ont toujours la même largeur, qu’ils s’appliquent à des balises imbriquées, ou non. En revanche, dans un contexte en pourcentage, les deux .span-8 enfants de .span-16 (initialement réglés sur environ 32% de la largeur totale) se transforment en 32% d’environ 66% (.span-16), ce qui réduit d’autant leur largeur. Nous voilà bien ^^

Solution

Sachant que le nombre de colonne totale est de 24, il suffit de trouver les diviseurs qui vont bien et de les utiliser pour obtenir un nombre de blocs au lieu de chercher un nombre de colonnes.

.span-half, .span-12 {} // Deux blocs
.span-third, .span-8 {} // Trois blocs
.span-quarter, .span-6 {} // Quatre blocs
.span-sixth, .span-4 {} // Six blocs
.span-eighth, .span-3 {} // Huit blocs
.span-twelfth, .span-2 {} // Douze blocs

Ainsi, dans l’exemple donné plus haut, il suffit de remplacer les .span-8 imbriqués par deux .span-12 (ou .span-half) pour diviser le .span-16 en deux, soit :

.container (24 colonnes)
    .span-16
        .span-half
        .span-half
    .span-8

Blocs de largeur inégale

Cette technique n’empêche pas d’obtenir des blocs imbriqués de largeur inégale ; il suffit de tâtonner un peu avec les pourcentages.

C’est ainsi que :

.container (24 colonnes)
    .span-16
        .span-12
        .span-4
    .span-8

Devient :

.container (24 colonnes)
    .span-16
        .span-16
        .span-third (ou .span-8)
    .span-8

Vous l’aurez compris, les classes de type .span-third ou .span-halfpeuvent tout à fait être remplacées par leurs équivalents chiffrés, mais je trouve qu’elles apportent une meilleure lisibilité en diminuant les risques de confusion : il suffit de voir un .span-half ou .span-eighth dans le code pour savoir immédiatement que les valeurs des span-x alentour sont des valeurs relatives au bloc parent.

Un bémol toutefois en ce qui concerne la largeur de la gouttière entre les blocs imbriqués : elle est également réduite et passe de 20px pour les blocs de premier niveau, à 12.3333px (en valeur calculée) pour les deux blocs imbriqués.

D’un point de vue «typographique», ce n’est pas très gênant, car il n’y a rien de choquant à ce que des blocs de largeur réduite soit séparés par une gouttière moins importante que les blocs principaux de la page.

Conclusion

Je ne l’ai pas testé cette grille fluide dans toutes les configurations ; elle est encore en version bêta. J’ai laissé des valeurs de pourcentage avec plus de 30 chiffres après la virgule pour laisser aux navigateurs le soin faire les arrondis «au mieux».

Pour éviter d’autres problèmes de calcul, j’ai supprimé les classes .border et .colborder qui permettaient d’afficher des bordure à la gauche des blocs : les 1px d’épaisseur des bordures posaient des problèmes en renvoyant les blocs sur la ligne suivante lorsque le redimensionnement de la page arrivait à un certain niveau.

A vos tests !