eikon parcel starter

Prérequis

• Git installé
• NPM installé

Installation

Cloner le repository git ou télécharger le fichier zip du code

git clone git@github.com:eikon-frontend/starterkit.git <nom du projet>

Se rendre dans le dossier du projet, puis installer les dépendances avec NPM

cd <nom-du-projet>
npm install

Commandes pour visualiser le projet

Compiler la SCSS, aggréger le JS, lancer le serveur et écouter les changements. -> permet de générer un lien localhost afin de visualisé le site sur un navigateur web.

npm run dev

-> ouvrir le lien localhost pour visualiser le site sur un navigateur.

Bonne visite :)

Utilisation du projet

Compiler pour la production

npm run build

HTML

Inclure un fichier header.html depuis un fichier HTML

<include src="components/header.html"></include>

SCSS

Inclure un fichier main.scss depuis un fichier HTML

<link rel="stylesheet" href="scss/main.scss" />

Inclure un fichier _base.scss depuis un fichier SCSS

@import "base";

JS

Inclure un fichier main.js depuis un fichier HTML

<script src="js/main.js"></script>

Inclure un fichier carousel.js depuis un fichier JS

require("./carousel.js");

Exemples d'utilisation de packages externes

AOS

Installer le paquet avec NPM

npm install aos@next

Inclure le JS depuis un fichier JS

import AOS from "aos";

Inclure la CSS depuis un fichier SCSS

@import "aos/dist/aos.css";

Bootstrap

Installer le paquet avec NPM

npm install bootstrap

Inclure la SCSS depuis un fichier SCSS

@import "bootstrap/scss/bootstrap-grid";

Flickity

Installer le paquet avec NPM

npm install flickity

Inclure le JS depuis un fichier JS

import Flickity from "flickity";

Inclure la CSS depuis un fichier SCSS

@import "flickity/dist/flickity.css";

Font Awesome

Installer le paquet avec NPM

npm install @fortawesome/fontawesome-free

Inclure le JS depuis un fichier JS

import "@fortawesome/fontawesome-free/js/all.js";

GSAP

Installer le paquet avec NPM

npm install gsap

Inclure le JS depuis un fichier JS

import gsap from "gsap";

Inclure les éventuels plugins

import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

Masonry

Installer le paquet avec NPM

npm install masonry-layout

Inclure le JS depuis un fichier JS

import Masonry from "masonry-layout";

ScrollMagic

Installer le paquet avec NPM

npm install scrollmagic

Inclure le JS depuis un fichier JS

import ScrollMagic from "scrollmagic";

Swiper

Installer le paquet avec NPM

npm install swiper@6

Inclure le JS depuis un fichier JS

import Swiper, { Navigation, Pagination } from "swiper";

Swiper.use([Navigation, Pagination]);

Inclure la SCSS depuis un fichier SCSS

@import "swiper/swiper";

three.js

Installer le paquet avec NPM

npm install three

Inclure le JS depuis un fichier JS

import * as THREE from "three";

Exemple

Un exemple avec l'installation des packages ci-desssus est disponible sur la branche examples

git checkout examples