🕸 Le framework Foundation pour les débutants en HTML

juin

2019

🕸 Le framework Foundation pour les débutants en HTML

😤 Ce billet a été édité le : 2019-06-05

Débuter en HTML peut être assez frustrant, les sites modernes doivent supporter les tablettes, les smartphones comme les ordinateurs. C’est beaucoup de travail si l’on souhaite avoir un site qui prend en compte tous ces paramètres.

Je vous propose d’utiliser des outils pour vous aider, ici je vais vous parler de Foundation 6 de la fondation Zurb.

ඏ

Nous nous limiterons à la partie « site web » de Foundation 6. Mais sachez qu’il existe une partie destinée à l’élaboration de mails.

Pour les débutants, la grosse difficulté du framework est son installation, il offre beaucoup de possibilités de configuration qui nécessite de bonnes connaissances en JavaScript / node.js ou à minima sur le fonctionnement de npm.

Pour effectuer une personnalisation digne de ce nom, il faudra également une bonne connaissance de Sass (Syntactically Awesome Stylesheets) qui est un préprocesseur CSS – ce qui suppose de connaître CSS.

Bref, on ne s’en sort pas. Par ailleurs la documentation est en anglais et pour ne rien aider la fondation Zurb vit de la formation, et il me semble que certaine parties sont volontairement obscures.

Pour éviter ce coût d’entrer dans cette technologie assez chère (en termes de temps), je vous propose une des méthodes proposé dans la documentation mais qui est peut mise en avant dans la documentation de Foundation 6. Cette solution que me semble être la plus simple pour essayer ce framework et voir s’il vous convient.

ඏ

Installation

Il faut commencer par télécharger le zip : foundation-6.5.1-complete.zip que l’on trouve sur la page « Download Foundation ».

Lorsque l’on désarchive le fichier dans un espace de travail et on obtient :

├── css/ │ ├── app.css │ ├── foundation.css │ └── foundation.min.css ├── index.html └── js/ ├── app.js └── vendor/ ├── foundation.js ├── foundation.min.js ├── jquery.js └── what-input.js

ඏ

Mise en œuvre

L’architecture de cette archive est simple :

Dans le dossier « css » : C’est le code CSS (la définition du style),
Dans le dossier « js » : C’est le code Javascript.

Dans un premier temps, je vous décourage de modifier quoi que ce soit dans ces dossiers, par la suite vous pourrez modifier, si besoin, le fichier app.js et le fichier app.css.

Le fichier index.html est un exemple d’utilisation. En gros, le contenu de vos fichiers HTML doit être :

<!doctype html>
<html class="no-js" lang="fr" dir="ltr">
  <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> …… VOTRE TITRE ! …… </title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

    …… VOTRE CODE HTML ……

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

Vous pouvez par exemple créer un fichier vide que nous nommerons « test.html » copier et coller le code ci-dessus pour voir ce que cela fait.

Ensuite, je vous encourage à lire la documentation de Foundation 6 – les vidéos n’étant, en générales, pas très utile.

Pour commencer dans la documentation, je vous encourage à regarder la fonctionnalité « XY Grid » que l’on trouve dans le menu de gauche sous : « General »/« XY Grid », cela vous permettra de ne plus trop vous prendre la tête avec la mise en page et de bénéficier rapidement, par la suite, des fonctionnalités réactives de Foundation 6.

ᦿ

Vos commentaires

Pas encore de commentaire - ajouter le votre.
Ajouter votre commentaire

cClaude.rocks ☕ Le blog

Installation

Mise en œuvre