Le SystĂšme de design de lâĂtat (ci-aprĂšs, le DSFR) est un ensemble de composants html / css / js ayant pour but de faciliter la vie des dĂ©veloppeurs et intĂ©grateurs pour bĂątir leurs interfaces.
L'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.
Il 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, à savoir la Marianne et la Spectral.
Le 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, 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).
Une fois en place, il suffit d'installer le package @gouvfr/dsfr contenant lâensemble des composants:
npm install @gouvfr/dsfr
Il est Ă©galement possible d'installer le package avec Yarn :
yarn add @gouvfr/dsfr
Une fois terminé le dsfr sera alors installé dans le dossier node_modules/@gouvfr/dsfr/.
Pour visualiser les exemples, il est nécessaire de lancer un serveur local :
npm run serve
Une fois le serveur lancé, les exemples sont disponibles à l'adresse : http://localhost:8080/example/
La structure que nous mettons Ă disposition , sur le zip ou npm est la suivante:
- dist : contient les fichiers css et js à importer en fonction des packages utilisés.
- src : contient les sources sass et js des différents composants.
- example : contient des snippets html dâexample des composants que vous pouvez consulter en local.
Lors 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 :
Une structure minimale serait :
/ Racine du projet
âââ index.html
âââ dsfr.min.css
âââ dsfr.module.min.js
âââ dsfr.nomodule.min.js
âââ favicon
âââ font
âââ icons
âââ utility
âââ icons
Les 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 font. Ce dossier doit ĂȘtre placĂ© au mĂȘme niveau que le dossier contenant le CSS du core dsfr ('dsfr' dans notre exemple puisque dsfr.min.css contient le core)
Le 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.
Lâ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. Consulter la documentation des paramĂštres dâaffichage afin dâen savoir plus.
<!doctype html>
<html lang="fr" data-fr-scheme="system">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="dsfr.min.css">
<link rel="stylesheet" href="utility/utility.min.css">
<meta name="theme-color" content="#000091"><!-- DĂ©fini la couleur de thĂšme du navigateur (Safari/Android) -->
<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png"><!-- 180Ă180 -->
<link rel="icon" href="favicon/favicon.svg" type="image/svg+xml">
<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon"><!-- 32Ă32 -->
<link rel="manifest" href="favicon/manifest.webmanifest" crossorigin="use-credentials">
<!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
<!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->
<title>Titre de la page - Nom du site</title>
</head>
<body>
<!--
code de la page
-->
<!-- Script en version es6 module et nomodule pour les navigateurs le ne supportant pas -->
<script type="module" src="dsfr.module.min.js"></script>
<script type="text/javascript" nomodule src="dsfr.nomodule.min.js"></script>
</body>
</html>Les CSS
Afin dâinclure la totalitĂ© des composants et des styles du DS, il est nĂ©cessaire dâinclure la feuille de style dist/dsfr.min.css. Les classes utilitaires, notamment les icĂŽnes, sont disponibles dans un fichier Ă part dans dist/utility/utility.scss.
Il 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.
Le Javascript
Lâ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.
De la mĂȘme façon que le CSS il est possible dâimporter uniquement le JS des composants utilisĂ©s (et leurs dĂ©pendances).
Le fichier dsfr.module.min.js utilise les modules javascript natifs - sa balise script dâappel doit avoir lâattribut type=âmoduleâ. Le fichier dsfr.nomodule.min.js est utilisĂ© par les anciens navigateurs ne supportant pas les modules javascript - sa balise script doit contenir lâattribut nomodule. Il est impĂ©ratif dâappeler les deux fichiers javascript afin que le code sâexĂ©cute correctement sur lâensemble des navigateurs supportĂ©s :
<script type="module" src="dsfr.module.min.js"></script>
<script type="text/javascript" nomodule src="dsfr.nomodule.min.js"></script>
</body>
</html>Les icÎnes sont stockées dans dist/icons et classées par catégories.
Le 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--â.
Afin dâutiliser ces icĂŽnes, des classes utilitaires CSS sont associĂ©s Ă chaque icĂŽne. Par ex. : fr-icon-error-fill
Ces classes sont disponible dans utility qui importe dist/utility/icons/icons.css.
Il 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â.
Pour plus dâinformations : Voir la documentation des icĂŽnes.
La documentation des favicons détaille la façon de les implémenter dans vos pages.
Le DSFR utilise la méthodologie BEM (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é.
Selon cette méthodologie, un block représente le plus haut niveau d'abstraction d'un nouveau composant, par exemple .parent.
Des Ă©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.
Les 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.
Le DSFR est constituĂ© de diffĂ©rents composants, que vous pouvez utiliser indĂ©pendamment au sein de votre projet. Une 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.
đ Vous ĂȘtes maintenant prĂȘt(e) Ă utiliser le DSFR.
Le processus de contribution est détaillé sur la page CONTRIBUTING.md.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent