Thématisation Bootstrap

Personnalisez Bootstrap 4 avec nos nouvelles variables Sass intégrées pour les préférences de style globales afin de faciliter les changements de thème et de composants.

Introduction

Dans Bootstrap 3, la thématisation était en grande partie motivée par des remplacements de variables dans LESS, un CSS personnalisé et une feuille de style de thème distincte que nous avons incluse dans nos distfichiers. Avec un peu d'effort, on pourrait complètement repenser l'apparence de Bootstrap 3 sans toucher aux fichiers principaux. Bootstrap 4 propose une approche familière, mais légèrement différente.

Désormais, la thématisation est réalisée par des variables Sass, des cartes Sass et des CSS personnalisés. Il n'y a plus de feuille de style de thème dédiée ; à la place, vous pouvez activer le thème intégré pour ajouter des dégradés, des ombres, etc.

Toupet

Utilisez nos fichiers source Sass pour tirer parti des variables, des cartes, des mixins, etc. lors de la compilation de Sass à l'aide de votre propre pipeline d'actifs.

Structure du fichier

Dans la mesure du possible, évitez de modifier les fichiers principaux de Bootstrap. Pour Sass, cela signifie créer votre propre feuille de style qui importe Bootstrap afin que vous puissiez la modifier et l'étendre. En supposant que vous utilisez un gestionnaire de packages comme npm, vous aurez une structure de fichiers qui ressemble à ceci :

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Si vous avez téléchargé nos fichiers source et que vous n'utilisez pas de gestionnaire de packages, vous souhaiterez configurer manuellement quelque chose de similaire à cette structure, en séparant les fichiers source de Bootstrap des vôtres.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importation

Dans votre custom.scssfichier , vous importerez les fichiers Sass source de Bootstrap. Vous avez deux options : inclure tout Bootstrap ou choisir les pièces dont vous avez besoin. Nous encourageons ce dernier, mais sachez qu'il existe certaines exigences et dépendances entre nos composants. Vous devrez également inclure du JavaScript pour nos plugins.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Une fois cette configuration en place, vous pouvez commencer à modifier n'importe laquelle des variables et cartes Sass dans votre fichier custom.scss. Vous pouvez également commencer à ajouter des parties de Bootstrap sous la // Optionalsection selon vos besoins. Nous vous suggérons d'utiliser la pile d'importation complète de notre bootstrap.scssfichier comme point de départ.

Valeurs par défaut des variables

Chaque variable Sass dans Bootstrap inclut le !defaultdrapeau vous permettant de remplacer la valeur par défaut de la variable dans votre propre Sass sans modifier le code source de Bootstrap. Copiez et collez les variables selon vos besoins, modifiez leurs valeurs et supprimez l' !defaultindicateur. Si une variable a déjà été affectée, elle ne sera pas réaffectée par les valeurs par défaut dans Bootstrap.

Vous trouverez la liste complète des variables de Bootstrap dans scss/_variables.scss. Certaines variables sont définies sur null, ces variables ne génèrent pas la propriété à moins qu'elles ne soient remplacées dans votre configuration.

Les remplacements de variables doivent intervenir après l'importation de nos fonctions, variables et mixins, mais avant le reste des importations.

Voici un exemple qui change le background-coloret colorpour le <body>lors de l'importation et de la compilation de Bootstrap via npm :

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Répétez si nécessaire pour toute variable dans Bootstrap, y compris les options globales ci-dessous.

Cartes et boucles

Bootstrap 4 comprend une poignée de cartes Sass, des paires clé-valeur qui facilitent la génération de familles de CSS associées. Nous utilisons les cartes Sass pour nos couleurs, les points d'arrêt de la grille, etc. Tout comme les variables Sass, toutes les cartes Sass incluent le !defaultdrapeau et peuvent être remplacées et étendues.

Certaines de nos cartes Sass sont fusionnées en cartes vides par défaut. Ceci est fait pour permettre une expansion facile d'une carte Sass donnée, mais se fait au prix de rendre légèrement plus difficile la suppression d'éléments d'une carte.

Modifier la carte

Pour modifier une couleur existante dans notre $theme-colorscarte, ajoutez ce qui suit à votre fichier Sass personnalisé :

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Ajouter à la carte

Pour ajouter une nouvelle couleur à $theme-colors, ajoutez la nouvelle clé et la nouvelle valeur :

$theme-colors: (
  "custom-color": #900
);

Supprimer de la carte

Pour supprimer des couleurs de $theme-colors, ou de toute autre carte, utilisez map-remove. Sachez que vous devez l'insérer entre nos exigences et nos options :

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Clés requises

Bootstrap suppose la présence de certaines clés spécifiques dans les cartes Sass telles que nous les utilisons et les étendons nous-mêmes. Lorsque vous personnalisez les cartes incluses, vous pouvez rencontrer des erreurs lorsque la clé d'une carte Sass spécifique est utilisée.

Par exemple, nous utilisons les touches , et de primarypour successles liens, les boutons et les états de formulaire. Le remplacement des valeurs de ces clés ne devrait poser aucun problème, mais leur suppression peut entraîner des problèmes de compilation Sass. Dans ces cas, vous devrez modifier le code Sass qui utilise ces valeurs.danger$theme-colors

Les fonctions

Bootstrap utilise plusieurs fonctions Sass, mais seul un sous-ensemble est applicable à la thématisation générale. Nous avons inclus trois fonctions pour obtenir des valeurs à partir des palettes de couleurs :

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Ceux-ci vous permettent de choisir une couleur à partir d'une carte Sass un peu comme vous utiliseriez une variable de couleur de la v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Nous avons également une autre fonction pour obtenir un niveau de couleur particulier à partir de la $theme-colorscarte. Les valeurs de niveau négatives éclaircissent la couleur, tandis que les niveaux plus élevés l'assombrissent.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

En pratique, vous appelleriez la fonction et passeriez deux paramètres : le nom de la couleur de $theme-colors(par exemple, primaire ou danger) et un niveau numérique.

.custom-element {
  color: theme-color-level(primary, -10);
}

Des fonctions supplémentaires pourraient être ajoutées à l'avenir ou votre propre Sass personnalisé pour créer des fonctions de niveau pour des cartes Sass supplémentaires, ou même une générique si vous vouliez être plus verbeux.

Contraste des couleurs

Une fonction supplémentaire que nous incluons dans Bootstrap est la fonction de contraste des couleurs, color-yiq. Il utilise l' espace colorimétrique YIQ pour renvoyer automatiquement une couleur de contraste claire ( #fff) ou foncée ( #111) en fonction de la couleur de base spécifiée. Cette fonction est particulièrement utile pour les mixins ou les boucles où vous générez plusieurs classes.

Par exemple, pour générer des échantillons de couleurs à partir de notre $theme-colorscarte :

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Il peut également être utilisé pour des besoins de contraste ponctuels :

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Vous pouvez également spécifier une couleur de base avec nos fonctions de palette de couleurs :

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Évasion SVG

Nous utilisons la escape-svgfonction pour échapper les caractères <, >et #pour les images d'arrière-plan SVG. Ces caractères doivent être échappés pour rendre correctement les images d'arrière-plan dans IE. Lors de l'utilisation de la escape-svgfonction, les URI de données doivent être entre guillemets.

Fonctions d'addition et de soustraction

Nous utilisons les fonctions addet subtractpour envelopper la calcfonction CSS. L'objectif principal de ces fonctions est d'éviter les erreurs lorsqu'une valeur "sans unité" 0est passée dans une calcexpression. Des expressions comme calc(10px - 0)renverront une erreur dans tous les navigateurs, bien qu'elles soient mathématiquement correctes.

Exemple où le calcul est valide :

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Exemple où le calcul est invalide :

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Options de sécurité

Personnalisez Bootstrap 4 avec notre fichier de variables personnalisées intégré et basculez facilement les préférences CSS globales avec de nouvelles $enable-*variables Sass. Remplacer la valeur d'une variable et recompiler npm run testsi nécessaire.

Vous pouvez trouver et personnaliser ces variables pour les options globales clés dans le scss/_variables.scssfichier Bootstrap.

Couleur

De nombreux composants et utilitaires de Bootstrap sont construits à travers une série de couleurs définies dans une carte Sass. Cette carte peut être bouclée dans Sass pour générer rapidement une série d'ensembles de règles.

Toutes les couleurs

Toutes les couleurs disponibles dans Bootstrap 4 sont disponibles sous forme de variables Sass et d'une carte Sass dans scss/_variables.scssle fichier. Cela sera développé dans les versions mineures ultérieures pour ajouter des nuances supplémentaires, un peu comme la palette de niveaux de gris que nous incluons déjà.

Voici comment vous pouvez les utiliser dans votre Sass :

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Des classes d'utilitaires de couleur sont également disponibles pour définir coloret background-color.

Couleurs du thème

Nous utilisons un sous-ensemble de toutes les couleurs pour créer une palette de couleurs plus petite pour générer des schémas de couleurs, également disponibles sous forme de variables Sass et d'une carte Sass dans le scss/_variables.scssfichier Bootstrap.

Gris

Un ensemble étendu de variables de gris et une carte Sass scss/_variables.scsspour des nuances de gris cohérentes dans votre projet. Notez qu'il s'agit de "gris froids", qui tendent vers un ton bleu subtil, plutôt que vers des gris neutres.

Dans scss/_variables.scss, vous trouverez les variables de couleur de Bootstrap et la carte Sass. Voici un exemple de la $colorscarte Sass :

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Ajoutez, supprimez ou modifiez des valeurs dans la carte pour mettre à jour leur utilisation dans de nombreux autres composants. Malheureusement, à l'heure actuelle, tous les composants n'utilisent pas cette carte Sass. Les futures mises à jour s'efforceront d'améliorer cela. Jusque-là, prévoyez d'utiliser les ${color}variables et cette carte Sass.

Composants

De nombreux composants et utilitaires de Bootstrap sont construits avec des @eachboucles qui itèrent sur une carte Sass. Ceci est particulièrement utile pour générer des variantes d'un composant par notre $theme-colorset créer des variantes réactives pour chaque point d'arrêt. Au fur et à mesure que vous personnalisez ces cartes Sass et recompilez, vous verrez automatiquement vos modifications reflétées dans ces boucles.

Modificateurs

De nombreux composants de Bootstrap sont construits avec une approche de classe de modificateur de base. Cela signifie que la majeure partie du style est contenue dans une classe de base (par exemple, .btn) tandis que les variations de style sont confinées à des classes de modificateurs (par exemple, .btn-danger). Ces classes de modificateurs sont construites à partir de la $theme-colorscarte pour personnaliser le nombre et le nom de nos classes de modificateurs.

Voici deux exemples de la façon dont nous parcourons la $theme-colorscarte pour générer des modificateurs pour le .alertcomposant et tous nos .bg-*utilitaires d'arrière-plan.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Sensible

Ces boucles Sass ne se limitent pas non plus aux cartes de couleurs. Vous pouvez également générer des variantes réactives de vos composants ou utilitaires. Prenons par exemple nos utilitaires d'alignement de texte réactifs où nous mélangeons une @eachboucle pour la $grid-breakpointscarte Sass avec une requête multimédia incluse.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Si vous devez modifier votre $grid-breakpoints, vos modifications s'appliqueront à toutes les boucles itérant sur cette carte.

Variables CSS

Bootstrap 4 inclut environ deux douzaines de propriétés personnalisées CSS (variables) dans son CSS compilé. Celles-ci offrent un accès facile aux valeurs couramment utilisées telles que nos couleurs de thème, nos points d'arrêt et nos piles de polices principales lorsque vous travaillez dans l'inspecteur de votre navigateur, un bac à sable de code ou un prototypage général.

Variables disponibles

Voici les variables que nous incluons (notez que le :rootest obligatoire). Ils se trouvent dans notre _root.scssdossier.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Exemples

Les variables CSS offrent une flexibilité similaire aux variables de Sass, mais sans avoir besoin de compilation avant d'être servies au navigateur. Par exemple, ici, nous réinitialisons les styles de police et de lien de notre page avec des variables CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Variables de point d'arrêt

Bien que nous ayons initialement inclus des points d'arrêt dans nos variables CSS (par exemple, --breakpoint-md), ceux-ci ne sont pas pris en charge dans les requêtes multimédias , mais ils peuvent toujours être utilisés dans les ensembles de règles des requêtes multimédias. Ces variables de point d'arrêt restent dans le CSS compilé pour une compatibilité descendante étant donné qu'elles peuvent être utilisées par JavaScript. En savoir plus dans les spécifications .

Voici un exemple de ce qui n'est pas pris en charge :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Et voici un exemple de ce qui est pris en charge :

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}