{"id":14062693,"url":"https://github.com/GouvernementFR/dsfr","last_synced_at":"2025-07-29T14:31:19.994Z","repository":{"id":37076842,"uuid":"271771309","full_name":"GouvernementFR/dsfr","owner":"GouvernementFR","description":"🇫🇷 Official french government's design system (Système de Design de l'État)","archived":false,"fork":false,"pushed_at":"2025-07-23T17:24:19.000Z","size":38951,"stargazers_count":291,"open_issues_count":122,"forks_count":90,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-07-23T17:41:02.317Z","etag":null,"topics":["css","design-system","dsfr","government","html","js"],"latest_commit_sha":null,"homepage":"https://www.systeme-de-design.gouv.fr/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GouvernementFR.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":"publiccode.yml","codemeta":null,"zenodo":null}},"created_at":"2020-06-12T10:27:44.000Z","updated_at":"2025-07-21T13:15:23.000Z","dependencies_parsed_at":"2024-03-17T04:06:56.131Z","dependency_job_id":"6a2750d6-8a34-4621-a38d-c18ff783cc0e","html_url":"https://github.com/GouvernementFR/dsfr","commit_stats":{"total_commits":919,"total_committers":22,"mean_commits":41.77272727272727,"dds":0.5560391730141458,"last_synced_commit":"fe9d66b4ccaa7c3a3c0cb07eca69ddd6787965c4"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"purl":"pkg:github/GouvernementFR/dsfr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GouvernementFR%2Fdsfr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GouvernementFR%2Fdsfr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GouvernementFR%2Fdsfr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GouvernementFR%2Fdsfr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GouvernementFR","download_url":"https://codeload.github.com/GouvernementFR/dsfr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GouvernementFR%2Fdsfr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267702893,"owners_count":24130463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","design-system","dsfr","government","html","js"],"created_at":"2024-08-13T07:01:51.653Z","updated_at":"2025-07-29T14:31:19.983Z","avatar_url":"https://github.com/GouvernementFR.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","EJS"],"sub_categories":[],"readme":"# 🇫🇷 Système de Design de l’État\n\n[![GitHub release](https://img.shields.io/github/v/release/gouvernementFR/dsfr.svg)](https://GitHub.com/gouvernementFR/dsfr/releases/) [![Generic badge](https://img.shields.io/badge/npm-yellow.svg)](https://www.npmjs.com/package/@gouvfr/dsfr) [![Generic badge](https://img.shields.io/badge/license-grey.svg)](https://github.com/GouvernementFR/dsfr/blob/main/LICENSE.md) [![Npm package monthly downloads](https://badgen.net/npm/dm/@gouvfr/dsfr)](https://npmjs.com/package/@gouvfr/dsfr)\n\nLe Système de Design de l’État (ci-après, le **DSFR**) est un ensemble de composants web HTML, CSS et Javascript pour faciliter le travail des équipes projets des sites Internet publics, et créer des interfaces numériques de qualité et accessibles.\n\nL'outil est développé, maintenu et géré par le [Service d'Information du Gouvernement (SIG)](https://www.info.gouv.fr/organisation/service-d-information-du-gouvernement-sig).\n\nSon utilisation par les administrations est soumise à une demande d'agrément (voir partie 5 des Conditions Générales d'Utilisation).\n\n[Voir la documentation officielle](https://www.systeme-de-design.gouv.fr).\n\n## Licence et droit d'utilisation\n\nLe contenu de ce projet est placé sous licence MIT License, à l'exception de la fonte Marianne. Voir [LICENSE.md](https://github.com/GouvernementFR/dsfr/blob/main/LICENSE.md).\n\n#### ⚠️ Utilisation interdite en dehors des sites Internet de l'État\n\n\u003eIl est formellement interdit à tout autre acteur d’utiliser le Système de Design de l’État (les administrations territoriales ou tout autre acteur privé) pour des sites web ou des applications. Le Système de Design de l’État représente l’identité numérique de l’État. En cas d’usage à des fins trompeuses ou frauduleuses, l'État se réserve le droit d’entreprendre les actions nécessaires pour y mettre un terme.\n\nVoir les [conditions générales d'utilisation](doc/legal/cgu.md).\n\n#### ⚠️ Prohibited Use Outside Government Websites\n\n\u003eThis Design System is only meant to be used by official French public services' websites and apps. Its main purpose is to make it easy to identify governmental websites for citizens. See terms.\n\n## Installation\n\nL'installation du Système de Design de l'État (ci-après, le **DSFR**) peut se faire de manières différentes. En téléchargeant l'ensemble des fichiers nécessaires à son utilisation, en utilisant le gestionnaire de paquets **NPM**, ou encore via **git**.\n\n### Fichiers statiques\n\nIl est possible de télécharger l'ensemble du **DSFR** au format zip ci-dessous. Le zip contient un ensemble de fichiers CSS et Javascript, ainsi que les différentes polices web utilisées (Marianne et Spectral), et un ensemble d'icônes et de pictogrammes.\n\nVous trouverez sur [la page Release de Github](https://github.com/GouvernementFR/dsfr/releases), toutes les sources des versions précédentes et la dernière en date.\n\n### NPM\n\nLe **DSFR** est disponible sur NPM via un ensemble de packages qu'il est possible d'ajouter directement à votre projet. Il est de ce fait nécessaire d'installer [NodeJS](https://nodejs.org), et d'avoir un fichier **package.json** à la racine de votre projet. (Il est possible d'en créer un directement via la commande `npm init`).\n\nUne fois en place, il suffit d'installer le package **@gouvfr/dsfr** contenant l’ensemble des composants:\n\n```\nnpm install @gouvfr/dsfr\n```\nIl est également possible d'installer le package avec [Yarn](https://yarnpkg.com/) :\n```\nyarn add @gouvfr/dsfr\n```\n\nUne fois terminé le dsfr sera alors installé dans le dossier ```node_modules/@gouvfr/dsfr/```.\n\nPour visualiser les exemples, il est nécessaire de lancer un serveur local. Pour cela, installer le package browser-sync, puis lancer le serveur dans le dossier du dsfr :\n\n```\nnpm install browser-sync\ncd node_modules/@gouvfr/dsfr/\nnpm run serve\n```\n\nUne fois le serveur lancé, les exemples sont disponibles à l'adresse : http://localhost:8080/example/\n\n### Structure du DSFR\n\nLa structure que nous mettons à disposition , sur le zip ou npm est la suivante:\n- **dist** : contient les fichiers css et js à importer en fonction des packages utilisés.\n- **src** : contient les sources sass et js des différents composants.\n- **example** : contient des snippets html d’example des composants que vous pouvez consulter en local.\n\n### Configuration de votre projet\n\nLors de la création de votre projet, il est nécessaire d’adopter l’arborescence prévue par celui-ci, à savoir les fichiers HTML à la racine du projets, et les différentes sources du **répertoire dist** dans des dossiers spécifiques :\n\nUne structure minimale serait :\n\n```\n/ Racine du projet\n└── index.html\n└── dsfr.min.css\n└── dsfr.module.min.js\n└── dsfr.nomodule.min.js\n└── icons/\n└── favicon/\n└── fonts/\n└── utility/\n  └── utility.min.css\n```\n\nLes polices de caractères utilisées sur le DS, à savoir la Marianne et la Spectral, sont des fichiers .woff et .woff2, ils doivent se trouver dans le répertoire `fonts`. Les dossiers `fonts` et `favicon` doivent être placés au même niveau que le dossier contenant le CSS du core du dsfr (ou au même niveau que le css `dsfr.min.css` à la racine de dist, qui contient le core).\n\nLe fichier `utility.min.css` doit être placé un niveau plus bas que le dossier `icons`, dans dossier utility par exemple, pour respecter les chemins d'accès vers les icônes.\n\n### Le HTML\n\nLe point de départ de l’utilisation du DSFR  est la création de fichiers HTML, afin de pouvoir utiliser les différents composants. Ces fichiers sont à mettre à la racine de votre projet. L’exemple ci dessous est le code minimal afin de pouvoir utiliser le DSFR.\n\nL’ajout de l’attribut **data-fr-scheme** sur la balise html permet d’activer la gestion des thèmes clair et sombre. Les valeurs possibles sont `system`, `light`, `dark`. La valeur “system” permet d’utiliser la configuration définie sur le système d’exploitation de l’utilisateur.\n\nConsulter la [documentation des paramètres d’affichage](./src/dsfr/component/display/_part/doc/index.md) afin d’en savoir plus.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"fr\" data-fr-scheme=\"system\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n    \u003cmeta name=\"format-detection\" content=\"telephone=no,date=no,address=no,email=no,url=no\"\u003e\n\n    \u003cmeta name=\"theme-color\" content=\"#000091\"\u003e\u003c!-- Défini la couleur de thème du navigateur (Safari/Android) --\u003e\n    \u003clink rel=\"apple-touch-icon\" href=\"favicon/apple-touch-icon.png\"\u003e\u003c!-- 180×180 --\u003e\n    \u003clink rel=\"icon\" href=\"favicon/favicon.svg\" type=\"image/svg+xml\"\u003e\n    \u003clink rel=\"shortcut icon\" href=\"favicon/favicon.ico\" type=\"image/x-icon\"\u003e\u003c!-- 32×32 --\u003e\n    \u003clink rel=\"manifest\" href=\"favicon/manifest.webmanifest\" crossorigin=\"use-credentials\"\u003e\n    \u003c!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet --\u003e\n    \u003c!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images --\u003e\n\n    \u003clink rel=\"stylesheet\" href=\"dsfr.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"utility/utility.min.css\"\u003e\n\n    \u003ctitle\u003eTitre de la page - Nom du site\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003c!--\n      code de la page\n     --\u003e\n\n    \u003c!-- Script en version es6 module et nomodule pour les navigateurs le ne supportant pas --\u003e\n    \u003cscript type=\"module\" src=\"dsfr.module.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" nomodule src=\"dsfr.nomodule.min.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Les CSS\n\nAfin d’inclure la totalité des composants et des styles du système de design, il est nécessaire d’inclure la feuille de style `dist/dsfr.min.css`.\n\nLes classes utilitaires, notamment les icônes, sont disponibles dans un fichier à part dans `dist/utility/utility.css`.\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"dsfr.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"utility/utility.min.css\"\u003e\n```\nIl est aussi possible d’importer uniquement ce que l’on souhaite utiliser. En effet, pour ajouter un composant seul il suffit d’importer son CSS ainsi que celui de chacune des dépendances de ce composant. Ces dépendances sont listés dans le `README.md` de chaque package.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"core.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"link.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"button.min.css\"\u003e\n```\n\n### Le Javascript\n\nL’ensemble du code javascript nécessaire au bon fonctionnement du DS se trouve dans deux fichiers `dist/dsfr.module.min.js` et `dist/dsfr.nomodule.min.js`.\n\nLe fichier dsfr.module.min.js utilise les modules javascript natifs - sa balise script d’appel doit avoir l’attribut **type=”module”**.\n\nLe fichier dsfr.nomodule.min.js est utilisé par les anciens navigateurs ne supportant pas les modules javascript (es6) - sa balise script doit contenir l’attribut **nomodule**.\nIl est **impératif** d’appeler les **deux fichiers** javascript afin que le code s’exécute correctement sur l’ensemble des navigateurs supportés :\n\n```html\n    \u003cscript type=\"module\" src=\"dsfr.module.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" nomodule src=\"dsfr.nomodule.min.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e NB : Le package analytics est géré indépendament et doit être ajouté après le js du dsfr. Voir [documention analytics](https://www.systeme-de-design.gouv.fr/version-courante/fr/mesure-d-audience/documentation-technique-de-la-mesure-d-audience/)\n\nDe la même façon que le CSS il est possible d’importer uniquement le JS des composants utilisés (et leurs dépendances).\n\n### Icônes\n\nLes icônes sont stockées dans `dist/icons` et classées par catégories.\n\nLe design système utilise principalement des icônes de la librairie remixIcon. Il existe aussi des icônes personnalisées, celles-ci sont préfixée par “fr--”.\n\nAfin d’utiliser ces icônes, des classes utilitaires CSS sont associés à chaque icône. Par ex. : `fr-icon-error-fill`\n\nCes classes sont disponibles dans `utility` qui importe `dist/utility/icons/icons.css`.\n\nIl est aussi possible d’importer uniquement certaines catégories d’icônes afin d’optimiser le poids. Par ex. :  `dist/utility/icons/system/system.css` pour les icônes “system”.\n\nPour plus d’informations : [Voir la documentation des icônes](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/icone/).\n\n### Favicon\n\n[La documentation des favicons](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/icone-de-favori/) détaille la façon de les implémenter dans vos pages.\n\n## Fonctionnement\n\n### BEM\n\nLe **DSFR** utilise la méthodologie [**BEM**]([https://css-tricks.com/bem-101/]([http://getbem.com/naming/](http://getbem.com/naming/))) (Block - Element - Modifier) comme convention de nommage des classes CSS. Elle permet aux développeurs une meilleure compréhension de la relation entre HTML et CSS dans un projet donné.\n\nSelon cette méthodologie, un block représente le plus haut niveau d'abstraction d'un nouveau composant, par exemple `.parent`.\n\nDes éléments (ou enfants), peuvent être placés à l'intérieur de ces blocks, et sont désignés par deux underscore précédés du nom du block : `.parent__element`.\n\nLes modifiers quant à eux, servent à manipuler les blocs, de manière à les styliser de manière indépendante en s'assurant de ne pas induire de changement à des blocks sans aucun rapport avec celui-ci. Ils sont notés à l'aide de deux tirets précédés du nom du block comme suit : `.parent--modifier`.\n\n### Utilisation\n\nLe **DSFR** est constitué de différents composants, que vous pouvez utiliser indépendamment au sein de votre projet.\n\nUne documentation spécifique est prévue pour chaque composant, précisant ses principes d’utilisation, ainsi que les snippets de code HTML à utiliser pour votre projet.\n\n🙌 Vous êtes maintenant prêt·e à utiliser le **DSFR**.\n\n## Contribution\n\nLe processus de contribution est détaillé sur la [page CONTRIBUTING.md](CONTRIBUTING.md).\n\n## Documentation\n\n[Documentation développeur·se](https://www.systeme-de-design.gouv.fr/version-courante/fr/prise-en-main-et-perimetre/vous-etes-developpeur/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGouvernementFR%2Fdsfr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGouvernementFR%2Fdsfr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGouvernementFR%2Fdsfr/lists"}