Doc.

.Installation

Pour utiliser le theme en local il vous faut installer twig :

composer require "twig/twig:^2.0"


ensuite lancer l'Installation des modules en faisant :

npm install

Puis pour le modifier il suffit de lancer :

npm run dev

Une fois le developpement fini, vous pouvez build pour la mise en prod ( minification, optimisation etc... ) avec :

npm run prod

.Wordpress

Si vous installez le theme pour un Wordpress, il faut installer Timber préallablement.
Ensuite il faut remplacer l'appel Twig dans les .php par celui de Timber qui est déjà commenté.

$context = Timber::get_context();
Timber::render('pages/nomdelapage.twig', $context);

.Highway

Le thème est powerade by Highway qui nous permet de faire des transitions coolos entre les pages.

.Creation de page

Pour créer une nouvelle page, vous pouvez suivre les étapes suivantes :

1. Dupliquer le template page.twig dans le dossier ./view/pages/. Changer l'appel highway de votre nouveau template .twig. data-router-view="mapage"
2. Dupliquer le template page.php à la racine du theme.
   Changer l'appel de la page par votre nouveau template .twig. Timber::render('pages/mapage.twig', $context);
3. Besoin de js ?
   Dupliquer le template page.js dans le dossier ./src/js/pages/.
   Ensuite renommez votre nouvelle class de render. maNouvellePage puis dans le fichier routing.js il faut appeler la nouvelle class et l'ajouter à l'objet highway: import maNouvellePage from '../pages/manouvellepage.js';

const H = new Highway.Core({
 renderers: {
  ...
  manouvellepage: maNouvellePage
 }
...

.Header/Footer

Vous pouvez retrouver le JS controlant ces deux éléments dans src/js/modules/...
Deux fonctions ont été défini pour le Header : .open() et .close() qui peuvent être customisé en fonction du projet.

.Parallax Example

Pour activer le parallax vous avez juste à ajouter sur l'élément la config gsap voulu :

data-prllxfrom='{"scale": "1.35"}' data-prllxto='{"scale": "1", "ease": "power3.out"}'

De base, l'élément parallaxé scroll de - windows.innerHeight à + windows.innerHeight, mais si vous voulez qu'il finisse plus tôt, il suffit d'ajouter :

data-prllxratio="0.5"

.inView Example

Pour activer le inView d'un element vous avez juste à ajouter sur l'élément voulu :

data-inview

ensuite la classe is--visible s'ajoute lorsque l'élément est visible. Il suffit de jouer sur ses proprietés pour faire une belle anim.

.Lazyload

Pour activer le Lazyload d'un element vous avez juste à ajouter sur l'élément voulu :

img.lazyload data-src="monimage"
ou
div.lazyload data-bg="monimage"

ensuite la classe lazyloading et lazyloaded est ajouté à l'élément. Il suffit de jouer sur ces proprietés pour faire une belle anim css.