Sommaire

La feuille de style Flexbox

1. Les feuilles de style de Foundation

Par défaut, Foundation n’utilise que la seule grille de mise en page "classique". Pour utiliser la technique Flexbox, il faut utiliser la feuille de style qui lui est dédiée et ne pas utiliser la feuille de style de la grille "classique". Vous ne devez pas utiliser les deux techniques en même temps, c’est l’une ou l’autre.

2. Importer la feuille de style Flexbox

Nous allons utiliser la personnalisation du framework Foundation, pour générer la feuille de style utilisant le module Flexbox.

Accédez au site de Foundation, dans la page de téléchargement : http://foundation.zurb.com/sites/download.html/.

Dans les différentes possibilités, pour la distribution Custom, cliquez sur le bouton Custom Download.

images/C04-002.png

Dans les options de personnalisation, vous pouvez ne sélectionner que le strict minimum : dans la zone Grid, cochez Flex Grid et dans la zone General, cochez Typography.

images/C04-003.png

Dans les options The Grid, vous pouvez choisir le nombre de colonne (# of Columns), la largeur de la gouttière (Gutter) et la largeur maximale de la mise en page (Max-Width).

Images/new-001.PNG

En bas de cet écran, cliquez sur le bouton Download Custom Build.

Décompressez l’archive obtenue.

Placez le dossier css dans le dossier de publication de votre site.

Effectuez les liaisons aux feuilles de styles CSS.

<link rel="stylesheet" href="css/foundation.min.css" ...