@ds-fr/design-system-test
v2.0.0
Published
Design System de l'Etat
Downloads
2
Readme
Design System
Table des matières
Installation
L'installation du Design System de l'Etat (ci-après, le DS) 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 Design System de l'Etat au format zip à cette adresse. 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
Un package complet du Design System de l'Etat est disponible sur NPM, permettant de télécharger l'ensemble des fichiers nécessaires.
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 du Design System de l'Etat via la commande suivante :
npm install @gouvfr/design-systemIl est également possible d'installer les composants avec Yarn :
yarn add @gouvfr/design-systemIl est à noter que pour chaque package installé, l'ensemble des dépendances de celui-ci seront également installées. De ce fait, l'installation du package inputs par exemple téléchargera également automatiquement le package forms.
Arborescence du projet
Lors de la création de votre projet, il est nécessaire d’adopter l’arborescence prévue par le Design System de l'Etat, à savoir les fichiers HTML à la racine du projet, et les différentes sources dans des dossiers spécifiques :
/ Racine du projet
└── css
└── fonts
└── js
index.htmlEn cas d'installation via NPM, il est important de récupérer les polices web dans le dossier node_modules/@gouvfr/design-system/dist/fonts, ou de les télécharger directement ici.
Template HTML de base
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. Voici un exemple de code HTML minimal pour utiliser le DS, chargeant les polices et styles précisés dans la précédente section :
<!doctype html>
<html lang="fr">
<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">
<title>Design System de l'Etat</title>
</head>
<body>
<div class="rf-container"></div>
<script src="js/dsfr.min.js"></script>
</body>
</html>Mise à jour
Afin de mettre à jour le Design System de l'Etat à après une montée en version de celui ci, il est nécessaire de récupérer la dernière version, que ce soit un .zip des fichiers statiques, ou en mettant à jour la version de NPM.
Fichiers statiques
En cas d'installation simple via des fichiers statiques, il est possible de mettre à jour le DS en téléchargeant la nouvelle version au format .zip, et de simplement remplacer les fichiers CSS et JS de votre projet par les nouveaux fichiers mis à disposition.
NPM
Afin de mettre à jour la version de package utilisée via NPM, il est nécessaire de récupérer la dernière version, à l'aide de la commande NPM suivante :
npm install @gouvfr/design-system@latestou via Yarn :
yarn add @gouvfr/design-system@latestFonctionnement
BEM
Le DS 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.
Icônes
Le Design System de l'Etat utilise une webfont d'icônes, directement chargées en CSS. Il est de ce fait possible d'ajouter directement à votre projet, les icônes mises à disposition par le DS, à l'aide de classes spécifiques pouvant se trouver directement sur des composants, ou de manière autonome, à l'aide de balises <span>. Exemple :
<span class="rf-fi-alert-fill"></span>Utilisation
L'ensemble du DS est divisé en différents composants qu'il vous est possible d'utiliser dans votre projet. La documentation en ligne vous permettra de connaître l'ensemble des composants disponibles, ainsi que le code nécessaire à l'implémentation de ceux-ci au sein de votre projet.
Contribution
Pour des instructions complètes afin de contribuer au code source du DS, vous pouvez vous référer au fichier CONTRIBUTING.md. Ces instructions vous permettrons également d'installer une copie locale du Design System de l'Etat pour le développement d'un nouveau composant.
Liste des composants
Documentations Confluence
- Grid - Documentation
- Icons - Documentation
- Content - Documentation
- Typography - Documentation
- Search - Documentation
- Buttons - Documentation
- Radios - Documentation
- Checkboxes - Documentation
- Cards - Documentation
- Inputs - Documentation
- Header - Documentation
- Breadcrumb - Documentation
- Links - Documentation
- Skiplinks - Documentation
- Selects - Documentation
- Medias - Documentation
- Callouts - Documentation
- Highlights - Documentation
- Navigation - Documentation
- Pagination - Documentation
- Footer - Documentation
- Tiles - Documentation