Système de design de l'État - Plugin DSFR pour le CMS SPIP
Disclaimer
ATTENTION: Ce design système a uniquement vocation à être utilisé pour des sites officiels de l'état. Son but est de rendre la parole de l'état clairement identifiable. Consulter les CGU.
Version du plugin
| historique des versions | date | version DSFR | Version SPIP | commentaire |
|---|---|---|---|---|
| 1.0.0 | 01/01/2022 | 1.8.5 | 3.2+ | |
| 2.424.1100.0.0 | 19/05/2023 | 1.10.0 | 4.2.4 | compatible 4.2+ |
| 2.425.1101.1.3 | 13/09/2023 | 1.10.1 | 4.2.5 | compatible 4.2+ |
Rédacteur : Mikaël Folio
Relecteur/testeur : Jean-Philippe Simonnet
Compatibilité SPIP
Le plugin DSFR est compatible avec SPIP 4.2+.
À propos de notre projet
Notre projet vise à mettre en place les mécanismes du Système de Design de l'État français (DSFR) sur un site SPIP en émulant un thème. Nous cherchons à créer une expérience utilisateur cohérente et accessible, en conformité avec les normes de l'État français. Ce projet est le fruit d'un travail collaboratif entre développeurs, designers et contributeurs passionnés par l'amélioration de l'accessibilité et de l'ergonomie des sites web.
Qu'est-ce que le DSFR ?
Le DSFR est le volet numérique de la marque de l'État français. Il offre une cohérence graphique et une meilleure expérience utilisateur à travers tous les sites de l'État. Le DSFR comprend un ensemble de composants réutilisables qui répondent à des standards et à une gouvernance spécifiques, et qui peuvent être assemblés pour créer des sites Internet accessibles et ergonomiques. Pour en savoir plus, consultez le site officiel du DSFR.
Fondamentaux
Les fondamentaux du DSFR comprennent les couleurs, les grilles et les icônes. Ces éléments de base sont essentiels pour construire votre site ou votre application. Ils sont conçus pour être facilement réutilisables et pour fournir une cohérence visuelle à travers votre site.
Composants
Le DSFR propose 30 composants et modèles documentés. Ces composants sont disponibles sur Sketch et Figma, ainsi qu'en HTML/CSS via NPM. Ils comprennent des éléments tels que des boutons, des formulaires, des cartes, des menus, et bien plus encore. Chaque composant est conçu pour être facilement réutilisable et pour répondre à des standards d'accessibilité et d'ergonomie.
Comment nous utilisons le DSFR dans notre projet
Dans notre projet, nous utilisons une variété de composants DSFR pour construire notre site. Ces composants sont documentés et disponibles sur Sketch et Figma, ainsi qu'en HTML/CSS via NPM. Nous avons choisi ces composants pour leur accessibilité, leur ergonomie et leur conformité avec les normes de l'État français. Chaque composant utilisé dans notre projet est décrit en détail dans la section "Composants utilisés" de ce wiki.
L'utilisation des composants du DSFR dans le plugin
Le DSFR propose une variété de composants réutilisables qui sont conçus pour être accessibles, ergonomiques et conformes aux normes de l'État français. Voici quelques-uns des composants clés (x composant mis en place dans ce plugin):
- Accordéon - Accordion
- Ajout de fichier - Upload
- Alerte - Alert
- Badge - Badge
- Bandeau d'information importante - Notice
- Barre de recherche - Search
- Bouton - Button
- Groupe de boutons - Button group
- Bouton FranceConnect
- Bouton radio - Radio button
- Bouton radio riche - Radio rich
- Case à cocher - Checkbox
- Carte - Card
- Champ de saisie - Input
- Citation - Quote
- Contenu médias - Content
- En-tête - Header
- Fil d'Ariane - Breadcrumb
- Gestionnaire de consentement - Consent banner
- Indicateur d'étapes - Stepper
- Infobulle - Tooltip
- Interrupteur - Toggle
- Lettre d'information et réseaux sociaux - Newsletter and follow us
- Lien - Link
- Lien d'évitement - Skiplink
- Liste déroulante - Select
- Menu latéral - Sidemenu
- Mise en avant - Callout
- Mise en exergue - Highlight
- Modale - Modal
- Mot de passe - Password
- Navigation principale - Navigation
- Onglet - Tab
- Pagination - Pagination
- Paramètre d'affichage - Display
- Partage - Share
- Pied de page - Footer
- Retour en haut de page - Back to top
- Sélecteur de langue - Translate
- Sommaire - Summary
- Tableau - Table
- Tag - Tag
- Téléchargement de fichier - Download
- Transcription - Transcription
- Tuile - Tile
Les composants non cochés seront intégrés ultérieurement sous forme de modèles (dans la mesure du possible) pour être utilisés en éditorial.
Installation et configuration du plugin
- Installation : Voir la page du Wiki destiné à cet effet
- Configuration : Voir la page du Wiki destiné à cet effet
Contribuer à notre projet
Nous accueillons les contributions de tous ceux qui sont intéressés par notre projet. Si vous souhaitez contribuer, veuillez consulter nos directives de contribution. Nous avons une variété de tâches disponibles pour les contributeurs, allant de la documentation à la programmation. Toute aide est appréciée et nous sommes impatients de travailler avec vous !
Communauté
La communauté du DSFR est une ressource précieuse pour les développeurs et les designers. Elle est composée de professionnels qui apportent leur expertise et leur soutien à ceux qui utilisent le DSFR. En faisant partie de cette communauté, vous pouvez obtenir de l'aide, partager vos idées, et contribuer à l'amélioration du DSFR.
Ressources
Contact
Si vous avez des questions ou des commentaires sur notre projet, n'hésitez pas à nous contacter. Vous pouvez nous Envoyer un email.
Site de test
Vous pouvez consulter notre site de test.