Notion de grille

Le principe d’une grille

Une grille est tout simplement un découpage en cellules de mêmes dimensions comme figuré ci-dessous :

../../_images/empty_grid.png

La grille de Bootstrap comporte 12 colonnes.

Terminologie

Une grille est découpée en rangées (appelées « row » dans Bootstrap et « Ligne » dans le logiciel WebAcappella RC) et colonnes (« col »), comme dans le figure suivante :

../../_images/grid_col_and_row.png

La grille de Bootstrap

Le découpage en colonnes divise la largeur d’écran en pourcentage. Pour les lignes en revanche la hauteur sera ajustée au contenu.

../../_images/grid_content.png

Organisation de la grille

Bootstrap considère 4 sortes de médias :

Les 4 écrans de bootstrap
Large (Lg) Md Sm Xsmall (Xs)
../../_images/LG.png
../../_images/MD.png
../../_images/SM.png
../../_images/XS.png
Valeur de référence Valeur de référence Valeur de référence Valeur de référence
>= 1200 px >= 992 px >= 768 px < 768 px

Et dans WebAcappella Grid ?

  • Une grille est définie dans WAGRID par le bouton « BOX » qui va contenir autant de lignes que désirées avec toujours une largeur de 12 colonnes au maximum par ligne.
  • Une ligne (row dans Bootstrap) va contenir des éléments (texte, image, etc.).

Les 2 composants majeurs sont la « BOX » et la « LIGNE ».

Note

BOX : Il s’agit du composant primaire (donc indispensable), le seul où des lignes peuvent être ajoutées.

Note

LIGNE : Composant qui permet d’inclure des images, des textes, une galerie, etc.

Une ligne est divisée en 12 colonnes (voir bootstrap), un composant comme une image peut avoir au minimum une largeur de 1 colonne et au maximum de 12 colonnes.

Au total, nous pouvons donc avoir 12 composants de 1 unité de largeur.

Concernant la hauteur d’une ligne, celle-ci dépend de la taille de la largeur du ou des composants insérés (notion de ration pour une image, notion de contenu pour le texte notamment).

La notion de ratio renvoie à une notion de proportionnalité (largeur*hauteur) et donc de « resizing » pour une image.

Le contenu à une notion de « fluidité », c’est à dire que le contenu doit dans tous les cas, apparaître et donc si vous réduisez la largeur (perte de contenu donc), cela sera forcément compensé par un gain en hauteur.

Le spacer est un composant à part dans le sens où celui-ci a une taille fixe, ce qui permet de générer une marge.