cClaude.rocks ☕ Le blog

[Nouvelles technologies du libre, sciences et coups de gueule…]

Menu
đŸ˜€ 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.

኿


â„č 2006 - 2024 | 🏠 Accueil du domaine | 🏡 Accueil du blog