Blocs statiques - Design System

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

__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)

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.

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