Styleguides dynamiques et les bonnes méthodes de communication d’un projet web

Un classeur de plusieurs centaines de pages, voilà l’image que nous avons des styleguides visuels expliquant les espacements minimums à respecter autour du logo de l’entreprise. Le guide documente les couleurs, les typos et le type de photographies représentant bien l’image de la marque. Certains documents vont encore plus loin avec le ton de voix et phrases types. Les styleguides dynamiques ou web styleguides ne remplacent pas ces classeurs, mais les complètent pour leur partie web.

Les références couleur les interlignages, références typographiques ou même liste des iconographies sont les éléments habituels d’un styleguide web. Le comportement du responsive webdesign ou les design pattern des formulaires sont également présents. La première référence qui vous vient à l’esprit est peut être bootstrap et sa page de documentation qui liste tous les éléments disponibles dans le framework.

bootstrap

Créer un siteweb contenant tous les éléments en chargeant le CSS en production est effectivement la meilleure manière de tester et partager ce guide de référence pour le projet. Cela permet de valider la compatibilité sur tous les navigateurs et devices du marché. Utiliser le stylesheet de production permet de garantir la mise à jour de la documentation.

Le système que nous utilisons est basé sur l’expérience et les mécanismes présents dans bon nombre de langages pour générer une documentation à partir du code. Les commentaires selon un certain standard sont utilisés pour générer le styleguide.
Il existe plusieurs implémentations, nous avons choisi la version de Kalei Styleguide car elle permet plus de souplesse.

Par exemple, le CSS suivant définissant l’affichage des citations est documenté directement dans un commentaire précédant la définition.

Notez l’utilisation des préprocesseur CSS pour les couleurs, les typographies et autres mixins pour les tailles des typos.

Lors de l’ajout d’une nouvelle définition CSS, le développeur réfléchit automatiquement à la modularité de son code. En écrivant le code HTML utilisé pour afficher cet élément, le choix des noms sera pensé pour être réutilisable.

La documentation est au coeur de la communication d’un projet. Elle est l’outil qui permettra au projet de vivre plus longtemps et plus sainement. Elle doit être mise à jour à chaque modification pour toujours refléter l’état actuel. Les styleguides web générés sont une petite révolution qui accompagne toutes les nouvelles bonnes pratiques dans le monde du développement frontend.