Introduction au Framework Foundation

Qu’est ce que Foundation?

Foundation est un environnement de conception de site web, un framework en anglais. Grâce aux règles CSS prédéfinies, il vous permettra de concevoir des sites web modernes, attractifs, ergonomiques et élégants.

Foundation propose une grille de mise en page pour concevoir des sites en Responsive Web Design dont l’affichage s’adaptera automatiquement selon l’écran de diffusion (écran d’ordinateur, tablette ou smartphone).

Les fonctionnalités de Foundation

Foundation propose un framework qui peut s’appliquer dans trois domaines :

  • Foundation for sites : pour le design web (http://foundation.zurb.com/sites.html).
  • Foundation for Emails : pour la création des e-mails (http://foundation.zurb.com/emails.html).
  • Foundation for Apps : pour la création d’applications totalement responsives (http://foundation.zurb.com/apps.html).

La grille de mise en page de Foundation

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).

Personnaliser Foundation 6

Foundation vous permet de personnaliser le framework afin de n’utiliser que les composants dont vous avez besoin pour chaque site web. Cela va vous permettre de gagner en poids, donc en temps de téléchargement.

Dans la fenêtre des téléchargements, dans la zone Custom, cliquez sur le bouton Download Everything.

Personnaliser Foundation 6

Personnaliser Foundation 6

Vous êtes alors dirigé juste un peu plus bas dans cette page. Voici un extrait de cet affichage :

Outil de personnalisation de Foundation 6

Outil de personnalisation de Foundation 6

Dans cet écran, vous allez personnaliser les seuls composants que vous souhaitez utiliser. Pour chaque type, vous laissez cochés ceux que vous souhaitez utiliser et vous décochez ceux que vous ne souhaitez pas utiliser.

Quand vous avez fait tous vos choix, cliquez sur le bouton Download Custom Build.

Vous téléchargez une archive nommée foundation-6.2.1-custom.zip. 6.2.1 est version de Foundation disponiblé au moment de l’écriture de ce tuto.

Vous pouvez par la suite travailler avec l’archive téléchargée de la meme manière que la version complete de Foundation 6 (Foundation complete).

Première page HTML avec Foundation 6

Première page HTML avec Foundation 6

Apres avoir téléchargé et décompressé Foundation 6 sur votre ordinateur, vous vous disposez donc de tous les éléments nécessaires à la création de votre première page HTML avec Foundation 6.

Avant de continuer la lecture, il est recommandé de lire les deux derniers articles :

Maintenant, nous allons voir comment structurer les dossiers de votre site web et comment faire appel à Foundation dans le code source de la page HTML.

La structure des dossiers de votre site web

Le dossiser de votre site web comportera les fichiers HTML de vos différentes pages web, les dossiers css et js de Foundation et le dossier img qui contiendra les images de votre site.

  • Le dossier css contient le fichier foundation.min.css. Vous y placerez aussi, éventuellement, le fichier app.css pour y saisir vos règles CSS personnalisées.
  • Le dossier js contient le fichier foundation.min.js et le dossier vendor avec ses deux fichiers, jquery.min.js et what-input.min.js.
Dans le dossier de votre site web, chaque fichier HTML devra être lié aux fichiers de Foundation.

Comment lier les fichiers CSS et JS de foundation à votre site web

Voici les liaisons CSS à implémenter :

Voici les liaisons JavaScript à implémenter :

Attention les liaisons vers ces fichiers JavaScript doivent impérativement être placées juste avant la balise de fermeture de l’élément </body>.. Il est impératif aussi de placer la déclaration du fichier foundation.min.js après celle de la librairie jQuery.

Première page HTML  avec Foundation 6

Nous avons vu donc comment Organiser les fichiers de notre site web ainsi qu’un exemple detaillé d’une première page HTML avec Foundation 6.

Foundation complet

Le téléchargement

Dans la fenêtre des téléchargements, dans la zone Complete, cliquez sur le bouton Download Everything.

Téléchargement de Foundation Complete

Téléchargement de Foundation Complete

Après avoir téléchargé et décompressé Foundation Complete, vous obtenez dossier nommé foundation-6.2.0-complete.

Notez bien que les frameworks évoluent toujours. il y aura sûrement des ajustements, des corrections et des évolutions dans Foundation 6. Des mises à jour seront certainement publiées et donc des petites différences pourront apparaître.

Les fichiers

les fichiers présents dans Foundation 6

les fichiers présents dans Foundation 6

Le dossier css contient trois fichiers :

  • app.css : ce fichier est vide (0 Ko). Il servira à créer vos propres règles CSS, afin de personnaliser l’affichage de vos sites web.
  • foundation.css : ce fichier contient toutes les règles CSS dans plus de 3800 lignes, mais pour un poids de 91 Ko. Ce fichier CSS est fait pour la conception du site, puisque nous avons une lecture facile de toutes les règles CSS.
  • foundation.min.css : ce fichier est le même que précédemment, mais il est minimisé en une seule ligne. Il n’y a aucun retour à la ligne et aucun commentaire.

Le dossier js contient un fichier JavaScript app.js et un dossier vendor qui, lui meme contient quatres fichiers :

  • app.js : ce fichier est vide. Il sera utilisé pour personnaliser les composants avec des fonctions JavaScript que vous créerez.
  • foundation.js : ce fichier contient tous les scripts pour l’utilisation des composants interactifs. Ce fichier est fait pour la conception.
  • foundation.min.js : ce fichier est le même que précédemment, mais il est minimisé en une seule ligne. Il n’y a aucun retour à la ligne et aucun commentaire.
  • jquery.js : ce fichier correspond à la librairie JavaScript jQuery .
  • what-input.js : ce fichier permet aux développeurs de créer des styles CSS accessibles et spécifiques, pour les personnes utilisant le clavier et la souris pour les saisies des champs.

Le fichier index.html : ce fichier est une simple présentation de quelques règles CSS ainsi que des liens vers le site de Foundation.

Les différentes versions du framework Foundation

Pour connaitre les differentes versions de Foundation, rendez-vous au site du framework : http://foundation.zurb.com.

La page d'accueil du site Web de Foundation Framework

La page d’accueil du site Web de Foundation Framework

Cliquez sur le bouton Download Foundation 6.

les différentes version du Framework Foundation

les différentes version du Framework Foundation

Les différentes versions de Foundation

  • Complete : cette version contient le framework complet, avec tous les composants et tous les fichiers.
  • Essential : cette version contient l’essentiel du framework pour concevoir et créer des sites web (la grille de mise en page, les boutons, …etc).
  • Custom : cette version vous permet de personnaliser le framework avec les composants que vous souhaitez.
  • Sass : cette version vous permet d’utiliser le préprocesseur Sass dans Foundation.