Développeurs

 

La version 1.1.0 est disponible !
La liste des nouveauté est disponible sur les notes de version
et vous pouvez la télécharger ci-dessous!

Installation

L'installation du Système de Design de l'État (ci-après, le DSFR) peut se faire de deux manières différentes. En téléchargeant l'ensemble des fichiers nécessaires à son utilisation, ou en utilisant le gestionnaire de paquets NPM.

Fichiers statiques

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.


NPM

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:

1 npm install @gouvfr/dsfr

Il est également possible d'installer le package avec Yarn :

1 yarn add @gouvfr/dsfr

 


La structure que nous mettons à disposition , sur le zip ou npm est la suivante:

  • dist: contient les fichiers css et js à placer à la racine de votre site (js, css, fonts, favicons).

  • src : contient les sources sass et js des différents composants.

  • examples: contient des snippets html d’example des composants que vous pouvez consulter en local (idéalement sur un serveur type http-server ou autre).


Configuration de votre projet

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 de projets, et les différentes sources du répertoire dist dans des dossiers spécifiques :

1 2 3 4 5 6 / Racine du projet └── fonts └── css └── js └── favicons └── index.html

Les polices de caractères utilisées sur le DS, à savoir la Marianne et la Spectral, sont des fichiers .woff et .woff2, doivent se trouver dans le répertoirefonts.

Les fichiers de styles .css doivent être placés dans le répertoire css.

Les fichiers javascript .js nécessaires au bon fonctionnement de plusieurs interactions sur le DS, sont donc à placer dans le répertoire js.

Le HTML

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-theme sur la balise html permet d’activer la gestion des thèmes clair et sombre. Les valeurs possibles sont default, light , dark.
Consulter la documentation des paramètres d’affichage afin d’en savoir plus

L’attribut data-fr-reset est déprécié , le ‘reset’ est désomais activé d’office.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!doctype html> <html lang="fr" data-fr-theme="default"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/dsfr.min.css"> <link rel="apple-touch-icon" href="favicons/apple-touch-icon.png"><!-- 180×180 --> <link rel="icon" href="favicons/favicon.svg" type="image/svg+xml"> <link rel="shortcut icon" href="favicons/favicon.ico" type="image/x-icon"><!-- 32×32 --> <link rel="manifest" href="favicons/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="js/dsfr.module.min.js"></script> <script type="text/javascript" nomodule src="js/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 dsfr.min.css.

Le Javascript

L’ensemble du code javascript nécessaire au bon fonctionnement du DS se trouve dans deux fichiers dsfr.module.min.js et dsfr.nomodule.min.js.


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:

1 2 3 4 5 <script type="module" src="js/dsfr.module.min.js"></script> <script type="text/javascript" nomodule src="js/dsfr.nomodule.min.js"></script> </body> </html>


Favicon
La documentation détaille la façon d’insérer les favicons dans ses pages.

Utilisation

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!