Foundation 6 Archives

La grille de mise en page de Foundation 6

Posted by OpenTuto

avril 10, 2016 Foundation 6 Leave a Comment

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

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

Posted by OpenTuto

avril 9, 2016 Foundation 6 Leave a Comment

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

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

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

Maintenant nous avons télécharger et mis en place Foundation 6, l’etape suivante est créer notre premiere page web avec Foundation 6.

Première page HTML avec Foundation 6

Posted by OpenTuto

avril 9, 2016 Foundation 6 Leave a Comment

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 :

<head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Le titre de la page/title> 
  <link rel="stylesheet" href="css/foundation.min.css" /> 
  <link rel="stylesheet" href="css/app.css" /> 
</head>

<head>

<title>Le titre de la page/title>

</head>

Voici les liaisons JavaScript à implémenter :

... 
<script src="js/vendor/jquery.js"></script> 
<script src="js/vendor/what-input.min.js"></script> 
<script src="js/foundation.min.js"></script> 
<script src="js/app.js"></script> 
</body> 
</html>

...

</body>

</html>

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

<!doctype html> 
<html> 
  <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <title>Le titre de la page HTML</title> 
     <link rel="stylesheet" href="css/foundation.min.css" /> 
     <link rel="stylesheet" href="css/app.css" /> 
  </head> 
<body> 

  <h1> Bonjour FOundation 6 </h1>

  <script src="js/vendor/jquery.js"></script> 
  <script src="js/vendor/what-input.min.js"></script> 
  <script src="js/foundation.min.js"></script> 
  <script src="js/app.js"></script> 
</body> 
</html>

<!doctype html>

<html>

<head>

<title>Le titre de la page HTML</title>

</head>

<body>

<h1> Bonjour FOundation 6 </h1>

</body>

</html>

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.