• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Créez votre propre thème de conception

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 d’une école d’informatique (Info School), 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 4, ce dernier doit être installé dans votre projet en utilisant npm. Si vous ne l'avez pas déjà sur votre ordinateur, veillez à l'avoir avant de passer à l'étape suivante (Instructions d'installation de npm). 

Sass devra également être installé sur votre ordinateur (Instructions d'installation de Sass). 

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 --save 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, exécutez cette commande dans le terminal :

$ 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.

Personnalisez vos pages

Il est temps maintenant de commencer la personnalisation de votre site web !

Bootstrap 4 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 (qui s'appelle désormais 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-*,  button-*  et  alert-*).

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 !default Saas

Pour les remplacer, elles doivent être définies avant l'importation de la bibliothèque.

Pour ce faire, créez un fichier appelé _variable_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 "variable_overrides"; // <-- ajouter cette ligne tout en haut du fichier
@import "../node_modules/bootstrap/scss/bootstrap.scss";

Modifiez la police des titres

La modification de la police des titres sera la première personnalisation.

L'école d’informatique Info School utilisera la police Times/Times New Roman serif standard.

Dans le fichier variables.scss, recherchez la ligne qui contient la variable $headings-font-family :

$headings-font-family: null !default;

Cette dernière permet de définir la police utilisée pour les titres de votre thème Bootstrap. Copiez le nom de la variable et ajoutez-la au fichier  _variable_overrides.scss avec la valeur suivante :

$headings-font-family: "Times New Roman", Times, serif;

Veillez à ce que vos fichiers Sass soient recompilés dans le fichier style.css, et actualisez les pages de votre site web. Vos titres s'affichent à présent dans la police Times/Times New Roman serif standard.

Recherchez d'autres variables qui vous permettent de modifier les polices sur le site, et essayez de les remplacer pour voir comment vous pouvez les personnaliser.

Créez un thème de couleur

Apportez les modifications suivantes à votre site d’informatique Info School :

  • la couleur primaire du thème doit utiliser la valeur hexadécimale #22A1ED ;

  • la couleur foncée du thème doit utiliser la valeur hexadécimale #04040C ;

  • la couleur des titres doit utiliser la valeur hexadécimale #284876 ;

  • la couleur d'arrière-plan des cartes doit utiliser la valeur hexadécimale #FCFCFC.

Recherchez dans le fichier variables.scss les noms de variables que vous souhaitez remplacer pour ces personnalisations. Testez les modifications sur vos pages pour vous assurer que votre thème a bien été appliqué. 

À présent, la barre de navigation, les boutons des cartes de leçons, les titres et les cartes doivent utiliser de nouvelles couleurs.

Si vous avez besoin d'aide, vous pouvez consulter le fichier  _variable_overrides.scss dans le dossier partie-5/chapitre-1/custom-css du dépôt Git du cours.

Adaptez votre thème avec les options Sass

Comme nous l’avons abordé précédemment, Bootstrap 4 est basé sur la puissance de Sass pour générer les variables CSS utilisées dans la conception graphique du framework.

Afin de changer rapidement l’apparence graphique définie par défaut par le framework, Bootstrap utilise les options Sass.

Le fonctionnement des options Sass est assez simple. Il se base sur une option binaire true (vrai) ou false (faux), vous permettant d’activer ou de désactiver une variable. Par exemple, il est possible d’afficher ou non les ombres, les coins arrondis ou encore les dégradés de votre thème Bootstrap avec ce procédé. 

Testez par vous-même en recherchant la variable  $enable-rounded  à l’intérieur du fichier variables.scss.

$enable-rounded: false !default;

Désactivez l’utilisation des coins arrondis dans votre thème Bootstrap en remplaçant la valeur false par true, comme ceci :

$enable-rounded: true !default;

À présent, rechargez les pages de votre site web et constatez les changements. L’intégralité des composants qui utilisent des coins arrondis (tels que les boutons) en sont maintenant dépourvus.

Plutôt simple et rapide, vous ne trouvez pas ?

 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 et à apprendre à personnaliser les fonctionnalités de votre site, à l'aide de JavaScript et de jQuery.

Exemple de certificat de réussite
Exemple de certificat de réussite