Aller au contenu principal

Module Bootstrap.5 – Personnalisation

Objectif​

Maîtriser la personnalisation Bootstrap : thème, variables SCSS, override CSS pour adapter Bootstrap à votre identité visuelle.

Théorie​

Pourquoi personnaliser ?​

Bootstrap par défaut :

  • Design générique
  • Couleurs standards
  • Espacements standards

Personnalisation :

  • ✅ Identité visuelle unique
  • ✅ Cohérence avec la marque
  • ✅ Design sur mesure

Méthodes de personnalisation​

1. Variables SCSS (recommandé)​

Avantage : Modifie Bootstrap à la source, CSS optimisé.

Processus :

  1. Définir vos variables
  2. Importer Bootstrap
  3. Bootstrap utilise vos variables

Exemple :

// _custom-variables.scss
$primary: #custom-blue;
$secondary: #custom-gray;
$border-radius: 0.5rem;

// main.scss
@import "custom-variables";
@import "~bootstrap/scss/bootstrap";

Variables principales :

// Couleurs
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;
$light: #f8f9fa;
$dark: #343a40;

// Typographie
$font-family-sans-serif: 'Roboto', sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;

// Espacements
$spacer: 1rem;
$spacers: (
    0: 0,
    1: $spacer * 0.25,
    2: $spacer * 0.5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3
);

// Border radius
$border-radius: 0.25rem;
$border-radius-sm: 0.2rem;
$border-radius-lg: 0.3rem;

// Breakpoints
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

2. Override CSS​

Avantage : Rapide, pas besoin de recompiler.

Inconvénient : Spécificité élevée nécessaire.

Méthode :

/* Après Bootstrap */
.btn-primary {
    background-color: #custom-color;
    border-color: #custom-color;
}

Avec spécificité :

.btn.btn-primary {
    background-color: #custom-color;
}

Avec !important (à éviter) :

.btn-primary {
    background-color: #custom-color !important;
}

3. Custom build​

Processus :

  1. Importer seulement les parties nécessaires
  2. Personnaliser les variables
  3. Compiler un CSS personnalisé

Exemple :

// Imports sélectifs
@import "bootstrap/functions";
@import "bootstrap/variables";

// Personnalisation
$primary: #custom-color;

@import "bootstrap/mixins";
@import "bootstrap/grid";
@import "bootstrap/buttons";
// ... seulement ce dont vous avez besoin

Personnalisation complète​

Structure recommandée :

scss/
├── _custom-variables.scss
├── _custom-overrides.scss
└── main.scss

main.scss :

// 1. Variables personnalisées
@import "custom-variables";

// 2. Bootstrap (utilise vos variables)
@import "~bootstrap/scss/bootstrap";

// 3. Overrides additionnels si nécessaire
@import "custom-overrides";

Variables à personnaliser​

Couleurs​

$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;
$light: #f8f9fa;
$dark: #343a40;

Créer vos propres couleurs :

$custom-colors: (
    "brand": #ff6b6b,
    "accent": #4ecdc4
);

$theme-colors: map-merge($theme-colors, $custom-colors);

Typographie​

$font-family-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
$font-family-serif: Georgia, "Times New Roman", serif;
$font-family-monospace: 'Courier New', monospace;

$font-size-base: 1rem;
$font-size-sm: $font-size-base * 0.875;
$font-size-lg: $font-size-base * 1.25;

$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;

Espacements​

$spacer: 1rem;
$spacers: (
    0: 0,
    1: $spacer * 0.25,
    2: $spacer * 0.5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3,
    6: $spacer * 4,
    7: $spacer * 5
);

Border radius​

$border-radius: 0.5rem;
$border-radius-sm: 0.25rem;
$border-radius-lg: 1rem;
$border-radius-pill: 50rem;

Breakpoints​

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px
);

Thème personnalisé​

Créer un thème complet :

// _theme.scss
$primary: #6366f1;
$secondary: #8b5cf6;
$success: #10b981;
$danger: #ef4444;
$warning: #f59e0b;
$info: #3b82f6;

$body-bg: #ffffff;
$body-color: #1f2937;

$border-radius: 0.5rem;
$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

// Import Bootstrap
@import "~bootstrap/scss/bootstrap";

Override sélectif​

Quand override est nécessaire :

  • Modifications très spécifiques
  • Pas de variable disponible
  • Quick fixes

Méthode propre :

// Après import Bootstrap
.btn-custom {
    @extend .btn-primary;
    background-color: #custom-color;
    border-color: #custom-color;
    
    &:hover {
        background-color: darken(#custom-color, 10%);
    }
}

Exercices guidés​

Exercice 1 : Variables de base​

Personnalisez :

  • Couleurs principales
  • Typographie
  • Espacements
  • Compilez et testez

Exercice 2 : Thème complet​

Créez un thème :

  • Palette de couleurs cohérente
  • Typographie personnalisée
  • Border radius uniforme
  • Testez sur tous les composants

Exercice 3 : Custom build​

Créez un build personnalisé :

  • Imports sélectifs
  • Variables personnalisées
  • Comparez la taille du CSS

Exercice 4 : Override CSS​

Testez l'override :

  • Modifiez un composant spécifique
  • Utilisez la bonne spécificité
  • Évitez !important

Exercice 5 : Thème dark​

Créez un thème dark :

  • Variables pour dark mode
  • Media query prefers-color-scheme
  • Toggle manuel (optionnel)

❌ Erreurs fréquentes​

Erreur 1 : Variables après import​

❌ Mauvais :

@import "bootstrap";
$primary: #custom; // Trop tard

✅ Bon :

$primary: #custom; // Avant
@import "bootstrap";

Pourquoi : Variables doivent être définies avant l'import.

Erreur 2 : Override avec spécificité insuffisante​

❌ Mauvais :

.btn-primary {
    background-color: #custom; // Spécificité trop faible
}

✅ Bon :

.btn.btn-primary {
    background-color: #custom; // Spécificité plus élevée
}

Pourquoi : Bootstrap a une spécificité élevée.

Erreur 3 : !important partout​

❌ Mauvais :

.btn-primary {
    background-color: #custom !important;
}

✅ Bon :

// Utiliser variables SCSS ou spécificité

Pourquoi : !important = difficile à maintenir.

Erreur 4 : Modifier Bootstrap directement​

❌ Mauvais :

// Modifier node_modules/bootstrap/...

✅ Bon :

// Créer _custom-variables.scss
// Importer avant Bootstrap

Pourquoi : Modifications perdues à la mise à jour.

Erreur 5 : Pas de cohérence​

❌ Mauvais :

$primary: blue;
$secondary: red; // Pas cohérent

✅ Bon :

// Palette cohérente
$primary: #007bff;
$secondary: #6c757d; // Dérivé de primary

Pourquoi : Cohérence = design professionnel.

🚀 Mini-projet​

Mission : Créer un thème Bootstrap personnalisé

Créez un thème complet :

Personnalisation :

  • Palette de couleurs cohérente
  • Typographie personnalisée (Google Fonts)
  • Espacements adaptés
  • Border radius uniforme
  • Thème dark (optionnel)

Structure :

  • _custom-variables.scss
  • main.scss avec imports
  • Compilation fonctionnelle

Critères :

  • ✅ Variables bien organisées
  • ✅ Thème cohérent
  • ✅ Tous les composants personnalisés
  • ✅ Compilation sans erreurs
  • ✅ Design unique

Objectif : Maîtriser la personnalisation Bootstrap pour créer un design unique.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez la personnalisation Bootstrap et avez créé un thème personnalisé fonctionnel.