eikon parcel starter

Prérequis

• Git installé
• NPM installé

Installation

Cloner le repository git

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

Compiler la SCSS, aggréger le JS, lancer le serveur et écouter les changements

npm run dev

Compiler pour la production

npm run build

Utilisation

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