@dsrc-cm/core

Design Systeme de la Republique du Cameroun — Composants CSS officiels.

Le DSRC fournit une bibliothèque de composants CSS prêts à l'emploi pour les sites et applications de l'administration camerounaise.

Installation

npm install @dsrc-cm/core

Utilisation

Import CSS complet

<link rel="stylesheet" href="node_modules/@dsrc-cm/core/dist/dsrc.min.css">

Ou via un bundler (Vite, Webpack, etc.) :

import '@dsrc-cm/core';

Import par composant (PostCSS)

@import '@dsrc-cm/core/src/components/button/button.css';
@import '@dsrc-cm/core/src/components/alert/alert.css';

Composants disponibles (37)

| Composant | Classe | Description | |-----------|--------|-------------| | Accordion | .dsrc-accordion | Sections repliables FAQ | | Alert | .dsrc-alert | Messages d'information, succès, erreur, avertissement | | Badge | .dsrc-badge | Indicateur de statut compact | | Breadcrumb | .dsrc-breadcrumb | Fil d'Ariane | | Button | .dsrc-btn | Bouton d'action (primaire, secondaire, tertiaire) | | Callout | .dsrc-callout | Mise en avant avec accent latéral | | Card | .dsrc-card | Carte de contenu avec image, titre, description | | Checkbox | .dsrc-checkbox | Case à cocher stylisée | | Consent | .dsrc-consent | Bannière de consentement cookies | | Download | .dsrc-download | Lien de téléchargement | | Dropdown | .dsrc-dropdown | Menu déroulant | | Highlight | .dsrc-highlight | Texte mis en exergue | | Input | .dsrc-input | Champ de saisie texte | | Label | .dsrc-label | Étiquette de formulaire | | Link | .dsrc-link | Lien stylisé | | Logo | .dsrc-logo | Logo institutionnel | | Modal | .dsrc-modal | Fenêtre modale (dialog natif) | | Notice | .dsrc-notice | Bandeau d'avertissement | | Pagination | .dsrc-pagination | Navigation paginée | | Password | .dsrc-password | Champ mot de passe avec affichage | | Quote | .dsrc-quote | Citation avec source | | Radio | .dsrc-radio | Bouton radio stylisé | | Range | .dsrc-range | Curseur de sélection | | Search | .dsrc-search | Barre de recherche | | Select | .dsrc-select | Liste déroulante | | Sidemenu | .dsrc-sidemenu | Menu latéral de navigation | | Spinner | .dsrc-spinner | Indicateur de chargement | | Stepper | .dsrc-stepper | Indicateur d'étapes | | Summary | .dsrc-summary | Sommaire / table des matières | | Tab | .dsrc-tab | Onglets ARIA | | Table | .dsrc-table | Tableau de données | | Tag | .dsrc-tag | Étiquette interactive | | Tile | .dsrc-tile | Tuile cliquable | | Toggle | .dsrc-toggle | Interrupteur on/off | | Tooltip | .dsrc-tooltip | Infobulle | | Translate | .dsrc-translate | Sélecteur de langue FR/EN | | Upload | .dsrc-upload | Zone d'envoi de fichier |

Layouts (7)

| Layout | Classe | Description | |--------|--------|-------------| | Bandeau | .dsrc-bandeau | Bande d'identité institutionnelle | | En-tête | .dsrc-entete | En-tête de page | | Footer | .dsrc-footer | Pied de page | | Grid | .dsrc-grid | Grille responsive 12 colonnes | | Hero | .dsrc-hero | Section héro | | Main | .dsrc-main | Contenu principal | | Navigation | .dsrc-nav | Barre de navigation |

Classes utilitaires (189)

Le DSRC inclut des classes utilitaires pour le prototypage rapide :

Couleurs de texte

<!-- Sémantiques (recommandé) -->
<p class="dsrc-text-primary">Vert principal</p>
<p class="dsrc-text-white">Blanc</p>
<p class="dsrc-text-error">Erreur</p>
<p class="dsrc-text-secondary">Texte secondaire</p>

<!-- Par palette (50-900) -->
<p class="dsrc-text-green-500">Vert 500</p>
<p class="dsrc-text-red-400">Rouge drapeau</p>
<p class="dsrc-text-blue-700">Bleu info</p>

Couleurs de fond

<div class="dsrc-bg-primary dsrc-text-white">Fond vert</div>
<div class="dsrc-bg-success">Fond succès</div>
<div class="dsrc-bg-green-50">Fond vert clair</div>

Espacement, flexbox, display, bordures

<div class="dsrc-p-4 dsrc-mb-2">Padding 16px, margin-bottom 8px</div>
<div class="dsrc-d-flex dsrc-gap-3 dsrc-items-center">Flexbox</div>
<div class="dsrc-border dsrc-rounded-lg">Bordure + radius</div>

Les 8 palettes de couleurs : green, red, yellow, blue, gray, purple, teal, orange — chacune avec des nuances de 50 à 900.

Système de couleurs (3 couches)

Primitifs      --dsrc-color-green-500   (valeur brute)
                    ↓
Sémantique     --dsrc-color-primary     (décision de design)
                    ↓
Compat         --dsrc-color-primaire    (ancien nom FR)

Les anciens noms français (--dsrc-color-primaire, dsrc-text-blanc, etc.) fonctionnent toujours.

Exemple rapide

<!DOCTYPE html>
<html lang="fr">
<head>
  <link rel="stylesheet" href="node_modules/@dsrc-cm/core/dist/dsrc.min.css">
</head>
<body>
  <button class="dsrc-btn">Action principale</button>
  <button class="dsrc-btn dsrc-btn--secondary">Action secondaire</button>

  <div class="dsrc-alert dsrc-alert--success">
    <p class="dsrc-alert__title">Succès</p>
    <p>Votre demande a été enregistrée.</p>
  </div>

  <h2 class="dsrc-text-primary dsrc-text-bold">Titre en vert</h2>
  <p class="dsrc-text-secondary dsrc-mb-4">Texte secondaire avec marge</p>
</body>
</html>

Conventions

• BEM : .dsrc-{composant}__element--modifier
• Tokens CSS : variables --dsrc-* (couleurs, typographie, espacement)
• Typographie : IBM Plex Sans / IBM Plex Mono
• Couleur primaire : #007A2B (vert de l'État camerounais)
• Accessibilité : forced-colors, prefers-reduced-motion, styles d'impression

Tailles

| Fichier | Taille | |---------|--------| | dsrc.css | ~330 KB | | dsrc.min.css | ~174 KB |

Licence

MIT — NZIDJOUO FONJI Terence Hill