@dsrc-cm/core 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +125 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# @dsrc-cm/core
|
|
2
|
+
|
|
3
|
+
**Design Systeme de la Republique du Cameroun** — Composants CSS officiels.
|
|
4
|
+
|
|
5
|
+
Le DSRC fournit une bibliothèque de composants CSS prêts à l'emploi pour les sites et applications de l'administration camerounaise. Conçu sur les principes du [DSFR](https://www.systeme-de-design.gouv.fr/) et adapté au contexte camerounais.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @dsrc-cm/core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Utilisation
|
|
14
|
+
|
|
15
|
+
### Import CSS complet
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<link rel="stylesheet" href="node_modules/@dsrc-cm/core/dist/dsrc.min.css">
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Ou via un bundler (Vite, Webpack, etc.) :
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
import '@dsrc-cm/core';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Import par composant (PostCSS)
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import '@dsrc-cm/core/src/components/button/button.css';
|
|
31
|
+
@import '@dsrc-cm/core/src/components/alert/alert.css';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Composants disponibles
|
|
35
|
+
|
|
36
|
+
| Composant | Classe | Description |
|
|
37
|
+
|-----------|--------|-------------|
|
|
38
|
+
| Accordion | `.dsrc-accordion` | Sections repliables FAQ |
|
|
39
|
+
| Alert | `.dsrc-alert` | Messages d'information, succès, erreur, avertissement |
|
|
40
|
+
| Badge | `.dsrc-badge` | Indicateur de statut compact |
|
|
41
|
+
| Breadcrumb | `.dsrc-breadcrumb` | Fil d'Ariane |
|
|
42
|
+
| Button | `.dsrc-btn` | Bouton d'action (primaire, secondaire, tertiaire) |
|
|
43
|
+
| Callout | `.dsrc-callout` | Mise en avant avec accent latéral |
|
|
44
|
+
| Card | `.dsrc-card` | Carte de contenu avec image, titre, description |
|
|
45
|
+
| Checkbox | `.dsrc-checkbox` | Case à cocher stylisée |
|
|
46
|
+
| Consent | `.dsrc-consent` | Bannière de consentement cookies |
|
|
47
|
+
| Download | `.dsrc-download` | Lien de téléchargement |
|
|
48
|
+
| Dropdown | `.dsrc-dropdown` | Menu déroulant |
|
|
49
|
+
| Highlight | `.dsrc-highlight` | Texte mis en exergue |
|
|
50
|
+
| Input | `.dsrc-input` | Champ de saisie texte |
|
|
51
|
+
| Label | `.dsrc-label` | Étiquette de formulaire |
|
|
52
|
+
| Link | `.dsrc-link` | Lien stylisé |
|
|
53
|
+
| Logo | `.dsrc-logo` | Logo institutionnel |
|
|
54
|
+
| Modal | `.dsrc-modal` | Fenêtre modale (dialog natif) |
|
|
55
|
+
| Notice | `.dsrc-notice` | Bandeau d'avertissement |
|
|
56
|
+
| Pagination | `.dsrc-pagination` | Navigation paginée |
|
|
57
|
+
| Password | `.dsrc-password` | Champ mot de passe avec affichage |
|
|
58
|
+
| Quote | `.dsrc-quote` | Citation avec source |
|
|
59
|
+
| Radio | `.dsrc-radio` | Bouton radio stylisé |
|
|
60
|
+
| Range | `.dsrc-range` | Curseur de sélection |
|
|
61
|
+
| Search | `.dsrc-search` | Barre de recherche |
|
|
62
|
+
| Select | `.dsrc-select` | Liste déroulante |
|
|
63
|
+
| Sidemenu | `.dsrc-sidemenu` | Menu latéral de navigation |
|
|
64
|
+
| Spinner | `.dsrc-spinner` | Indicateur de chargement |
|
|
65
|
+
| Stepper | `.dsrc-stepper` | Indicateur d'étapes |
|
|
66
|
+
| Summary | `.dsrc-summary` | Sommaire / table des matières |
|
|
67
|
+
| Tab | `.dsrc-tab` | Onglets ARIA |
|
|
68
|
+
| Table | `.dsrc-table` | Tableau de données |
|
|
69
|
+
| Tag | `.dsrc-tag` | Étiquette interactive |
|
|
70
|
+
| Tile | `.dsrc-tile` | Tuile cliquable |
|
|
71
|
+
| Toggle | `.dsrc-toggle` | Interrupteur on/off |
|
|
72
|
+
| Tooltip | `.dsrc-tooltip` | Infobulle |
|
|
73
|
+
| Translate | `.dsrc-translate` | Sélecteur de langue FR/EN |
|
|
74
|
+
| Upload | `.dsrc-upload` | Zone d'envoi de fichier |
|
|
75
|
+
|
|
76
|
+
## Layouts
|
|
77
|
+
|
|
78
|
+
| Layout | Classe | Description |
|
|
79
|
+
|--------|--------|-------------|
|
|
80
|
+
| Bandeau | `.dsrc-bandeau` | Bande d'identité institutionnelle |
|
|
81
|
+
| En-tête | `.dsrc-entete` | En-tête de page |
|
|
82
|
+
| Footer | `.dsrc-footer` | Pied de page |
|
|
83
|
+
| Grid | `.dsrc-grid` | Grille responsive 12 colonnes |
|
|
84
|
+
| Hero | `.dsrc-hero` | Section héro |
|
|
85
|
+
| Main | `.dsrc-main` | Contenu principal |
|
|
86
|
+
| Navigation | `.dsrc-nav` | Barre de navigation |
|
|
87
|
+
|
|
88
|
+
## Exemple rapide
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!DOCTYPE html>
|
|
92
|
+
<html lang="fr">
|
|
93
|
+
<head>
|
|
94
|
+
<link rel="stylesheet" href="node_modules/@dsrc-cm/core/dist/dsrc.min.css">
|
|
95
|
+
</head>
|
|
96
|
+
<body>
|
|
97
|
+
<button class="dsrc-btn">Action principale</button>
|
|
98
|
+
<button class="dsrc-btn dsrc-btn--secondary">Action secondaire</button>
|
|
99
|
+
|
|
100
|
+
<div class="dsrc-alert dsrc-alert--success">
|
|
101
|
+
<p class="dsrc-alert__title">Succès</p>
|
|
102
|
+
<p>Votre demande a été enregistrée.</p>
|
|
103
|
+
</div>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Conventions
|
|
109
|
+
|
|
110
|
+
- **BEM** : `.dsrc-{composant}__element--modifier`
|
|
111
|
+
- **Tokens CSS** : variables `--dsrc-*` (couleurs, typographie, espacement)
|
|
112
|
+
- **Typographie** : IBM Plex Sans / IBM Plex Mono
|
|
113
|
+
- **Couleur primaire** : `#007A2B` (vert de l'État camerounais)
|
|
114
|
+
- **Accessibilité** : `forced-colors`, `prefers-reduced-motion`, styles d'impression
|
|
115
|
+
|
|
116
|
+
## Tailles
|
|
117
|
+
|
|
118
|
+
| Fichier | Taille |
|
|
119
|
+
|---------|--------|
|
|
120
|
+
| `dsrc.css` | ~294 KB |
|
|
121
|
+
| `dsrc.min.css` | ~157 KB |
|
|
122
|
+
|
|
123
|
+
## Licence
|
|
124
|
+
|
|
125
|
+
MIT — NZIDJOUO FONJI Terence Hill
|