Création d’une page à 3 colonnes contenant des éléments flexibles

Le but de cet exercice est de créer un design de page complexe en réutilisant le maximum de concepts vus jusqu’ici : éléments structurants, flexbox, responsive design, grilles, etc. afin de voir une dernière fois comment les différentes notions vues jusqu’ici peuvent fonctionner ensemble en pratique.

Je vous propose donc de créer à nouveau une page complète qui va suivre deux dispositions différentes selon qu’elle soit affichée sur petits écrans (sur mobile) ou sur un écran de bureau.

Comme nous en avons désormais l’habitude, nous allons commencer par créer la version mobile de la page qui sera la version standard puis utiliserons les Media Queries pour créer une disposition différente pour l’affichage sur bureau.

La page va contenir les éléments suivants :

  • 1 en-tête ou header qui va comprendre un menu ;
  • 4 blocs de type aside ;
  • 1 bloc de contenu de type article qui contiendra lui-même une structure complète ;
  • 1pied de page ou footer.

Notre page suivra un design vertical avec une seule colonne pour l’affichage sur mobile et un design sur 3 colonnes pour l’affichage sur bureau.

 

Structure HTML de notre page

Comme d’habitude, commençons avec la structure HTML de notre page et notamment avec la structure minimale d’une page HTML et sans oublier la meta name="viewport".

Exercice de création d'une page avec CSS grid et flexbox head HTML

Ensuite, nous allons ajouter un titre principal dans notre page et récupérer la structure du menu créé précédemment qui va très bien nous convenir. Nous allons placer le menu (mais pas le titre) dans un élément structurant header.

Exercice de création d'une page avec CSS grid et flexbox header et nav HTML

Sous le header, nous allons ajouter nos quatre éléments aside et notre élément article et allons placer tout cela dans un élément section.

Notre élément article va lui-même contenir un header, un menu de navigation interne, un corps qu’on va à nouveau placer dans un élément article et un footer.

Exercice de création d'une page avec CSS grid et flexbox section HTML

Finalement, nous allons ajouter notre élément footer sous notre élément section.

Exercice de création d'une page avec CSS grid et flexbox footer HTML

Pour cette partie HTML, nous n’allons pas nous attarder sur le contenu comme on a pu le faire dans l’exercice de création d’un CV puisque ce n’est pas ce qui compte ici. Ce qui nous importe ici va être de créer des dispositions différentes. Libre à vous ensuite de placer le contenu que vous voulez dans les différents blocs HTML et de le mettre en forme !

 

Mise en forme CSS de notre page version mobile

Notre page en version mobile ne va posséder qu’une seule colonne. Les différents éléments vont donc être disposés selon un seul axe. Dans cette situation, on préfèrera utiliser le modèle des boites flexibles plutôt que les grilles.

Commençons déjà par notre traditionnel reset CSS et par ajouter quelques styles globaux.

Exercice de création d'une page avec CSS grid et flexbox reset CSS

Ensuite, nous allons reprendre le code de notre menu créé précédemment et allons faire quelques ajustements.

Tout d’abord, étant donné que notre élément nav est désormais dans un élément header, nous allons plutôt appliquer la position : sticky au header afin que le menu continue à rester collé lorsqu’on défile dans la page.

Nous allons également ici modifier les sélecteurs contenant nav en préférant l’écriture body > header > nav pour bien différencier les styles de notre menu de navigation principal et celui interne à notre élément article.

Exercice de création d'une page avec CSS grid et flexbox styles menu mobile

Voilà tout pour les ajustements relatifs au menu. Passons maintenant au corps de page qui va utiliser le modèle des boites flexibles.

Ici, nous allons déjà commencer par appliquer un display : flex et un flex-flow : column wrap à notre élément section class="conteneur" pour obtenir une orientation en colonne et transformer ses enfants directs en éléments flexibles.

Exercice de création d'une page avec CSS grid et flexbox styles section mobile

Ensuite, nous allons simplement nous contenter d’ajouter une couleur de fond et une hauteur minimale à nos différents éléments aside.

Exercice de création d'une page avec CSS grid et flexbox styles aside mobile

On va maintenant mettre en forme notre élément article class="g3 sousconteneur". Nous allons déjà transformer cet élément en conteneur flexible et allons à nouveau choisir l’axe vertical comme axe principal.

On choisit d’afficher la navigation interne de l’article en ligne. Pour cela, on applique à nouveau un display : flex à notre élément de liste ul qui fait office de navigation et on choisit cette fois-ci l’axe horizontal comme axe principal. On espace régulièrement les éléments dans l’axe principal avec justify-content: space-around.

Exercice de création d'une page avec CSS grid et flexbox styles article mobile

Finalement, on applique une mise en forme très basique à notre footer principal qui ne va nous servir ici qu’à afficher une notice de copyright.

Exercice de création d'une page avec CSS grid et flexbox styles footer mobile

Voilà tout pour la partie mobile. Passons maintenant à la version bureau sur trois colonnes de notre page.

Exemple page HTML avec display grid et flexbox CSS

 

Mise en forme CSS de notre page version bureau

Pour la version bureau de notre page, nous allons vouloir positionner et aligner les éléments sur les deux axes. Nous allons donc préférer l’utilisation des grilles au modèle des boites flexibles pour les blocs de la page.

Nous utiliserons cependant également le flexbox à l’intérieur de certains blocs pour créer des éléments de grille flexibles.

Commençons déjà par définir une règle @media screen and (min-width: 980px) et par remplacer les sélecteurs de notre menu principal nav comme précédemment par body > header > nav.

Styles CSS menu desktop page HTML avec grille et flexbox

Ensuite, nous allons cette fois-ci appliquer un display : grid à notre élément section class="conteneur". On va donc ici créer une grille à trois colonnes avec une colonne centrale deux fois plus large que les colonnes gauche et droite. Notre grille va également posséder deux rangées qui devront faire à minima 300px de haut.

Version desktop section de page HTML avec grille et flexbox

On va ensuite positionner nos différents éléments dans notre grille. On va ici vouloir que l’élément article occupe toute la colonne centrale et allons positionner les éléments aside de chaque côté.

Version desktop partie aside et article de page HTML avec grille et flexbox

Et voilà tout ! Notre élément article est toujours un conteneur flexible et les propriétés définies pour l’affichage mobile s’appliquent toujours ici et nous conviennent très bien pour l’affichage sur bureau. Pas besoin d’aller plus loin donc.

Exemple page HTML avec display grid et flexbox CSS version desktop

Nous avons donc créé une page totalement responsive et avec une structure d’affichage complexe en utilisant certaines des notions les plus récentes du HTML et du CSS !

See the Pen Cours HTML CSS 16.5.1 by Pierre (@pierregiraud) on CodePen.

See the Pen Cours HTML CSS 16.5.1 by Pierre (@pierregiraud) on CodePen.

See the Pen Cours HTML CSS 16.5.1 by Pierre (@pierregiraud) on CodePen.

Laisser un commentaire