Web

Intégration Web – la boite à outil

Voici les ressources front-end avec lesquelles les sites Web de l’agence sont construits:

https://getbootstrap.com/ => essentiellement pour la grille

La personnalisation de Bootstrap 5

La personnalisation de la librairie se fait dans un fichier variables, à importer avant l’import de Bootstrap.

Le CSS

Pour l’intégration CSS, c’est pré-processeur Sass qui est utilisé avec une structure de dossier comme ci-dessous pour organiser les styles:

Pour la compilation du Sass et des autres assets (images et JavaScript), c’est Parcel JS qui est utilisé https://parceljs.org/

La configuration utilisée pour Sass est minimale, elle ne nécessite que le plugin transfomer-sass: @parcel/transformer-sass

Le script a exécuté pour faire un watch du CSS est le suivant, il se trouve dans le fichier package.json:
« watch »: »parcel watch resources/assets/styles/main.scss –dist-dir dist/styles »
Il faut que le fichier main.scss comporte les import de tous les autres fichiers Scss:
Le fichier CSS généré se trouvera dans un dossier dist/styles.

Les fonts

Pour les typos, on utilise généralement Google Fonts: https://fonts.google.com/

Le JS

https://swiperjs.com/ pour les sliders

https://scrollrevealjs.org/ pour les animations au scroll

https://animejs.com/ pour les animations qui ne se déclenche pas au scroll

Partager