Dsfr Components

Skill Composants DSFR

Générez rapidement des interfaces web conformes au Design System de l'État Français.

Vue d'ensemble

Ce skill fournit tout le nécessaire pour créer des sites web gouvernementaux français :

• Générateur de composants DSFR (boutons, alertes, formulaires, etc.)
• Générateur de pages complètes (landing, formulaire, tableau de bord)
• Documentation complète des composants et classes utilitaires
• Templates HTML prêts à l'emploi

Utilisation rapide

Générer une page complète

python3 scripts/generate_page.py --type landing --title "Mon Service Public" --output page.html

Générer un composant

python3 scripts/generate_component.py button --config '{"variant": "primary", "size": "lg"}'

Workflow recommandé

1. Création d'une nouvelle page

Commencer par générer une page de base :

python3 scripts/generate_page.py --type [standard|landing|form|dashboard] --output index.html

2. Ajout de composants

Utiliser le générateur de composants pour créer les éléments nécessaires :

# Bouton
python3 scripts/generate_component.py button --config '{"variant": "secondary"}'

# Alerte
python3 scripts/generate_component.py alert --config '{"type": "info", "title": "Information"}'

# Carte
python3 scripts/generate_component.py card --config '{"title": "Ma carte", "description": "Description"}'

3. Personnalisation

• Copier le template de base depuis assets/template-base.html
• Intégrer les composants générés
• Ajuster les classes utilitaires selon les besoins

Composants disponibles

Composants de base

• Boutons : Primaire, secondaire, tertiaire, avec icônes
• Alertes : Info, succès, avertissement, erreur
• Badges : Statuts et étiquettes colorées
• Cartes : Présentation de contenu avec image optionnelle

Navigation

• Fil d'Ariane : Navigation hiérarchique
• Menu : Navigation principale et secondaire
• Pagination : Navigation entre pages
• Onglets : Organisation du contenu

Formulaires

• Champs de saisie : Texte, email, mot de passe, etc.
• Cases à cocher : Sélection multiple
• Boutons radio : Sélection unique
• Sélecteurs : Listes déroulantes

Affichage de données

• Tableaux : Présentation structurée de données
• Accordéons : Contenu repliable
• Modales : Fenêtres de dialogue

Classes utilitaires principales

Grille responsive

• fr-container : Container principal
• fr-grid-row : Ligne de grille
• fr-col-* : Colonnes (1-12)
• fr-col-md-* : Colonnes medium (≥768px)
• fr-col-lg-* : Colonnes large (≥992px)

Espacements

• fr-mt-* : Marge top (1w = 0.5rem, 2w = 1rem, etc.)
• fr-mb-* : Marge bottom
• fr-py-* : Padding vertical
• fr-px-* : Padding horizontal

Typographie

• fr-text--lg : Texte large
• fr-text--bold : Texte gras
• fr-text--lead : Texte d'introduction

Options des scripts

generate_page.py

• --type : Type de page (standard, landing, form, dashboard)
• --title : Titre de la page
• --content : Contenu HTML personnalisé
• --dark : Mode sombre
• --no-header : Sans en-tête
• --no-footer : Sans pied de page
• --output : Fichier de sortie

generate_component.py

• component : Type de composant à générer
• --config : Configuration JSON du composant

Documentation de référence

Composants détaillés

Voir references/components.md pour :

• Syntaxe HTML complète de chaque composant
• Variantes et modificateurs disponibles
• Exemples d'utilisation avancée

Classes utilitaires

Voir references/utilities.md pour :

• Système de grille complet
• Classes d'espacement
• Modificateurs typographiques
• Classes de couleur
• Helpers d'accessibilité

Ressources officielles

• Documentation DSFR
• Storybook des composants
• GitHub du DSFR

Conformité et accessibilité

Tous les composants générés respectent :

• Les standards WCAG 2.1 niveau AA
• Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité)
• Les bonnes pratiques du W3C
• La charte graphique de l'État français