DSANRDI

Design system officiel de l’ANRDI.

Ce paquet fournit une base unique pour les sites publics, les portails métiers et les sous-domaines internes de l’association.

Contenu du paquet

• css/ds-styles.css
• js/ds-script.js
• docs/index.html
• docs/espace-benevole-ui.md
• favicon.ico

Installation

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ASSO-NATIONALE-REG-DOM-ET-INTERNET/dsanrdi@main/css/ds-styles.css">
<script src="https://cdn.jsdelivr.net/gh/ASSO-NATIONALE-REG-DOM-ET-INTERNET/dsanrdi@main/js/ds-script.js" defer></script>

Usage local

<link rel="stylesheet" href="/dsanrdi/css/ds-styles.css">
<script src="/dsanrdi/js/ds-script.js" defer></script>

Règles

• ds-styles.css est la source de vérité pour le style
• ds-script.js active les composants interactifs
• les portails métiers doivent ajouter uniquement une surcouche locale minimale
• le mode clair et le mode sombre doivent rester cohérents sans surcharge visuelle locale

Publication

Avant publication, vérifier que :

1. les fichiers listés dans package.json sont bien inclus
2. la documentation est à jour
3. les versions des liens CDN pointent vers la bonne branche ou le bon tag

[!WARNING] N’utilisez pas de framework CSS parallèle pour les portails ANRDI sauf nécessité exceptionnelle. Le design system doit rester la base commune.

Composants prêts à l’emploi

Le Design System intègre de nombreux composants que vous pouvez copier-coller.

Boutons

Utilisez les classes .btn pour créer des appels à l'action clairs :

<button class="btn btn-primary">Action principale</button>
<button class="btn btn-outline">Bouton fantôme</button>
<button class="btn btn-danger">Supprimer</button>

[!TIP] Ajoutez toujours un aria-label sur les boutons qui n’affichent qu’une icône.

Alertes

Les messages contextuels sont très simples à utiliser dans vos applications :

[!NOTE] Les alertes Markdown sont rendues dans la documentation pour faciliter la lecture.

<div class="flash flash-success" role="alert">
    <span><i class="fas fa-check-circle"></i> Enregistrement réussi !</span>
</div>

Modales et onglets

Tous les scripts nécessaires (ds-script.js) sont inclus pour faire fonctionner les fenêtres modales et les onglets de navigation sans avoir à écrire la moindre ligne de Javascript !

[!IMPORTANT] N’oubliez pas defer pour ds-script.js.

Variables du design system

Le système expose maintenant un socle de variables plus riche pour construire des pages et des composants cohérents.

Couleurs sémantiques

• --primary et --primary-hover
• --danger et --danger-hover
• --success et --success-hover
• --warning et --warning-hover
• --info et --info-hover
• --link et --link-hover

Surfaces et hiérarchie visuelle

• --bg-default
• --bg-alt
• --card-bg
• --surface-1
• --surface-2
• --surface-3
• --header-bg
• --footer-bg

Typographie et lisibilité

• --font-heading
• --font-body
• --font-serif
• --text-default
• --text-muted
• --focus-ring

Rayons, ombres et espacements

• --radius-sm
• --radius-md
• --radius-lg
• --radius-pill
• --shadow
• --shadow-lg
• --space-1 à --space-8

Spécifique aux portails et tickets

• --ticket-open-bg / --ticket-open-fg
• --ticket-wait-bg / --ticket-wait-fg
• --ticket-done-bg / --ticket-done-fg
• --ticket-urgent-bg / --ticket-urgent-fg
• --ticket-meta-bg
• --ticket-meta-border
• --portal-sidebar-bg
• --portal-sidebar-fg
• --portal-card-bg
• --portal-card-border
• --portal-card-kpi-bg
• --timeline-line
• --timeline-dot
• --timeline-text
• --timeline-muted

Documentation

La documentation complète se trouve dans docs/index.html. Une référence plus détaillée dédiée à l’espace bénévole se trouve dans docs/espace-benevole-ui.md.

Elle présente :

• les variables CSS,
• les boutons,
• les alertes,
• les modales,
• les onglets,
• les cartes,
• les tableaux,
• les composants avancés,
• les tickets et le support,
• l’espace bénévoles,
• les sections layout.

Contribuer

Pour proposer une évolution du Design System :

1. Créez une branche (feature/nouveau-bouton)
2. Ajoutez votre CSS dans ds-styles.css
3. Documentez-le dans docs/index.html
4. Soumettez une Pull Request.