Un guide de styles (aka « Style Guide ») est un ensemble de normes pour la rédaction et la conception de documents, que ce soit pour un usage général, une publication spécifique ou une organisation. (Il est souvent appelé « feuille de styles », bien que ce terme a d’autres significations.) Un guide de styles établit et applique certains styles afin d’améliorer la communication.
Il existe Plusieurs modèles de « Style Guide ». On peut même Générer sa propre documentation « Style Guide » (Personnellement je test « Kalei – Style guide » dans un autre projet). Ce qu’il faut comprendre c’est qu’aucune documentation n’est parfaite ou 100% complète mais, n’avoir aucune documentation est pire.
Les principaux avantages du « Style Guide » sont :
- Plus facile de tester (parce que tout y est visuellement)
- Un meilleur « Worflow » (surtout pour les nouveaux venus)
- Un vocabulaire uniforme et une référence pour tous les intervenants (parce que c’est très difficile de se parler *sarcasme*)
Produire et maintenir un « Web Style Guide » efficace avec SASS.
Afin de s’inspirer, il existe plusieurs modèles de « Style Guide ». Personnellement, je m’inspire de Bootstrap et de son outil de personnalisation pour LESS, que je transforme en SASS. Sans utiliser la compilation de cet outil, copier/coller la nomenclature utilisée donne une excellente base pour le « Style Guide » avec plusieurs variables.
Voici un exemple (en évolution) de « Style Guide » SASS inspiré de Bootstrap
// styleguide:scss // helpers $helper-success : #66cc66; $helper-info : #66ccff; $helper-warning : #ffcc66; $helper-danger : #ff6666; // grays $gray-base : #000; $gray-darker : lighten($gray-base, 10%); $gray-dark : lighten($gray-base, 25%); $gray : lighten($gray-base, 50%); $gray-light : lighten($gray-base, 85%); $gray-lighter : lighten($gray-base, 95%); // brands $brand-primary : #fa5843; $brand-primary-light : lighten($brand-primary, 5%); $brand-primary-dark : darken($brand-primary, 5%); $brand-secondary : #f77948; $brand-secondary-light : lighten($brand-secondary, 5%); $brand-secondary-dark : darken($brand-secondary, 5%); $brand-tertiary : #f9b046; $brand-tertiary-light : lighten($brand-tertiary, 5%); $brand-tertiary-dark : darken($brand-tertiary, 5%); // scaffolding $body-bg : #fff; $text-color : $gray-dark; $text-color-invert : darken($text-color, 15%); $link-color : $brand-primary; $link-color-invert : $text-color-invert; $link-decoration : underline; $link-hover-color : darken($link-color, 15%); $link-hover-color-invert : darken($link-hover-color, 15%); // typography $font-family-sans-serif : "Helvetica Neue", Helvetica, sans-serif; $font-family-serif : serif; $font-family-monospace : monospace; $font-family-base : $font-family-sans-serif; $font-size-base : 16px; $font-size-large : $font-size-base * 1.25; $font-size-small : $font-size-base * 0.85; $font-size-h1 : $font-size-base * 4.5; $font-size-h2 : $font-size-base * 3; $font-size-h3 : $font-size-base * 2.25; $font-size-h4 : $font-size-base * 1.25; $font-size-h5 : $font-size-base; $font-size-h6 : $font-size-base * 0.85; $line-height-base : 1.428571429; $line-height-computed : $font-size-base * $line-height-base; $headings-font-family : inherit; $headings-font-weight : 500; $headings-line-height : 1.1; $headings-color : inherit; // components $padding-base-vertical : 6px; $padding-base-horizontal : 12px; $padding-large-vertical : 12px; $padding-large-horizontal : 24px; $padding-small-vertical : 5px; $padding-small-horizontal : 10px; $padding-xs-vertical : 1px; $padding-xs-horizontal : 5px; $margin-base-vertical : 6px; $margin-base-horizontal : 12px; $margin-large-vertical : 10px; $margin-large-horizontal : 16px; $margin-small-vertical : 5px; $margin-small-horizontal : 10px; $margin-xs-vertical : 1px; $margin-xs-horizontal : 5px; $line-height-large : 1.3333333; $line-height-small : 1.5; $border-radius-base : 4px; $border-radius-large : 6px; $border-radius-small : 3px; $component-active-color : #fff; $component-active-bg : $brand-primary; $caret-width-base : 4px; $caret-width-large : 5px; // buttons $btn-font-size : 16px; $btn-font-weight : 700; $btn-line-height : 1; $btn-base-border-width : 2px; $btn-large-border-width : 3px; $btn-small-border-width : 1px; $btn-default-color : $gray; $btn-default-bg : #fff; $btn-default-border : $btn-default-color; $btn-default-outline-color : #fff; $btn-default-outline-bg : transparent; $btn-default-outline-border : $btn-default-outline-color; $btn-primary-color : #fff; $btn-primary-bg : $brand-primary; $btn-primary-border : darken($btn-primary-bg, 5%); $btn-primary-outline-color : $brand-primary; $btn-primary-outline-bg : $btn-default-outline-bg; $btn-primary-outline-border : $btn-primary-outline-color; $btn-secondary-color : #fff; $btn-secondary-bg : $brand-secondary; $btn-secondary-border : darken($btn-secondary-bg, 5%); $btn-secondary-outline-color : $brand-secondary; $btn-secondary-outline-bg : $btn-default-outline-bg; $btn-secondary-outline-border : $btn-secondary-outline-color; $btn-tertiary-color : #fff; $btn-tertiary-bg : $brand-tertiary; $btn-tertiary-border : darken($btn-tertiary-bg, 5%); $btn-tertiary-outline-color : $brand-tertiary; $btn-tertiary-outline-bg : $btn-default-outline-bg; $btn-tertiary-outline-border : $btn-tertiary-outline-color; $btn-success-color : #fff; $btn-success-bg : $helper-success; $btn-success-border : darken($btn-success-bg, 5%); $btn-info-color : #fff; $btn-info-bg : $helper-info; $btn-info-border : darken($btn-info-bg, 5%); $btn-warning-color : #fff; $btn-warning-bg : $helper-warning; $btn-warning-border : darken($btn-warning-bg, 5%); $btn-danger-color : #fff; $btn-danger-bg : $helper-danger; $btn-danger-border : darken($btn-danger-bg, 5%); $btn-link-color : #fff; $btn-link-bg : $helper-danger; $btn-link-border : darken($btn-danger-bg, 5%); $btn-link-disabled-color : $gray-light; $btn-border-radius-base : $border-radius-base; $btn-border-radius-large : $border-radius-large; $btn-border-radius-small : $border-radius-small; // endstyleguide
Inclure toutes les composantes dans le « Style Guide »
Je conseille aussi d’inclure dans le « Style Guide » toutes les composantes d’un site Web. En travaillant avec différentes équipes et différents langages de programmation, je me suis rendu compte qu’il était beaucoup plus facile d’éviter les régressions visuelles en ayant toutes les composantes sur une seule et même page (statique). La page devient longue… Parfois très longue mais, je peux vous garantir qu’il est plus facile visuellement de confirmer le bon fonctionnement d’une modification CSS lorsque toutes les composantes sont sur une seule et même page. Pour vous en convaincre, imaginez-vous un processus de « Checkout », avec des messages, des « labels », etc. Un autre avantage de cette façon de faire est de fournir aux développeurs et programmeurs toutes les parcelles de code nécessaire afin qu’ils puissent aller les placer, eux-mêmes, aux bons endroits.
- Ressources, tools and examples :
- Sources :
-
- Debenham, Anna, « Front-end Style Guides », 7 décembre 2011.
- Frost, Brad, « Atomic Design », 6 octobre 2013.
- Robertson, Susan, « Creating Style Guides », 8 avril 2014.
