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.

Laisser un commentaire