Le Design System de l'Etat 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.

Installation

Vous pouvez utiliser npm ou yarn afin d'installer la librairie.

npm install @gouvfr/dsfr

yarn add @gouvfr/dsfr

Configuration de votre projet Lors de la création de votre projet, il est préférable d’adopter l’arborescence prévue par celui-ci, à savoir les fichiers HTML à la racine de projets, et les différentes sources dans des dossiers spécifiques :

/ Racine du projet
└── fonts
└── css
└── js
└── favicons
└── index.html

Le HTML Le point de départ de l’utilisation du DS 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 design System.

L’ajout de l’attribut data-rf-theme sur la balise html permet d’activer la gestion des thèmes clair et sombre. Les valeurs possibles sont vide, light ou dark.

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

<!doctype html>
<html lang="fr" data-rf-theme>
  <head>
    <title>Titre de la page - Nom du site</title>
    <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 -->
  </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. Le fichier dsfr.nomodule.min.js est utilisé par les anciens navigateurs ne supportant pas les modules javascript. Il est donc impératif d’appeler les deux fichiers javascript afin que le code s’exécute correctement sur l’ensemble des navigateurs supportés.

Contribution

La contribution n'est pas encore possible en dehors de la core team, mais nous allons très prochainement ouvrir le repository git !

🙌 Vous êtes maintenant prêt(e) à utiliser le Design System de l'État.

FAQs

What is @gouvfr/dsfr?

Is @gouvfr/dsfr popular?

Is @gouvfr/dsfr well maintained?

Package last updated on 24 Mar 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@gouvfr/dsfr

Design System

Installation

Contribution

fix(footer): marge mention légale

fix(logo): title retiré sur le logo

chore(global): changement de numéro de version

fix(build): copy des favicons à la racine de public seulement en deploy

fix(search): correction padding break-point

fix(radios, checkboxes): problèmes de marges

fix(navigation): correction séparateur visible au hover

fix(radio/checkboxes): correction curseur désactivé

fix(radios, checkboxes): texte additionnel

fix(selects): couleur picto select désactivé

fix(inputs): textarea picto coupé

fix(radio/checkboxes): correction legend fieldset bold par défaut, weight modifier pour cases à cocher et radios

feature(core): ajout des fonctionnalités raw-link et reset-link

fix(callouts): simplification callouts

fix(navigation): couleur de l'item active corrigée

fix(checkboxes): snippet avec erreur

fix(callouts): correction des marges internes

fix(search): padding LG

fix(core): correction du pointer sur les radio et checkbox

fix(header): tabindex retiré des modales

fix(accordions): lint

fix(accordion): bordure accordions

fix(header): correction récupération des modales conditionnelles

fix(core): correction lien

fix(breadcrumb): simplification de la css, correction des espacements

chore(all): ajout des noms de packages, de la documentation et ordre similaire à la documentation

fix(modal): snippet

fix(schemes): snippet & corrections merge

fix: bug couleur de fond des interrupteurs

fix(all): alt générique et fix inputs

fix(header): Titre du service remplacé par un p

fix(breadcrumb): ajout d'une limite à la boucle de vérification

fix(breadcrumb): boucle de vérification de la prise de focus

fix(header): transition éliminées en lg pour éviter le flash

fix(schemes): maj footer

fix(table): correction erreur dans les constantes

fix(search): title inutile sur le search LG

feat(footer): ajout licence etalab dans le copyright

fix(forms): input type submit et styles buttons, links

fix(pagination): ajout du role="navigation" pour l'a11y

refactor(js): séparation des classes core et publiques / focus breadcrumb / focus-trap désactivé au changement de breakpoint sur le header

Related posts

Enhancing Open-Source Compliance: Introducing Socket’s Advanced License Analysis

Introducing Socket Optimize