# Ajouter un framework CSS ou des icônes

Je présente ici 3 framework/bibliothèque CSS, dans mon ordre de préférence. Il faut en choisir un, et surtout ne pas les mélanger :

En tout dernier, je présente une très bonne et très grande bibliothèque d'icônes : Font Awesome (opens new window) avec la bonne façon de l'intégrer au projet.

Il y en a d'autres : Material Design Icons (opens new window), icomoon (opens new window)...

# Ajouter tailwindcss

Pour ajouter ce très bon "framework" CSS qu'est tailwindcss (opens new window), il y a la façon simple mais pas très propre, et la bonne façon.

Il est basé sur normalize.css (comme bootstrap) de Nicolas Gallagher ou @necolas sur github. Il ne faut donc pas importer les deux, cela est inutile.

# Ajouter tailwindcss façon "Quick & dirty"

De manière simple, on peut ajouter tailwindcss comme "normalement" c'est-à-dire et comme décrit dans ce cours.

On peut donc ajouter dans index.html la ligne suivante à l'intérieur de la balise head :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css" />

Mais cela veut dire qu'on va embarquer un grand nombre de styles que notre application n'utilisera pas : l'utilisateur va télécharger un gros fichier CSS alors qu'un beaucoup plus petit serait suffisant.

# La bonne manière

Avec parcel (opens new window) (ça fonctionne aussi avec webpack, un autre bundler), on peut "importer" du CSS comme on importe du JavaScript, avec la syntaxe import.

Installer tailwindcss :

npm i tailwindcss

Créer un fichier main.css avec ce contenu (qui se trouve sur le site officiel de tailwindcss (opens new window)) :

@tailwind components;
@tailwind utilities;

Et ensuite dans main.js :

import './main.css'

Enfin, dans index.html, modifiez les balises suivantes :

la balise <body> pour avoir les classes font-sans p-0 m-0 ;
la balise <header> les classes m-0 p-1 sticky top-0 shadow bg-white ;
la balise <h1> la classe suivante : text-center ;
et la balise <footer> les classes suivantes : text-center py-2 bg-purple-700 text-white fixed w-full bottom-0

Mettre 2 espaces entre les noms de classe permet de rendre plus évident qu'il s'agit bien de classes différentes.

Regarder le résultat

# Aller plus loin avec tailwindcss

# Composer les classes tailwind

On peut utiliser la règle @apply pour réutiliser les styles. Au lieu d'écrire

<footer class="text-center  py-2  bg-purple-700  text-white  fixed  w-full  bottom-0">

Ce serait plus lisible, et plus réutilisable d'écrire :

<footer class="main-footer">

Pour rendre cela possible, il faut ajouter un plugin à postcss (qui traite le code CSS), et donc l'ajouter en tant que dépendance :

~/dev/projects/esilv-scratch/client $ npm i -D postcss-apply

Et l'ajouter à la configuration de postcss en créant un nouveau fichier postcss.config.js (à mettre dans le dossier client) avec ce contenu :

module.exports = {
 plugins: {
   tailwindcss: {},
   'postcss-apply': {},
}

Une fois cela fait, il est possible d'utiliser @apply dans le code CSS.

Ajouter dans main.css le code suivant :

.main-footer {
  @apply text-center  py-2  bg-purple-700  text-white  fixed  w-full  bottom-0;
}

Et voilà, il est désormais possible d'utiliser la classe main-footer dans notre code HTML.

# Ajouter bulma

Bulma (opens new window) est aussi un très bon framework uniquement CSS (pas de JavaScript, comme tailwind), et est le plus simple à installer et à utiliser.

### Installer la dépendance

npm i bulma

Ajouter cette ligne dans main.css :

@import 'bulma';

Il est conseillé de purger les CSS avec purgecss (cf. plus loin).

# Ajouter bootstrap

Bootstrap (opens new window), contrairement aux 2 autres, n'est pas seulement une bibliothèque CSS, mais une bibliothèque de composants complets, avec gestion des interactions utilisateurs, et donc embarque aussi du JavaScript. Il est donc un peu plus difficile de l'ajouter à un projet.

Bootstrap dépend (encore?!) de jquery (opens new window), et de popper (opens new window), il faut donc les installer aussi. Bootstrap est fait en SASS, sass sera donc installé aussi.

Installer toutes les dépendances :

npm i bootstrap jquery popper

Dans main.js :

import 'bootstrap'

import './main.scss'

Dans main.scss

/*
Éventuellement ici des personnalisations
*/
@import "~bootstrap/scss/bootstrap";

Cf. le site officiel (opens new window) pour plus de détail pour la personnalisation (opens new window).

# Purger les CSS non utilisés

Les classes de ces bibliothèques sont très nombreuses, et on n'en utilise qu'une petite partie. Il convient donc de traiter le CSS pour en expurger que l'essentiel. Pour cela, on peut utiliser PurgeCSS (opens new window) à travers un plugin parcel dédié :

npm install -D parcel-bundler parcel-plugin-purgecss

Ensuite, créer un fichier purgecss.config.js dans le dossier client avec ce contenu :

module.exports = { content: ["**/*.html"], }

# Ajouter font-awesome

Fontawesome (opens new window) est une très grande bibliothèque d'icones.

# Ajouter font-awesome façon "Quick & dirty"

Ajouter cette balise link dans le head de vos documents html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

Inconvénients : les visiteurs de votre site téléchargeront toutes les icônes de font-awesome, alors que vous n'en utiliserez qu'une (toute) petite partie.

# Mieux : importer uniquement le nécessaire

Ajouter font-awesome dans les dépendances :

npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Et dans main.js, ajouter ce contenu (dans l'exemple, seules les icônes archway, ad et brain seront importées et donc utilisables) :

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faArchway, faAd, faBrain } from '@fortawesome/free-solid-svg-icons'

// Utiliser uniquement les icônes archway, ad et brain
library.add(faArchway, faAd, faBrain)

dom.i2svg()

Importé de cette façon, le bundle ne contiendra que les icônes font-awesome que vous aurez ajoutées !

# Le mieux du mieux : importer uniquement le nécessaire, et observer les changements du DOM

Ajouter font-awesome dans les dépendances :

npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Et dans main.js, ajouter ce contenu (dans l'exemple, seules les icônes archway, ad et brain seront importées et donc utilisables) :

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faArchway, faAd, faBrain } from '@fortawesome/free-solid-svg-icons'

// Utiliser uniquement les icônes archway, ad et brain
library.add(faArchway, faAd, faBrain)

// Remplacer toutes les balises <i class="fa..."> par un <svg> et utiliser un MutationObserver pour
// continuer à le faire quand le DOM change.
dom.watch()

Importé comme cela aussi, le bundle ne contiendra que les icônes font-awesome que vous aurez ajoutées !

De plus, dès que le dom changera, les balises <i class="fa..."> seront remplacées par les icônes en svg : idéal pour les SPA (Single Page Application) faites avec React, Vue.js ou autres. Plus de détails sur le site officiel (opens new window).

← Commencer un projet Aller plus loin →