Créez un Styleguide évolutif pour votre projet

Un styleguide est une page présentant les grands axes du style de votre projet de manière visuelle. Couleurs, polices d'écritures, le logo ainsi que ses déclinaisons, … . L'objectif principal est de simplifier le travail en équipe en permettant à tous les designers de rester sur la même longueur d'onde, et donc éviter la multiplication des teintes de couleurs trop proches et les polices d'écritures.

Les styles guides ont aussi d'autres intérêts, comme par exemple présenter sa marque et son identité au public, ou (ce qui nous intéresse aujourd'hui) ce que l'on appelle des "Kitchen sink". Ces pages sont des aides pour webdesigners et intégrateurs et présentent la totalité des modules communs existant dans votre projet. Avec cette liste sous les jeux, il est simple de s'avoir comment designer un menu pour rester consistant, et l'intégration se résume souvent à un copier-coller depuis la documentation.

Pour en savoir plus, je vous propose de découvrir cet article présentant 10 styles guides de grandes marques, ainsi que le kitchen sink de foundation pour bien comprendre l'aspect "aide pour intégrateurs".

7 Styles Guides qui donnent des idées pour présenter votre identité visuelle

Foundation 6 kitchen sink

Comme son nom l'indique, Styleguide En effet, plutôt que de créer de nouveaux modules depuis des commentaires CSS comme c'est souvent le cas, les modules peuvent ici se créer ou s'éditer directement depuis l'interface web.

Graphiquement très agréable, le projet présente de manière très visuelle les différentes couleurs et fonts sur sa page d'accueil. les modules sont ensuite rangés dans différentes catégories qu'il vous faudra créer au préalable dans le fichier prévu à cet effet. Entièrement personnalisable, l'interface pourra elle aussi tout à fait s'adapter à votre marque.

L'un des points les plus intéressants de Styleguide reste son aspect très 'responsive friendly', ou chaque élément peut être testé pour toutes les tailles d'écrans, que ce soit à la main avec un slider ou grace à une liste de breakpoints personnalisables.

L'aspect "kitchen sink" est bien présent avec la possibilité d'exporter en un simple click le HTML pour ensuite pouvoir le coller dans son intégration.

Finalement, le seul reproche que je pourrais faire au projet est sa documentation vraiment limitée : L'installation se fait comme tout autre projet node (npm install devbridge-styleguide –save-dev), mais une fois fait, nous sommes lâchés dans la nature. Comment ajouter des modules ? Comment ajouter des catégories ?

Toutes ces informations ne sont pas énoncées clairement, et demandent quelques minutes de recherche dans les fichiers pour être découvertes. Cela ne posera certainement pas de problème à un développeur, mais un intégrateur, même anglophone, aura beaucoup de mal à s'en sortir tout seul, ce qui est dommage.

Dans tous les cas, je trouve ce projet très intéressant, et je vous encourage vivement à y jeter un oeil, et pourquoi pas l'adopter pour vos projets !