Créer un guide de style

Une étape importante du développement d'un projet est la création du guide de style. Il nous permet d'établir des styles et des composantes de base qui pourront être réutilisés tout au long du développement. Lors de sa création, nous établissons aussi la [structure du projet]. Ainsi, une fois le guide de style terminé, nous avons une fondation commune à chaque membre de l'équipe.

Les aspects principaux du code de l'application affectés par le guide de style sont les styles Sass. Nous allons donc principalement voir comment organiser notre CSS pour le style guide.

Configuration de Bootstrap 4

Tout au long de l'intégration du guide de style et du projet, nous assurons de configurer Bootstrap pour qu'il prenne en charge les styles les plus basiques tels que les couleurs, polices et graisses des textes et titres et la couleur de fond. De plus, nous configurons les breakpoints, les colonnes, les « containers » et la gouttière de la grille.

Il suffit de se référer au fichier /node_modules/bootstrap/scss/_variables.scss de Bootstrap. À l'intérieur de celui-ci on peut retrouver chaque aspect personnalisable du framework CSS en copiant les variables que nous voulons modifier à l'intérieur de notre propre _variables.scss. Nous réutilisons généralement les variables des sections suivantes :

• Color system
• Spacing
• Body
• Links
• Paragraphs
• Grid breakpoints
• Grid containers
• Grid columns
• Typography

WARNING

Dans le passé nous avons aussi utilisé les sections Buttons et Forms. Nous ne recommandons pas leur utilisation à moins que les modifications à faire aux composantes Bootstrap soient mineures (sans override nécessaire).

Intégration et présentation

Pendant l'intégration du guide de style d'un projet, nous créons une page dédiée à ce dernier. Nommée « styleguide », cette page nous permet de voir nos ajouts et nous en référer dans le futur. Chaque section qui suit dans ce guide devra avoir sa propre section dans le guide de style.

Chaque élément du guide de style devrait présenter les $variables, @mixins et/ou .classes nécessaires pour les répliquer.

Couleurs

Premièrement, nous devons extraire toutes les couleurs des maquettes et en faire des variables dans notre abstracts/_variables.scss.

Nommer les couleurs

Généralement nous groupons les couleurs ainsi :

• Les couleurs réelles : $red, $green, $blue, etc. Nous donnons un nom reconnaissable aux couleurs de la marque. Mis à part de rares exceptions, nous n'utilisons pas ces variables directement dans le code.
• Les gris : $gray-<gradation> (ex. $gray-100 ou $gray-light). Nous donnons un nom reconnaissable aux teintes de gris. Puisque le gris a tendance à rester le même entre les thèmes, nous nous permettons d'utiliser ces variables directement dans le code.
• Les couleurs du thème : $primary, $warning, $border-color, etc. Nous réutilisons les couleurs des groupes ci-dessus en leur donnant un nom représentatif quant à leur utilité dans le thème. Ainsi, si tous les accents du projet venaient à changer de rouge à bleu nous n'avons qu'à changer $primary plutôt que $red.

Typographie

Deuxièmement, nous configurons le style des textes et titres généraux en ajoutant les polices et en changeant les variables Bootstrap telles que $font-size-base, $line-height-base, $headings-font-family, etc.

TIP

Nous utilisons toujours des variables lorsqu'il s'agit de font-weight et de font-family.

TIP

Lorsque la maquette a des letter-spacing récurrents, nous créons des variables $letter-spacing-base et autre. Ces variables sont toujours en em pour que le spacing s'adapte à la taille de texte.

Ensuite, nous présentons les principaux styles de titre et de texte réutilisés dans l'application. Pour chaque style, nous créons un @mixin et une .classe qui utilise ce mixin. Ces mixins et classes ainsi que tout import de polices sont ajoutés au fichier base/_typography.scss. Dans ces styles, nous redéfinissons toutes les propriétés de texte afin qu'ils puissent override les autres styles si nécessaire.

Boutons

Troisièmement, nous créons des mixins et des classes pour chaque bouton de l'application. Nous utilisons une classe pour les styles de bases d'un groupe de boutons (ex. .btn) et un "modifier" pour chaque bouton descendant (ex. .btn--primary).

Les boutons principaux de l'application ont habituellement un nom qui représente leur niveau d'importance : primary, secondary, tertiary, quaternary, etc. « Primary » ici serait le bouton que l'usager aura le plus tendance à cliquer dans la liste.

Champs de formulaire

Dernièrement, nous ajoutons au guide de style les composantes de formulaires récurrentes de l'application. Si ces composantes sont dynamiques, nous donnons des exemples pertinents à leur utilisation.

Bonus : les autres composantes

Nous ajoutons aussi d'autres composantes au guide de style tout au long du développement.