Fondation - Installation

Dans ce chapitre, nous discuterons de la façon d'installer et d'utiliser Foundation sur le site Web.

Téléchargez la Fondation

Lorsque vous ouvrez le lien foundation.zurb.com , vous verrez un écran comme indiqué ci-dessous -

Clique le Download Foundation 6 bouton, vous serez redirigé vers une autre page.

Ici vous pouvez voir quatre boutons -

  • Download Everything - Vous pouvez télécharger cette version de Foundation, si vous souhaitez tout avoir dans le framework ie vanilla CSS et JS.

  • Download Essentials - Il téléchargera la version simple qui comprend la grille, les boutons, la typographie, etc.

  • Custom Download - Cela téléchargera la bibliothèque personnalisée pour Foundation, elle comprend des éléments et définit la taille des colonnes, la taille de la police, la couleur, etc.

  • Install via SCSS - Cela vous redirigera vers la page de documentation pour installer Foundation for sites.

Vous pouvez cliquer sur le Download Everythingbouton pour tout obtenir dans le cadre, à savoir CSS et JS. Comme les fichiers consistent tout dans le cadre, vous n'avez donc pas besoin d'inclure des fichiers séparés pour des fonctionnalités individuelles à chaque fois. Au moment de la rédaction de ce didacticiel, la dernière version (Foundation 6) a été téléchargée.

Structure des fichiers

Une fois Foundation téléchargé, extrayez le fichier ZIP, et vous verrez la structure de fichiers / répertoires suivante -

Comme vous pouvez le voir, il existe des CSS et JS compilés (foundation. *), Ainsi que des CSS et JS compilés et minifiés (foundation.min. *).

Nous utilisons les versions CDN de la bibliothèque tout au long de ce didacticiel.

Modèle HTML

Un modèle HTML de base utilisant Foundation est présenté ci-dessous -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

Les sections suivantes décrivent le code ci-dessus en détail.

Doctype HTML5

Foundation se compose de certains éléments HTML et propriétés CSS qui nécessitent l'utilisation du doctype HTML5. Par conséquent, le code suivant pour le doctype HTML5 doit être inclus au début de tous vos projets utilisant Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile d'abord

Cela aide à être réactif aux appareils mobiles. Vous devez inclure leviewport meta tag à l'élément <head>, pour assurer un rendu correct et un zoom tactile sur les appareils mobiles.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

  • La propriété width contrôle la largeur de l'appareil. Le définir sur la largeur de l'appareil garantira qu'il est correctement rendu sur différents appareils (mobiles, ordinateurs de bureau, tablettes ...).

  • initial-scale = 1.0 garantit que, une fois chargée, votre page Web sera rendue à une échelle de 1: 1, et aucun zoom ne sera appliqué hors de la boîte.

Initialisation des composants

Le script jQuery est requis dans Foundation pour les composants tels que les modaux et la liste déroulante.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus firstexample.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.