Développement d’un bloc statique pour le design system
Critères de qualité généraux
- Le HTML doit être sémantique
- Les classes utilisées doivent respecter la méthodologie BEM
- Des variables CSS doivent être utilisées pour les propriétés configurables du bloc
- Le bloc doit respecter les normes d’accessibilité WCAG 1.0
- Le bloc doit s’adapter à toutes les tailles d’écran
- Le bloc doit fonctionner dans les navigateurs récents
Normes établies
- __item est utilisé comme terme générique pour nommer les éléments d’un bloc listing
- Chaque variante de bloc a son dossier.
- Au début du fichier SCSS, mettre @import “Utilities/all”; pour avoir accès aux fonctions et variables SCSS définies dans assets/src/scss/utilities. Notamment la variable $spacer qui correspond à 8px (voir assets/src/utilities pour trouver les fonctions et les variables)
Exceptions
- L’éditeur Gutenberg ne permet pas facilement de créer des modifiers à la BEM. .bloc–horizontal n’est pas possible, on utilise plutôt .bloc.is-style-horizontal
- On ne peut pas faire de variantes sur les éléments enfant du bloc.
Méthode de travail
- Checkout le repository Git du design system
- Exécuter
`npm install`pour pouvoir compiler le CSS - Créer une branche pour le développement du nouveau bloc
- Créer un dossier au nom du bloc dans activis/blocks ou dans blocks dans le cas d’un bloc spécifique à un projet
- Créer un html nommé comme le bloc
- Créer un SCSS nommé comme le bloc
- Exécuter
`block=nom-du-bloc npm run watch`pour lancer le compilateur automatique. (Une page s’ouvre dans le navigateur et elle se rafraîchira automatiquement lors des changements au code) - Ajouter le fichier de variables css style.css au fichier HTML
- Ajouter le fichier CSS assets/css/base.min.css
- Ajouter le fichier CSS du bloc au fichier HTML (bloc.min.css: le fichier est suffixé de .min lors de la compilation)
- Ouvrir le fichier HTML dans un navigateur
- Coder le bloc
- Commiter le travail sur la branche
- Pusher le travail sur Github
- Créer une pull request pour le review
Exemple de dossier
https://drive.google.com/file/d/1uMYgJuX9u4mD8SPDunBreroAIJoTwR0A/view?usp=sharing
Création d’une variante (BEM modifier)
- Créer un fichier bloc–variante.scss (sans le is-style-)
- Ajouter le HTML de la variante au même fichier HTML initial
- Ajouter le tag link pour le nouveau fichier css dans le HTML
Livrable attendu
- Un dossier au nom du bloc
- Un fichier HTML contenant le HTML de chacune des variantes
- Un ou plusieurs fichiers SCSS et CSS