Guide d'Utilisation

Apprenez à utiliser le système de design CCB V2 dans vos projets.

Introduction

Le CCB Corporate Design System V2 est un système de design moderne et modulaire créé spécifiquement pour la Caisse des Compensations du Bâtiment de Genève. Il fournit tous les outils nécessaires pour créer des interfaces utilisateur cohérentes, accessibles et belles.

Objectif principal : Permettre aux développeurs de créer rapidement des interfaces de qualité tout en maintenant une cohérence visuelle à travers toute l'application.

Installation

1. Inclure les fichiers CSS

Ajoutez ce lien dans votre <head> ou dans votre layout:

<!-- Font Awesome pour les icônes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

<!-- CCB Design System V2 -->
<link rel="stylesheet" href="~/css/CorporateDesignV2/corporate-design-v2.css" asp-append-version="true" />

2. Inclure le JavaScript

Ajoutez ce script avant la fermeture de </body>:

<script src="~/js/CorporateDesignV2/corporate-design-v2.js" asp-append-version="true"></script>

3. Utiliser le Layout

Dans vos vues Razor, spécifiez le layout:

@{
    ViewData["Title"] = "Ma Page";
    Layout = "_LayoutCorporateDesignV2";
}

Structure des Fichiers

CCB-WEB/
├── wwwroot/
│   ├── css/
│   │   └── CorporateDesignV2/
│   │       ├── 00-design-tokens.css      (Variables CSS)
│   │       ├── 01-base.css               (Styles de base)
│   │       ├── 02-utilities.css          (Classes utilitaires)
│   │       ├── components/
│   │       │   ├── buttons.css           (Boutons)
│   │       │   ├── forms.css             (Formulaires)
│   │       │   ├── cards.css             (Cards)
│   │       │   └── components-misc.css   (Autres composants)
│   │       └── corporate-design-v2.css   (Fichier principal)
│   │
│   └── js/
│       └── CorporateDesignV2/
│           └── corporate-design-v2.js    (JavaScript)
│
├── Controllers/
│   └── CorporateDesignV2Controller.cs
│
└── Views/
    ├── CorporateDesignV2/
    │   ├── Index.cshtml
    │   ├── Buttons.cshtml
    │   ├── Forms.cshtml
    │   └── ...
    └── Shared/
        └── _LayoutCorporateDesignV2.cshtml

Design Tokens (Variables CSS)

Le système utilise des variables CSS (Custom Properties) pour tous les tokens de design. Cela permet une personnalisation facile et une cohérence garantie.

Couleurs

/* Couleurs CCB */
var(--ccb-orange)     /* #FF6900 - Couleur principale */
var(--ccb-blue)       /* #0066CC - Couleur secondaire */

/* Couleurs sémantiques */
var(--success)        /* Vert - Actions réussies */
var(--warning)        /* Jaune - Avertissements */
var(--danger)         /* Rouge - Erreurs/suppressions */
var(--info)           /* Cyan - Informations */

/* Couleurs neutres */
var(--gray-900)       /* Très foncé - Textes principaux */
var(--gray-600)       /* Moyen - Textes secondaires */
var(--gray-300)       /* Clair - Bordures */
var(--gray-100)       /* Très clair - Backgrounds */

Espacements

/* Système basé sur 4px (0.25rem) */
var(--spacing-1)      /* 4px */
var(--spacing-2)      /* 8px */
var(--spacing-3)      /* 12px */
var(--spacing-4)      /* 16px */
var(--spacing-6)      /* 24px */
var(--spacing-8)      /* 32px */

Ombres

var(--shadow-sm)      /* Petite ombre - Inputs, cards légères */
var(--shadow-base)    /* Ombre standard - Cards */
var(--shadow-lg)      /* Grande ombre - Modals, dropdowns */
var(--shadow-xl)      /* Très grande ombre - Éléments flottants */

Utilisation des Composants

Boutons

8 variantes, 5 tailles, états de loading

<button class="btn btn-primary">
    Bouton
</button>
Voir documentation

Formulaires

Inputs, selects, checkboxes, switches

<input type="text" 
    class="form-control" 
    placeholder="Texte...">
Voir documentation

Cards

Cards standards, stats, pricing, profile

<div class="card">
    <div class="card-body">
        Contenu
    </div>
</div>
Voir documentation

Classes Utilitaires

Le système fournit des classes utilitaires pour les tâches courantes:

Flexbox

<div class="d-flex justify-between align-center gap-4">
    <!-- Contenu -->
</div>

Espacements

<div class="mt-4 mb-6 p-4">
    Margin-top 16px, Margin-bottom 24px, Padding 16px
</div>

Texte

<p class="text-center text-lg font-semibold text-primary">
    Texte centré, large, semi-bold, couleur primaire
</p>

Couleurs

<div class="bg-primary text-white p-4 rounded-lg">
    Background orange, texte blanc, padding, arrondi
</div>

JavaScript API

Le système expose une API JavaScript globale CCBDesign:

Toast Messages

// Afficher un message toast
CCBDesign.showToast('Sauvegarde réussie!', 'success', 3000);

// Types: 'success', 'warning', 'danger', 'info'

Modals

// Ouvrir un modal
const modal = document.getElementById('myModal');
CCBDesign.openModal(modal);

// Fermer un modal
CCBDesign.closeModal(modal);

Confirmation

// Confirmer une action
CCBDesign.confirm(
    'Voulez-vous vraiment supprimer ?',
    () => console.log('Confirmé'),
    () => console.log('Annulé')
);

Bonnes Pratiques

À Faire

  • Utilisez les variables CSS pour les couleurs et espacements
  • Respectez la hiérarchie typographique (h1 > h2 > h3...)
  • Limitez les boutons primaires à un ou deux par page
  • Utilisez des icônes pour améliorer la compréhension
  • Testez l'accessibilité avec un lecteur d'écran
  • Assurez un contraste suffisant (WCAG AA minimum)

À Éviter

  • Ne modifiez pas directement les fichiers CSS du système
  • N'utilisez pas de valeurs en dur (hardcoded) pour les couleurs
  • Évitez les styles inline sauf si absolument nécessaire
  • Ne créez pas de nouveaux composants sans consulter le système
  • N'oubliez pas les états :hover, :focus, :active

Accessibilité

Le système est conçu avec l'accessibilité en tête (WCAG 2.1 niveau AA):

  • Contraste: Tous les textes ont un ratio de contraste suffisant
  • Focus: Les éléments interactifs ont des indicateurs de focus visibles
  • Sémantique: Utilisation appropriée des éléments HTML5
  • ARIA: Attributs ARIA pour les composants complexes
  • Clavier: Tous les éléments sont accessibles au clavier
  • Lecteurs d'écran: Labels et descriptions appropriés
Conseil: Testez toujours votre interface avec un lecteur d'écran (NVDA, JAWS, VoiceOver) et la navigation au clavier uniquement.

Design Responsive

Le système utilise une approche mobile-first avec des breakpoints standards:

/* Breakpoints */
--breakpoint-sm: 640px    /* Téléphone en paysage */
--breakpoint-md: 768px    /* Tablette */
--breakpoint-lg: 1024px   /* Desktop */
--breakpoint-xl: 1280px   /* Large desktop */
--breakpoint-2xl: 1536px  /* Très large desktop */

Classes Responsive

<!-- Masquer sur mobile -->
<div class="d-md-none">Caché sur tablette et +</div>

<!-- Colonne sur mobile, ligne sur desktop -->
<div class="d-flex flex-sm-column flex-md-row">...</div>

Support & Contribution

Besoin d'Aide ?

Consultez la documentation ou contactez l'équipe de design.

Contacter le support

Signaler un Bug

Trouvé un problème ? Signalez-le sur notre système de tickets.

Signaler

Contribuer

Proposez de nouveaux composants ou améliorations.

Contribuer