Prise en main
Une nouvelle version est disponible !
Retrouvez la liste des nouveautés dans la note de version. Vous pouvez la télécharger via le lien ci-dessous.
Installation
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.
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 utilisées, à savoir la Marianne et la Spectral.
Vous trouverez sur la page Release sur Github, toutes les sources des
versions précédentes et la dernière en date.
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:
npm install @gouvfr/dsfrIl est également possible d'installer le package avec Yarn :
yarn add @gouvfr/dsfrUne 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 serveUne fois le serveur lancé, les exemples sont disponibles à l'adresse http://localhost:8080/example/
Structure du DSFR
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'exemple des composants que vous pouvez consulter en local
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 du projets, et les différentes sources du répertoire "dist" dans des dossiers spécifiques :
Une structure minimale serait :
/ Racine du projet
└── fonts
└── favicon
└── dsfr.min.css
└── dsfr.module.min.js
└── dsfr.nomodule.min.js
└── index.htmlLes polices de caractères utilisées sur le DSFR, à savoir la Marianne et la Spectral, sont des fichiers .woff et .woff2. Ils doivent se trouver dans le répertoire "fonts". Ce dossier doit être placé au même niveau sur le répertoire "dsfr".
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.
<!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/dsfr.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/dsfr.module.min.js"></script>
<script type="text/javascript" nomodule src="dsfr/dsfr.nomodule.min.js"></script>
</body>
</html>Les CSS
La façon la plus simple d'intégrer l'entièreté des styles du DSFR est d'inclure les feuilles de styles : dist/dsfr.min.css et dist/utility/utility.min.css
Nb : Les classes utilitaires (icônes, pictogrammes, couleurs) sont séparés du fichier CSS principal (dsfr).
Il peut être intéressant d'importer unitairement les composants en fonction du besoin. 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.
Thèmes
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. Consultez la documentation du composant "Paramètre d’affichage" afin d’en savoir plus.
Le Javascript
L’ensemble du code javascript nécessaire au bon fonctionnement du DSFR se trouve dans deux fichiers dist/dsfr/dsfr.module.min.js et dist/dsfr/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/dsfr.module.min.js"></script>
<script type="text/javascript" nomodule src="dsfr/dsfr.nomodule.min.js"></script>
</body>
</html>Favicons
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.
Si vous souhaitez proposer des corrections ou évolutions au code du DSFR, vous trouverez les informations nécessaires sur la documentation de contribution à la page suivante.