Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@ds-fr/design-system-test
Advanced tools
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.
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.
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-system
Il est également possible d'installer les composants avec Yarn :
yarn add @gouvfr/design-system
Il 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
.
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.html
En 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.
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>
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.
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.
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@latest
ou via Yarn :
yarn add @gouvfr/design-system@latest
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
.
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>
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.
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.
FAQs
Design System de l'Etat
The npm package @ds-fr/design-system-test receives a total of 1 weekly downloads. As such, @ds-fr/design-system-test popularity was classified as not popular.
We found that @ds-fr/design-system-test demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.