Personnaliser

Options Sass

Les options Sass $enable-* activent ou désactivent des fonctions entières du CSS compilé : ombres, dégradés, transitions, grille, mode sombre… Déclarez-les avant l’import de Cauri.

Chaque option est un booléen défini avec !default. Pour la changer, importez d’abord variables, déclarez votre valeur, puis importez cauri. Comme pour les autres variables, ne modifiez jamais les fichiers du paquet : ils seraient écrasés à la prochaine mise à jour.

Activer les ombres#

Par défaut, Cauri est « à plat ». Avec cette option, les boutons, les champs et d’autres composants reçoivent une ombre légère.

@import "@bdu/cauri/scss/variables";

$enable-shadows: true;

@import "@bdu/cauri/scss/cauri";

Options disponibles

Valeurs par défaut lues dans les sources Sass. Chaque effet a été vérifié en comparant le CSS compilé avec et sans l’option.

Options disponibles
Option	Par défaut	Effet
`$enable-caret`	`true`	Ajoute la petite flèche (`::after`) des boutons à menu déroulant `.dropdown-toggle`. À `false`, le bouton n’a plus de flèche.
`$enable-rounded`	`true`	Arrondit les angles avec les rayons `$border-radius`. À `false`, tous les composants ont des angles droits.
`$enable-shadows`	`false`	Ajoute des ombres aux boutons, aux champs, aux cartes de liste et à d’autres composants. Ne concerne pas les utilitaires `shadow-*`, qui sont toujours générés.
`$enable-gradients`	`false`	Ajoute un dégradé léger (`--bs-gradient`) en fond des boutons et d’autres composants colorés.
`$enable-transitions`	`true`	Génère les transitions CSS (survol des boutons, fondu, repli). À `false`, les composants changent d’état sans animation.
`$enable-reduced-motion`	`true`	Coupe les transitions quand le système demande de réduire les animations (`prefers-reduced-motion`). Ne la désactivez pas : c’est une règle d’accessibilité.
`$enable-smooth-scroll`	`true`	Active le défilement doux de la page (`scroll-behavior: smooth`), seulement si l’utilisateur n’a pas demandé de réduire les animations.
`$enable-grid-classes`	`true`	Génère `.row` et `.col-*`. À `false`, la feuille perd plus d’un millier de lignes de CSS : utile si vous n’utilisez que la grille CSS ou Flexbox.
`$enable-container-classes`	`true`	Génère `.container`, `.container-fluid` et les conteneurs par point de rupture.
`$enable-cssgrid`	`false`	Génère la grille CSS (`.grid`, `.g-col-*`). Voir Grille CSS.
`$enable-button-pointers`	`true`	Affiche le curseur « main » sur les boutons non désactivés.
`$enable-rfs`	`true`	Rend les tailles de titres et d’autres valeurs fluides : elles grandissent avec la largeur de l’écran. À `false`, les titres gardent leur taille fixe.
`$enable-validation-icons`	`true`	Ajoute l’icône de succès ou d’erreur dans les champs validés (`.was-validated`, `.is-valid`, `.is-invalid`).
`$enable-negative-margins`	`false`	Génère les marges négatives (`.m-n1`, `.mt-n3`…).
`$enable-important-utilities`	`true`	Ajoute `!important` à toutes les classes utilitaires, pour qu’elles l’emportent sur les styles des composants. À `false`, elles pèsent comme des classes ordinaires.
`$enable-dark-mode`	`true`	Génère les variables du mode sombre (`[data-bs-theme=dark]`). Voir Modes de couleur.
`$enable-deprecation-messages`	`true`	Affiche à la compilation les avertissements sur les variables ou fonctions obsolètes. N’a aucun effet sur le CSS.

Une option de mode de couleur

La variable $color-mode-type n’est pas un booléen mais la complète : data (valeur par défaut) applique le mode sombre quand l’attribut data-bs-theme="dark" est présent ; media-query le suit automatiquement selon le réglage du système, sans attribut ni JavaScript.

Suivre le réglage du système#

@import "@bdu/cauri/scss/variables";

$color-mode-type: media-query;

@import "@bdu/cauri/scss/cauri";

Alléger la feuille de style#

Combinez plusieurs options pour une application qui n’utilise pas la grille de colonnes et n’a pas besoin de mode sombre.

@import "@bdu/cauri/scss/variables";

$enable-grid-classes: false;
$enable-dark-mode: false;
$enable-shadows: true;
$enable-negative-margins: true;

@import "@bdu/cauri/scss/cauri";

À savoir

Les options changent le CSS compilé : elles ne peuvent pas être modifiées depuis le navigateur.
Désactiver la grille retire aussi les classes .row et .col-* utilisées par les exemples de la documentation.
Les options ne remplacent pas les variables de la charte : pour changer les couleurs ou les rayons, voir la page Sass.
Les cartes ($theme-colors, $spacers…) se modifient différemment : voir Cartes Sass.