Bootstrap Codexia

Ce document décrit l'intégration et la personnalisation de Bootstrap 5 pour Codexia. Objectif : appliquer le feeling bento et la palette Radix Colors de manière cohérente.

Ce que fournit l'intégration

• Bootstrap 5 (SCSS + JS) avec un point d'entrée unique.
• Un jeu de tokens Codexia pour la palette Radix.
• Des variables SCSS préconfigurées pour les composants (boutons, cards, forms, tables).
• Des utilitaires bento (grille, cards, spacing) pour la structure des pages.

Installation (Symfony + Composer)

1. Ajouter Bootstrap 5 au projet (AssetMapper ou Encore selon le pipeline).
2. Importer l'entrée SCSS et JS dans le pipeline d'assets (Vite, Encore, Webpack).

Exemple d'entrée SCSS :

// assets/styles/codexia.scss
@use "tokens" as *;
@use "overrides" as *;
@import "bootstrap/scss/bootstrap";

Palette Radix appliquee a Bootstrap

Mappez les tokens Radix aux variables Bootstrap avant l'import de Bootstrap.

// tokens Radix (exemples, a mapper avec les valeurs officielles Radix)
$slate-1: #f8f9fa;
$slate-6: #d0d7de;
$slate-11: #4b5563;
$slate-12: #0f172a;
$blue-9: #2563eb;
$blue-10: #1d4ed8;
$blue-11: #1e40af;
$cyan-9: #06b6d4;
$green-9: #16a34a;
$amber-9: #d97706;
$red-9: #dc2626;

// mapping Bootstrap
$primary: $blue-9;
$link-color: $blue-9;
$body-bg: $slate-1;
$body-color: $slate-12;
$text-muted: $slate-11;
$border-color: $slate-6;
$card-bg: #ffffff;
$card-border-color: $slate-6;
$success: $green-9;
$warning: $amber-9;
$danger: $red-9;
$info: $cyan-9;

$border-radius: .75rem;
$box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
$focus-ring-color: rgba($blue-9, .35);

Notes:

• Remplacez les valeurs par les couleurs officielles de Radix Colors.
• Utilisez les versions Dark de Radix pour un theme sombre.

Bento layout avec Bootstrap

Exemple simple pour une section bento:

<div class="container py-5">
  <div class="row g-3 g-lg-4">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100">...</div>
    </div>
    <div class="col-12 col-md-6 col-lg-8">
      <div class="card h-100">...</div>
    </div>
  </div>
</div>

Bonnes pratiques:

• Garder des cards hautes et nettes, avec padding 16-24 px.
• Limiter les ombres et preferer des bordures fines.
• Utiliser row g-3 g-lg-4 pour un rythme coherent.

Backoffice CRUD (Bootstrap)

• Tables: table, table-sm, table-hover + entete sticky-top.
• Filtres: offcanvas ou collapse pour les facettes.
• Formulaires: labels au-dessus, form-text court, erreurs claires.
• Actions: btn-primary pour l'action principale, btn-outline pour le reste.

Gouvernance

• Toute surcharge doit passer par les tokens et variables SCSS.
• Eviter les overrides inline ou via styles isolés.

Implémentation

Historique des décisions