La grille de mise en page de Foundation 6

Qu’est ce qu’une grille de mise en page?

Je reprends ce que nous avons publié dans un ancien article “Comprendre le concept de grille dans le webdesign“. une grille est une structure comprenant une série de lignes horizontales et verticales, utilisées pour organiser le contenu d’une page web.

Les grilles sont un élément essentiel en Webdesign, elle vous permet d’organiser harmonieusement le contenu présent sur vos pages.

La grille de Foundation 6

La grille de mise en page de Foundation utilise 12 colonnes par défaut, avec la possibilité de changer ce paramètre.

Les lignes utilisent des boîtes <div> avec la classe .row.

Dans chaque ligne, nous créons les blocs à y afficher avec des boîtes <div> utilisant des classes spécifiques selon l’alignement souhaité et le point de rupture voulu.

Exemple de disposition des blocs dans une grille de 12 colonnes

Exemple de disposition des blocs dans une grille de 12 colonnes

La syntaxe générale est : .[size]-[n]. Le préfixe [size] indique la taille d’écran ciblé et le suffixe [n] le nombre de colonnes sur lesquelles est aligné le bloc.

Exemples :

  • la classe .medium-7 indique que le bloc est aligné sur sept colonnes pour les écrans de taille moyenne et les écrans larges.
  • la classe .large-9 indique que le bloc est aligné sur neuf colonnes pour les écrans larges.
  • la classe .small-3 indique que le bloc est aligné sur trois colonnes pour les petits écrans, les écrans moyens et larges.

Le préfixe [size] peut etre remplacé par :

  • small pour les écrans plus larges que 0 pixel,
  • medium pour les écrans plus larges que 640 pixels,
  • large pour les écrans plus larges que 1024 pixels,
  • xlarge pour les écrans plus larges que 1200 pixels,
  • xxlarge pour les écrans plus larges que 1440 pixels.
Attention, si vous ne définissez une mise en page que pour les petits écrans, avec l’utilisation de small, cette mise en page va aussi s’appliquer à tous les écrans plus grands (moyens et larges). De même, si vous ne définissez la grille que pour les écrans larges, avec l’utilisation de large, les blocs vont s’aligner sur toute la largeur de la grille, pour les écrans plus petits (medium et small).

L’affichage multiligne dans Bootstrap 3

Dans les cours/tutos précédents, nous avons donné des exemples des blocs repartis sur 12 colonnes. Ainsi, l’ensemble du contenu se retrouve disposé sur une seule et même ligne.

Et si la somme des colonnes occupées par les éléments de la grille est supérieure à 12 ?

Dans ce cas, Bootstrap 3 affiche automatiquement les blocs sur plusieurs lignes. Pour illustrer ce concept, nous allons créer cinq zones que nous répartirons sur 20 colonnes :

Visionnons maintenant la page sur notre navigateur :

Affichage multiligne Bootstrap 3

Affichage multiligne Bootstrap 3

Les blocs sont automatiquement disposés sur deux lignes différentes afin de respecter les largeurs voulues.

Comprendre le concept de grille dans le webdesign

I – Qu’est ce qu’un système de grilles?

..une structure comprenant une série de lignes horizontales et verticales, utilisées pour organiser le contenu d’une page web.

Les grilles sont un élément essentiel en Webdesign, elle vous permet d’organiser harmonieusement le contenu présent sur vos pages.

Système de grille webdesign

Système de grille webdesign

Outre le fait de produire une mise page bien structurée, les grilles dans le webdesign servent d’armature pour organiser la page et son contenu et favorisent un travail plus rapide au niveau de l’intégration CSS.

II – La grille de Bootstrap 3:

Bootstap 3 découpe le corps de la page en une grille composée de lignes de 12 colonnes de largeur égale:

Grille Bootstrap 3

Grille Bootstrap 3

Pour mettre en forme le contenu de notre page, nous allons commencer par la déclaration d’une ligne (en utilisant la classe .row), puis nous y intégrerons notre contenu. celui-ci pourra être divisé en plusieurs blocs, chacun occupant un nombre de colonnes déterminé qui sert à définir sa largeur.

Bootstrap 3 propose quatre systèmes de grilles, chacun correspondant à un type d’écrans :

Grille Classes Type d’écran Taille d’écran
xs : extra small devices .col-xs-* Smartphone < 768 pixels
sm : small devices .col-sm-* Tablette < 992 pixels
md : medium devices .col-md-* Écran de bureau < 1 200 pixels
lg : large devices .col-lg-* Grand écran de bureau ⩾ 1 200 pixels

L’astérisque correspondant au nombre de colonnes occupé par chaque élément.

2.1 – Exemple d’utilisation :

Nous allons créer le squelette d’une pageweb composée d’une ligne divisée en deux éléments: une partie centrale occupant 8 colonnes et une autre occupant 4 colonnes.
Commençons par la création d’une ligne à l’aide la classe .row. Et au sein de cette ligne nous ajouterons le premier élément (occupant 8 colonnes) en utilisant la classe .col-md-8 et pour le deuxième élément nous l’ajouterons aussi à l’aide de la classe .col-md-4.

Exemple d'illustration - Grille Bootstrap 3

Exemple d’illustration – Grille Bootstrap 3

2.2 – Code Source :

Grille bootstrap 3 exemple 1

Grille Bootstrap – Une ligne et deux colonnes

2.3 – Explication du code:

Les balises <meta>, <link> et <div class="container"> ont été expliqué dans une autre leçon : première page HTML avec Bootstrap 3 .

<div class="row"> : permet la création d’une première ligne
<div class="col-md-8"> <h2>Zone principale</h2> </div> : création de la zone principale de notre page web, il occupe 8 colonnes de la grille destinée aux écrans des ordinateurs de bureau classiques (md).
<div> <h2>Widgets</h2> </div> : Création de la zone secondaire occupant 4 colonnes de la grille .

Comme nous avons utilisé le jeu de classe .col-md-*, la disposition 8 colonnes/4 colonnes s’affiche correctement sur tout écran dont la largeur est supérieure à 992 pixels.

Lorsque nous visionnerons le contenu de cette page sur un Smartphone ou une Tablette,  Bootstrap 3 repositionnera automatiquement les éléments de notre page(à savoir la zone principale et la zone secondaire).

Dans ce cours « Comprendre le concept de grille dans le webdesign », nous avons découvert comment Bootstrap 3 organise les différentes zones d’une page web en utilisant la grille adaptée à un support déterminé.
Dans le cours suivant, nous allons voir comment créer des pages web optimisées pour chaque type de support (Smartphone, Tablette, Desktop)