GuilDevOpenOpen Source

Slash Design System

react-toolkit83
slash-design-system

A quoi sert «Slash Design System» ?

Comme son nom l’indique, il s’agit d’un Design System, cet outil a été développé pour des besoins internes sur l’homogénisation des développpements front-end des applications métiers. Il permet de définir les guidelines UX et les règles de parcours utilisateurs.

A qui se destine ce Design System ?

Ce réferentiel est à destination des développeurs, des UX mais aussi aux autres membres de la famille Produit comme les PO, les PM ainsi que les utilisateurs finaux.

users-design-system
computer

Quelles technologies sont utilisées ?

Slash Design System est ensemble de composants indépendants (packages) via un mono-repository . Cela a été possible grâce à Lerna qui permet de développer du multi-packages sur un seul repository.
Le Design System se décompose en 2 parties documentée : HTML/CSS pour le graphisme et Javascript pour l’interaction.
La documentation HTML/CSS est générée par le moteur de templating Pug, ainsi que le préprocesseur Sass pour la génération CSS.
Pour la partie Javascript, les composants ont été développés avec la librairie ReactJS, la documentation est générée à l’aide de l’outil Storybook afin d’avoir une documenation plus interactive.