Personnaliser

Cartes Sass

Une carte Sass (map) est une liste de paires nom-valeur. Cauri en utilise pour ses couleurs, ses espacements, ses points de rupture et ses utilitaires : en les étendant, vous ajoutez des classes sans écrire de CSS.

Cartes principales

Cartes principales
Carte	Contenu	Classes générées
`$theme-colors`	Couleurs du thème : `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `light`, `dark`	`btn-`, `text-bg-`, `alert-`, `badge`, `text-`, `bg-`, `border-`…
`$grid-breakpoints`	Largeurs des points de rupture : `xs` 0, `sm` 576px, `md` 768px, `lg` 992px, `xl` 1200px, `xxl` 1400px	Suffixes responsives (`col-md-6`, `d-lg-none`…)
`$container-max-widths`	Largeur maximale des conteneurs : `sm` 540px, `md` 720px, `lg` 960px, `xl` 1140px, `xxl` 1320px	`.container`
`$spacers`	Échelle d’espacement, de `0` à `5` : 0, 0,25 rem, 0,5 rem, 1 rem, 1,5 rem, 3 rem	`m-`, `p-`, `gap-`, gouttières `g-`
`$font-sizes`	Tailles de texte `1` à `6`, égales aux tailles de `h1` à `h6`	`fs-1` à `fs-6`
`$utilities`	Définition de chaque famille d’utilitaires (propriété, nom de classe, valeurs, variantes)	Toutes les classes utilitaires
`$grays`, `$colors`	Palette de gris et couleurs de base	Variables `--bs-gray-*` et `--bs-blue`…
`$border-widths`	Épaisseurs de bordure `1` à `5`	`border-1` à `border-5`
`$aspect-ratios`	Proportions `1x1`, `4x3`, `16x9`, `21x9`	`ratio-*`
`$zindex-levels`	Niveaux de superposition `n1`, `0` à `3`	`z-*`

Respecter l'ordre d'import

Une carte se modifie en trois temps, toujours dans cet ordre :

Importer variables : il définit les cartes avec leurs valeurs d’origine.
Modifier la carte avec map-merge (ajouter ou remplacer) ou map-remove (retirer).
Importer cauri : il génère le CSS à partir des cartes modifiées.

Importer cauri trop tôt compile le CSS avec les valeurs d’origine. Importer variables trop tard écrase vos modifications.

Exception : la carte $utilities n’est pas dans variables. Pour elle, importez config à la place (voir plus bas).

Ajouter une couleur#

Une couleur ajoutée à $theme-colors génère btn-epargne, text-bg-epargne, alert-epargne, text-epargne, bg-epargne, border-epargne, badge… Les classes text-bg-* choisissent le texte blanc ou noir selon le contraste.

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

$theme-colors: map-merge($theme-colors, ("epargne": #5B3E8A));

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

Contrôlez toujours le contraste de la nouvelle couleur avec le texte qui la recouvre : 4,5:1 au minimum. Voir Accessibilité.

Pour remplacer une couleur existante, indiquez la même clé : map-merge($theme-colors, ("warning": #C77700)). La valeur de la carte passe avant celle de la variable $warning.

Ajouter des tailles d'espacement#

Les clés 6 et 7 créent m-6, mt-7, p-6, gap-7, g-6… dans tous les sens et à tous les points de rupture.

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

$spacers: map-merge($spacers, (
  6: $spacer * 4,
  7: $spacer * 6
));

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

Ajouter un point de rupture#

Complétez aussi $container-max-widths pour que le conteneur s’élargisse à ce palier. Les classes col-xxxl-*, d-xxxl-none, container-xxxl… apparaissent.

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

$grid-breakpoints: map-merge($grid-breakpoints, (xxxl: 1800px));
$container-max-widths: map-merge($container-max-widths, (xxxl: 1680px));

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

Ajouter des tailles de texte#

Les clés 7 et 8 créent fs-7 et fs-8, pour du texte plus petit que fs-6.

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

$font-sizes: map-merge($font-sizes, (
  7: .875rem,
  8: .75rem
));

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

Retirer un point de rupture#

Retirer xxl allège la feuille. N’utilisez plus de classes -xxl ensuite, et gardez les deux cartes cohérentes.

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

$grid-breakpoints: map-remove($grid-breakpoints, xxl);
$container-max-widths: map-remove($container-max-widths, xxl);

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

Étendre les utilitaires

Chaque entrée de $utilities décrit une famille de classes : la propriété CSS (property), le préfixe de la classe (class), les values et, si besoin, les variantes responsive, state (survol) ou print. Voir la page API des utilitaires.

Comme $utilities est défini par config et non par variables, importez config pour la modifier. L’import de cauri qui suit ne perd pas vos changements : pour retirer une famille, donnez-lui la valeur null plutôt que d’utiliser map-remove, que le second chargement de config annulerait.

Ajouter, modifier et retirer un utilitaire#

Cet exemple crée cursor-pointer et cursor-grab, ajoute opacity-10 à la famille existante et retire les classes de flottement.

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

$utilities: map-merge($utilities, (
  // Nouvelle famille
  "cursor": (
    property: cursor,
    class: cursor,
    values: auto pointer grab
  ),
  // Ajout d'une valeur à une famille existante
  "opacity": map-merge(
    map-get($utilities, "opacity"),
    (values: map-merge(map-get(map-get($utilities, "opacity"), "values"), (10: .1)))
  ),
  // Retrait d'une famille
  "float": null
));

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

Utiliser les cartes dans vos feuilles#

Avec config, vos propres styles lisent les cartes sans produire de CSS supplémentaire.

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

.bandeau-agence {
  padding: map-get($spacers, 4);
  border-left: 4px solid map-get($theme-colors, "success");

  @each $nom, $largeur in $grid-breakpoints {
    @if $largeur > 0 {
      @include media-breakpoint-up($nom) {
        padding: map-get($spacers, 5);
      }
    }
  }
}