Installation de Patternlab
L'installation de patternlab se fait en quelques étapes :
- Télécharger la version MUSTACHE PHP présente sur le github de Patternlab.io puis suivez les instructions.
- Remplacer le contenu du fichier source par celui présent sur le github de Tracim/Patternlab.
- Installer les dépendances suivantes nécessaire pour faire fonctionner le patternlab de Tracim.
Installation des dépendances nécessaires au patternlab de Tracim.
Pour faire fonctionner patternlab, il faut installer :
- Bootstrap
- Les fonts Quicksand, Open Sans et fontawesome v5
BOOSTRAP
Pour que Boostrap fonctionne sur patternlab, il faut installer :
Jquery :
- Télécharger jquery via jquery/download.
- Une fois téléchargé, placer jquery dans le dossier
js
, présent danssource
. - Charger le fichier jquery dans patternlab : ouvrir le fichier
_01-foot.mustache
présent dans le dossier_meta
. - Ajouter la balise script :
<script src="../../js/jquery/jquery-3.3.1.min.js"></script>
.
Popper :
- Télécharger Popper via popper/github.
- Le placer dans le dossier
js
présent danssource
. - Charger le fichier popper dans patternlab : ouvrir le fichier
_01-foot.mustache
présent dans le dossier_meta
. - Ajouter la balise script :
<script src="../../js/popper/popper.1.12.9.min.js"></script>
.
Bootstrap :
- Télécharger Bootstrap via Bootstrap.com.
- Placer le dossier Bootstrap js dans le dossier
js
présent danssource
. - Placer le dossier Bootstrap css dans le dossier
css
présent danssource
. - Charger les deux fichiers:
bootstrap.min.js
dans_01-foot.mustache
via le script :<script src="../../js/bootstrap/bootstrap.min.js"></script>
.bootstrap.min.css
dans_00-head.mustache
via le link :<link rel="stylesheet" href="../../css/bootstrap/bootstrap.min.css" />
.
FONTS
Quicksand et Open Sans :
Pour utiliser les fonts Quicksand et Open Sans, utiliser le lien CDN fournit par google fonts et placé le lien CDN dans _00-head.mustache
:
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand" rel="stylesheet" />
.
Font Awesome :
- Télécharger fontawesome via le site fontawesome.
- Placer le dossier téléchargé dans le dossier
font
présent danssource
( si celui-ci n'existe pas, créé le dossier ). - Charger le fichier présent dans le dossier
fontawesome/svg-with-js/fontawesome-all.js
via le script :<script defer src="../../fonts/fontawesome/svg-with-js/js/fontawesome-all.js"></script>
.