Vous avez fait beaucoup de progrès au cours des précédentes parties de ce cours. Vous avez pu créer un prototype fonctionnel du site web de portfolio, en utilisant uniquement les classes de Bootstrap, et sans écrire ni modifier une seule ligne de CSS !
Aussi intéressants que soient le thème par défaut et les exemples mis à disposition par Bootstrap pour créer rapidement et efficacement un site web, il est essentiel de personnaliser le thème aux couleurs de votre projet afin de le rendre unique. Bon nombre de ressources en ligne existent à ce sujet. Entre autres, il est possible d’acquérir des thèmes Bootstrap sur le site web officiel, qui vous permettront d’apprécier le niveau de détail qu’offre le framework en termes de personnalisation.
Configurez votre projet pour pouvoir le personnaliser
Avant de pouvoir créer votre propre thème, vous devez vous assurer que votre projet soit correctement configuré. Jusqu'à présent, vous avez utilisé les fichiers compilés de BootstrapCDN. La seule manière de remplacer le fichier compilé est de créer des classes Bootstrap de substitution, mais cela prendrait du temps et serait potentiellement source d’erreurs.
À présent, nous utiliserons Sass pour la génération de variables.
Pour utiliser Sass avec Bootstrap 5, ce dernier doit être installé dans votre projet en utilisant npm.
OK, maintenant que vous avez les outils appropriés, il est temps de commencer la personnalisation !
Ouvrez un terminal de ligne de commande, placez-vous à la racine du répertoire qui contient les fichiers de votre projet, puis exécutez la commande suivante :
$ npm init
Vous pouvez accepter les valeurs par défaut ou ajouter vos propres réponses aux suggestions. Une fois la commande terminée, vous aurez un nouveau fichier appelé package.json dans la racine de votre dossier de projet.
Par la suite, utilisez npm pour télécharger la dernière version de Bootstrap dans votre projet.
Exécutez la commande suivante depuis le terminal :
$ npm install bootstrap
Une fois exécutée, cette commande créera un répertoire nommé node_modules, qui contiendra un sous-répertoire nommé bootstrap. Ce répertoire contient les fichiers Bootstrap compilés dans le répertoire dist, ainsi que les fichiers sources de Bootstrap (non compilés) dans le répertoire scss.
Maintenant, créez deux répertoires à la racine de votre projet : l'un nommé scss dans lequel iront vos fichiers Sass, et l’autre nommé css dans lequel iront les fichiers CSS.
Dans votre répertoire scss, créez un fichier nommé style.scss.
Étant donné que vous allez remplacer les variables de Bootstrap, vous devez importer le ou les fichiers pertinents du répertoire node_modules/bootstrap/scss dans votre projet.
Pour ce faire, dans le fichier style.scss, ajoutez la ligne :
@import "../node_modules/bootstrap/scss/bootstrap.scss"Cela inclura la totalité de Bootstrap dans votre projet.
Bien entendu, vous avez la possibilité d’optimiser la taille de votre fichier CSS généré, en n’important que les fichiers nécessaires à votre personnalisation. Cependant, afin de simplifier notre démarche, vous importerez la totalité de Bootstrap pour ce cours.
Pour générer le fichier CSS que votre projet utilisera, nous devons tout d’abord installer Sass (si ce n’est pas déjà fait) en exécutant la commande suivante :
$ npm install -g sass
Une fois Sass installé, vous devriez pouvoir lancer la compilation automatique de votre fichier SCSS grâce à la commande suivante :
$ sass --watch scss:css
Cela générera un fichier appelé style.css dans le répertoire css. L'option --watch permet de garder la commande en cours d'exécution, et de recompiler le ou les fichiers CSS dans le répertoire css chaque fois que des modifications sont apportées au contenu du répertoire scss. C'est très utile lorsque vous travaillez sur vos fichiers.
L'étape finale consiste à remplacer la référence à la version de CDN de Bootstrap dans l'en-tête de vos fichiers HTML, par une référence au fichier style.css généré.
Vous devez donc remplacer cette ligne dans la section <head> de vos fichiers HTML :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">par cette ligne :
<link rel="stylesheet" href="css/style.css" />Testez vos fichiers en les ouvrant dans un navigateur. Ils doivent toujours afficher correctement les composants de Bootstrap.
Pour y remédier, cherchez le fichier _offcanvas.scss dans votre dossier Bootstrap, puis récupérez le nom de la variable du z-index de la classe .offcanvas. Si ça ne change pas, cette variable devrait être $zindex-offcanvas. Ajoutez-la dans votre fichier _variables_overrides.scss et donnez-lui une valeur supérieure au z-index de la classe .modal-backdrop, soit 1051 si ça n’a pas changé au moment où vous lisez ces lignes.
Et voilà, vous avez corrigé un bug en seulement une ligne de code ! Félicitations !
Personnalisez vos pages
Il est temps maintenant de commencer la personnalisation de votre site web !
Bootstrap 5 utilise des variables et des cartes Sass pour définir de nombreux paramètres et composants du site.
Ouvrez et examinez le fichier node_modules/bootstrap/scss/_variables.scss. Il s’agit de l'emplacement où, par exemple, les variables des couleurs utilisées pour certaines classes que vous avez rencontrées dans ce cours sont définies (par exemple, les couleurs des classes .bg- et button-*).
Il vous est possible de modifier n'importe quelle valeur par défaut de Bootstrap en remplaçant les variables qui ont été définies dans ce fichier. Comme vous le remarquez, elles sont définies à l'aide de l'indicateur!defaultSaas.
Pour les remplacer, elles doivent être définies avant l'importation de la bibliothèque et sans l’indicateur !default.
Pour ce faire, créez un fichier appelé _variables_overrides.scss dans le dossier scss de votre projet, et importez-le. Une fois le fichier créé, il vous faut définir son importation tout en haut de style.scss.
Le contenu du fichier style.scss sera désormais le suivant :
@import "variables_overrides.scss"; // <-- ajouter cette ligne tout en haut du fichier
@import "../node_modules/bootstrap/scss/bootstrap.scss";Maintenant que vous avez mis en place l’architecture Sass de votre projet, vous êtes en mesure de modifier les variables par défaut de Bootstrap 5 pour personnaliser votre thème.
Pour ce faire, ouvrez dans votre IDE la page node_moduls/bootstrap/scss/_variables.scss, puis copiez-collez les variables que vous souhaitez modifier dans votre fichier _variables_overrides.scss.
Si vous voulez changer la couleur “primary” de toutes les classes qui l’utilisent, il vous suffit de copier-coller la variable Sass “$primary” par la valeur de la nouvelle couleur voulue dans _variables_overrides.scss.
$primary: #20c997;
À vous de jouer !
Votre mission, si vous l’acceptez :
Changer les couleurs
$primaryet$secondary.Activer les
shadowsdans les options globales.Désactiver les
roundeddans les options globales.
Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !
En résumé
Bootstrap peut être configuré en utilisant npm et Sass afin de personnaliser l’apparence de votre site web. Cela facilite également la mise à jour de votre style CSS, grâce à la puissance de Sass.
Les variables Sass par défaut de Bootstrap peuvent être remplacées pour augmenter la puissance du framework et personnaliser les thèmes.
Il est possible de créer son propre thème de couleur et d'intégrer une police particulière, en modifiant la valeur des variables concernées au sein du fichier variables.scss.
Il est possible de modifier facilement l’apparence d'un thème en activant ou désactivant des options Sass de Bootstrap.
Maintenant que vous avez appris à créer votre propre thème de conception et à personnaliser l'apparence de votre site Bootstrap, vous êtes prêt à passer à l'étape suivante : créer vos propres classes utilitaires grâce à l’API “Utility API“ de Bootstrap 5.
