Les techniques modernes de conception web mises en … · à utiliser les bases de certains frameworks CSS qui permettent ... Le débordement du contenu

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web

ISBN

: 97

8-2-

409-

0059

0-9

26,5

0 €

Les techniques de mise en page des sites web ont beaucoup évolué ces dernières années avec l’utilisation du Responsive Web Design et des requêtes de média ; récemment, de nou-veaux modules du W3C ont fait leur apparition pour concevoir des mises en page flexibles, en multi colonnes et en grille.

Ce livre débute par une présentation des différents problèmes de compatibilité qui subsistent aujourd’hui. Nous ferons ensuite un rappel sur les méthodes de mise en page "classiques" et leur limitation avant d’introduire la technique de mise en page basée sur l’utilisation des tableaux et des CSS3.

Le Responsive Web Design est essentiellement basé sur les requêtes de média CSS3, les Media Queries : nous apprendrons à maîtriser cette technique à l’aide de nombreux exemples. Nous verrons ensuite les différents aspects de la mise en page res-ponsive : les grilles, les images et la typographie. En nous ba-sant sur de nombreux exemples, nous détaillerons les nouveaux modules du W3C : la mise en page flexible (module Flexible Box Layout ou Flexbox), la mise en page en multi colonnes (module Multi-column Layout) et la mise en page en grille (Grid Layout).

Pour nous aider à travailler plus efficacement, nous apprendrons à utiliser les bases de certains frameworks CSS qui permettent d’utiliser toute une série de composants HTML5/CSS3 pour concevoir efficacement des sites responsive.

Enfin nous terminerons en vous présentant les futures tech-niques avancées de mise en page qui sont en cours d’étude actuellement par le W3C.

Pour plus d’informations :

Resp

onsi

ve W

eb D

esig

n, m

ises

en

page

et g

rille

s

Christophe AUBRY

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web

Responsable pédagogique dans un centre de formation et formateur sur les techno-logies Web et les Arts graphiques pendant plus de quinze ans, Christophe Aubry est aujourd’hui dirigeant de la société net-Plume spécialisée dans la rédaction péda-gogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Dreamweaver, WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites Web, en effectuant une veille tech-nologique régulière et en intervenant dans de nombreux forums.

Christophe AUBRY

Téléchargementwww.editions-eni.fr.fr

sur www.editions-eni.fr : b Code source des exemplesb Webographie

2e édition

Nouvelle édition

Table des matières 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .©

Edi

tions

EN

I - A

ll rig

hts r

eser

ved

Chapitre 1 : IntroductionA. Le design Web aujourd'hui . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11B. Le Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11C. Les approches dans la conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12D. Les objectifs du livre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13E. Les outils de l’intégrateur web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132. Mozilla Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133. Google Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144. Apple Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155. Microsoft Internet Explorer et Edge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

F. Télécharger les exemples. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Chapitre 2 : Des solutions pour la compatibilitéA. La disparité des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21B. Pour une meilleure compatibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22C. Le rendu initial des navigateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22D. Normalize.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

1. Le projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232. Télécharger Normalize.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233. Installer Normalize.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

E. Le HTML5 et html5shiv.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262. Le fichier d'exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263. La librairie html5shiv.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

F. Les requêtes de média et respond.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302. Le fichier d'exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303. La librairie respond.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

G. Les solutions de rechange et Modernizr.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332. Télécharger Modernizr. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343. Créer une page d'exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364. Installer et lier le script Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375. Mettre en action Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386. Utiliser les classes de Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

H. Les règles @supports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402. Utiliser les règles @supports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413. Les opérateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Responsive Web Design, mises en page et grilles2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapitre 3 : La mise en page classiqueA. Les designers et les intégrateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47B. Le modèle des boîtes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47C. Les marges des éléments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48D. L'affichage des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48E. L'affichage dans le flux courant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49F. L'affichage en position absolue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50G. L'affichage en position fixée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51H. L'affichage en position relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53I. Utiliser l'affichage en position relative et absolue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53J. L'affichage des boîtes flottantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

1. Le positionnement flottant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552. Placer des boîtes côte à côte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573. Interdire le flottement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584. Un exemple avec quatre boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595. Une mise en page simpliste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606. Conclusion sur la mise en page en élément flottant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Chapitre 4 : La mise en page à l'aide des tableauxA. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71B. La propriété display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71C. Une mise en page simple avec un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73D. La largeur d'affichage du tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74E. Les éléments anonymes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74F. D'autres éléments pour les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

1. Les paragraphes en cellule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 752. Les listes en tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

G. L'affichage des lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77H. Définir la largeur des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

1. Les largeurs fixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782. Les largeurs en pourcentage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

I. Une mise en page avec un tableau plus structuré . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80J. Les autres propriétés d'affichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

1. La propriété table-layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 822. La propriété border-collapse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 833. La propriété border-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 864. La propriété empty-cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 875. La propriété caption-side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

K. L'alignement vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91L. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

Chapitre 5 : Les requêtes de médiaA. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95B. Les origines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95C. Utiliser les requêtes de média . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95D. La syntaxe des requêtes de média . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96E. Les fonctionnalités à tester . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97F. Où placer les requêtes de média. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98G. La taille des écrans des mobiles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99H. La notion de viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100I. Un exemple très simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104

1. La maquette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1042. Le code HTML et CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105

J. Les propriétés CSS pour des images responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1111. Les images de premier plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1112. Les images d'arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117

K. Adapter les dimensions au viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123L. Une mise en page fluide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126

1. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1262. La mise en page fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1263. La mise en page fluide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1304. La largeur fluide des autres éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1305. Les largeurs des images fluides. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1326. Afficher et redimensionner la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1337. Le code complet de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134

M. Le script Response.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1361. Utiliser le JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1362. Télécharger les JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1363. Les liaisons aux JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1384. Préparer les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1385. Le code de la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1396. Le fonctionnement du script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1407. Optimiser les légendes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1408. Le code complet de la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142

N. Les propositions d'avenir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1431. Les nouveaux attributs pour <img> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1432. L'attribut srcset pour des tailles d'image fixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1433. L'attribut srcset pour des largeurs disponibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1464. L'attribut size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1475. Les nouveaux éléments <picture> et <source> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148


O. La typographie responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1521. L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1522. Les unités utilisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1523. L'unité em et la cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1534. L'unité rem et la cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1545. La typographie responsive et l'unité rem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1556. La typographie responsive et les polices de caractère . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1567. Les unités liées au viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157

P. Exemples de sites avec des requêtes de média . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158

Chapitre 6 : La mise en page multicolonne en CSS3A. Le module Multi-column Layout du W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163B. La compatibilité des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164C. La conception en colonnes multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164

1. Le nombre de colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1642. La largeur des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1653. La syntaxe courte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166

D. L'espace entre les colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1671. La gouttière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1672. Le filet de séparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168

E. La justification du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170F. Les sauts de colonne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171G. Les éléments transversaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175H. La gestion du texte dans les colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176

1. Le remplissage des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1762. Le contenu trop large . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1773. Le débordement du contenu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179

I. Le multicolonnage et le Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1801. Les requêtes de média . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1802. Une mise en page en colonnes multiples responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1803. Un menu responsive en colonnes multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183

Chapitre 7 : La mise en page flexible en CSS3A. Le module Flexible Box Layout du W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189B. La compatibilité des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189C. La conception de mise en page flexible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190D. Le conteneur flexible. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190

1. La définition du contexte flexible. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1902. La distribution des items flexibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1913. Le passage à la ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

4. La syntaxe courte pour la distribution et le passage à la ligne . . . . . . . . . . . . . . . . . . . . . . . .1965. La justification horizontale dans les lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1966. La justification verticale dans les colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1977. L'alignement vertical dans les lignes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1988. L'alignement horizontal dans les colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2019. Le passage à la ligne et l’alignement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202

E. Les items flexibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2041. Le contexte des items flexibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2042. Modifier l'ordre d'affichage des items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2053. L'alignement d'un item . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2064. L'agrandissement des items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2075. La réduction des items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2096. La largeur ou hauteur indicative. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2117. La syntaxe courte du redimensionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2128. Définir la taille fixe des items avec flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2129. Définir la taille flexible des items avec flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214

F. Des exemples de mises en page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2161. Une mise en page très simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2162. Une mise en page plus élaborée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2203. Placer un item toujours en bas de son conteneur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224

G. La mise en page flexible et le Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228

Chapitre 8 : La mise en page en grille CSS3A. Le module Grid Layout du W3C. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235B. La compatibilité des navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235

1. Les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2352. Forcer la reconnaissance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2363. Google Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2364. Mozilla Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2365. Apple Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .237

C. La terminologie de la grille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238D. La création d'une grille régulière. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .240

1. Les largeurs fixes des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2402. Les largeurs disponibles des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2413. Les largeurs relatives des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2434. Les largeurs automatiques des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2455. Les répétitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2476. Les hauteurs de rangées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247


E. Nommer les zones de la grille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2481. Nommer toutes les cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2482. Le cas des cellules vides. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2503. Nommer des zones de cellules horizontalement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2524. Nommer des zones de cellules verticalement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2545. Nommer les lignes en une grille simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2556. Nommer les lignes en une grille élaborée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259

F. La gestion des espaces de la grille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .262G. Les justifications et alignements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265

1. La justification dans les colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2652. L'alignement dans les rangées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2663. La justification et l'alignement dans les cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267

H. La justification et l'alignement dans le conteneur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2691. La justification horizontale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2692. L'alignement vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273

I. Le placement automatique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275

Chapitre 9 : Les grilles de mise en pageA. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279B. La grille Gridlex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279

1. Implémenter la grille. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2792. Les points de rupture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2803. Placer trois blocs dans la grille. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2804. Créer une grille responsive avec les blocs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2825. Placer les blocs dans la grille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2836. Créer une grille responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2847. Le positionnement automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2858. Les gouttières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2869. Une grille sur trois lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28610. Les autres fonctionnalités de Gridlex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288

C. La grille Grillade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2891. Implémenter la grille. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2892. Les points de rupture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2893. Une grille simple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2904. Insérer une gouttière . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2925. Dimensionner les blocs sur la grille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2926. Utiliser une grille multiligne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2937. Pousser un bloc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

D. La grille Simple Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2961. Implémenter la grille. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2962. Le point de rupture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2963. Une mise en page avec une seule ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2974. Une mise en page avec une plusieurs lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2985. La mise en page en colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2996. Décaler des blocs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3007. Des exceptions pour les smartphones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302

Chapitre 10 : Les frameworks CSSA. Utiliser les frameworks CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307B. Des frameworks CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307C. Le framework UIkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309

1. Utiliser UIkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3092. Télécharger le framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3113. Télécharger jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3124. Installer le framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3135. Créer une grille fluide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3146. Utiliser la grille fluide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3177. Utiliser la grille responsive d'UIkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3188. Créer une barre de navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3239. Créer un tableau mis en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324

D. Le framework Kube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3261. Utiliser Kube. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3262. Télécharger le framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3293. Installer le framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3294. Créer une grille flexible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3305. Exploiter une grille flexible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3336. Insérer un formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334

E. Le framework Material Design Lite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3371. Utiliser Material Design Lite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3372. Les templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3383. Les liaisons pour les composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3424. Utiliser les composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3445. Les styles CSS pour la typographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3456. Personnaliser les couleurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .346


Chapitre 11 : Le futur de la mise en pageA. Les modules du W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .351B. L'habillage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .351C. Les modèles de page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .351D. La mise en page des documents structurés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .352E. Les régions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355

Chapitre 9 : Les grilles de mise en page

A. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279B. La grille Gridlex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279C. La grille Grillade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289D. La grille Simple Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296


Chapitre 9 : Les grilles de mise en page©

Edi

tions

EN

I - A

ll rig

hts r

eser

ved

279. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapi tre 9 : Les g r i l l es d e m i se en page

Res pon si ve W eb D es i g n, m i ses en page et gr i l l esA. Les objectifsDans les chapitres précédents, nous avons vu les différentes techniques modernes pour créer desgrilles de mise en page élaborées et responsive. Plutôt que de partir de zéro, ex nihilo ou fromscratch comme disent les Anglo-Saxons, nous pouvons utiliser des grilles déjà conçues et prêtesà l'emploi. Cela nous permet de gagner du temps et ainsi d'avancer plus rapidement dans la réa-lisation de nos projets.

B. La grille Gridlex

1. Implémenter la grilleLa grille Gridlex est "Simple. Robust. Responsive. Flexible." selon son slogan. Voici son URL :http://gridlex.devlint.fr. Cette grille est basée sur le module Flexible Box Layout du W3C.

Pour implémenter Gridlex dans vos projets, vous pouvez lier chacune de vos pages à sa feuille destyle CSS minimisée, sur un serveur CDN :<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/

2.2.3/gridlex.min.css">

Ou<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/

libs/gridlex/2.2.3/gridlex.min.css">

L'autre solution consiste à télécharger l'archive du projet. Sur la page d'accueil du site, cliquez surle bouton Download (zip). Vous téléchargez une archive nommée gridlex-master.zip.


Dans l'archive décompressée, vous trouverez notamment :- un dossier nommé docs contenant des exemples et les feuilles de style CSS gridlex.css et gri-

dlex.min.css, cette dernière correspondant au fichier optimisé et minimisé pour la production.- un dossier nommé src dans lequel vous trouverez les styles CSS aux formats sass et less.

2. Les points de ruptureLa grille Gridlex définit plusieurs points de rupture pour avoir une grille responsive.- @media screen and (max-width: 80em) : pour les écrans ayant une largeur maximale

de 80 em. Le suffixe à utiliser dans les règles CSS est _lg, pour large.- @media screen and (max-width: 64em) : pour les écrans ayant une largeur maximale

de 64 em. Le suffixe à utiliser dans les règles CSS est _md, pour medium.- @media screen and (max-width: 48em) : pour les écrans ayant une largeur maximale

de 48 em. Le suffixe à utiliser dans les règles CSS est _sm, pour small.- @media screen and (max-width: 35.5em) : pour les écrans ayant une largeur maxi-

male de 35.5 em. Le suffixe à utiliser dans les règles CSS est _xs, pour extra-small.

3. Placer trois blocs dans la grilleLa grille de Gridlex est basée sur douze colonnes. Les lignes doivent utiliser la classe .grid-*.Le suffixe * indique le nombre de blocs souhaité. Si nous souhaitons avoir trois blocs, la classe àindiquer est donc grid-3. Les trois blocs seront chacun placés sur quatre colonnes :12 (colonnes de la grille) / 3 (blocs voulus) = 4 (colonnes pour chaque bloc).

Chaque bloc de la ligne doit utiliser la classe col.

Voici un exemple très simple d'une ligne comportant trois blocs :<!DOCTYPE html>

<html lang="fr">

<head>

<title>Gridlex</title>

<meta charset="UTF-8" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/

ajax/libs/gridlex/2.2.3/gridlex.min.css">

</head>

<body>

<div class="grid-3">

<div class="col">Donec sed odio dui...</div>

<div class="col">Maecenas sed diam eget...</div>

<div class="col">Integer posuere erat...</div>

</div>

</body>

</html>

Chapitre 9 : Les grilles de mise en page©

Edi

tions

EN

I - A

ll rig

hts r

eser

ved

281. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Voici l'affichage obtenu :

Sur un écran de largeur moindre, la largeur des blocs est réduite :

Notez que pour cet exemple, la grille n'est pas responsive.

Le fichier de cet exemple à télécharger est Chapitre-09/C09-B3.html.

Si vous créez plus de blocs dans la ligne qu'il n'y a de blocs déclarés dans la classe de la ligne, lesblocs supplémentaires iront à la ligne.

Dans cet exemple, nous déclarons trois blocs, mais il y en a quatre de créés dans la ligne :<div class="grid-3">




<div class="col">Aenean eu leo quam

</div>

Voici l'affichage obtenu :

Le quatrième bloc, celui en trop, passe automatiquement à la ligne suivante.


4. Créer une grille responsive avec les blocsNous reprenons ici l'exemple précédent, mais nous souhaitons avoir une grille responsive. Pourles écrans larges, nous avons trois blocs dans la ligne ; pour les écrans les plus petits, nous n'avonsqu'un seul bloc dans la ligne. Les trois blocs sont alors les uns sous les autres.

Pour ce faire, il suffit d'ajouter xs-1 à la classe précédente. Comme nous l'avons vu, xs indiquele point de rupture pour les écrans extra-small et 1 indique que nous souhaitons avoir unecolonne dans la ligne.

Les deux composantes du nom de la classe sont à séparer par le caractère underscore _. Voilà lenom de la classe à utiliser : class="grid-3_xs-1".

Voici la syntaxe complète :<div class="grid-3_xs-1">




</div>

L'affichage sur un grand écran est identique à l'exemple précédent. Voici l'affichage sur un écrande largeur très petite, sous le point de rupture :

Le fichier de cet exemple à télécharger est Chapitre-09/C09-B4.html.

Documents

Les techniques modernes de conception web mises en … · à utiliser les bases de certains frameworks CSS qui permettent ... Le débordement du contenu