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-half
peuvent 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 !
Les commentaires sont fermés.