Verser un pattern

La bibliothèque n'a pas de base de données et pas de formulaire : le dépôt EST le formulaire. Un pattern, ce sont deux fichiers dans patterns/ — un fragment HTML autonome et son contrat JSON — plus, si sa charte est nouvelle, un jeu de jetons dans systems/. Vous ouvrez une pull request, elle est relue, elle est fusionnée. Licence MIT.

Forkez et clonez. gh repo fork lbachelotcapitalb/visual-lab --clone
Écrivez le fragment dans patterns/<famille>-<NN>-<slug>.html. Autonome : son CSS voyage dans un <style> à l'intérieur du fichier, ses couleurs passent par des variables --vl-*, jamais par des valeurs en dur. Aucun script, aucune police distante, aucune image.
Écrivez le contrat dans le .json du même nom (gabarit ci-dessous). avoid_when vaut when_to_use : un pattern qu'on ne sait pas refuser ne sert à rien.
Régénérez et vérifiez. node bin/index.mjs && node bin/check.mjs <id> — l'index se reconstruit, les benchmarks se rejouent dans un vrai navigateur.
Ouvrez la pull request. Une pull request = un pattern (ou une charte + ses patterns). Décrivez ce que la composition résout, pas à quoi elle ressemble.

Forker le dépôt ↗ Ouvrir une pull request ↗ Proposer sans coder (issue) ↗

La nomenclature

Le nom de fichier porte la famille : card-12-inverted-kpi-row est de famille card, et l'index le vérifie. Le vocabulaire est fermé — huit familles, pas neuf :

cardchartdiagramlayoutlistshapetagtitle

diagram ≠ chart : un chart porte des données (une valeur mesurée décide de la géométrie), un diagram porte une structure (couches, flux, appartenance) où rien n'est proportionnel à quoi que ce soit.

Les médias

Un pattern déclare où il est censé servir — c'est une intention, la faisabilité se prouve par bin/emit.mjs --target <média>, qui refuse ce que la cible ne sait pas rendre :

slidewebemailprintsocial

Ce qui fait refuser une contribution

une couleur en dur au lieu d'un `--vl-*`	le fragment ne se thème plus
une police ou une image distante	zéro requête sortante est un invariant
du JavaScript dans le fragment	un pattern est une composition, pas un composant
un `avoid_when` vide ou décoratif	sans lui le catalogue ne route plus
un binaire (PNG, capture)	une image est une copie morte, elle périme en silence

Le gabarit JSON

patterns/<id>.json

{
  "name": "Nom court, en français, de ce que la composition FAIT",
  "family": "card",
  "ref": "ref-20-ma-charte",
  "media": [
    "slide",
    "web"
  ],
  "intent": "Une phrase : le problème de composition que ce pattern résout.",
  "when_to_use": "Les conditions concrètes où on le prend.",
  "avoid_when": "Les conditions où il est le mauvais choix — cette ligne vaut la précédente.",
  "tags": [
    "carte",
    "chiffre",
    "preuve"
  ],
  "vars": [
    {
      "name": "--vl-accent",
      "role": "aplat d'accent",
      "default": "#E8342A"
    }
  ],
  "slots": [
    "title",
    "figure",
    "body"
  ],
  "geometry": {
    "root": ".vl-mon-pattern",
    "frame": [
      430,
      340
    ]
  },
  "benchmarks": [
    {
      "name": "le chiffre fait ~5× le micro-libellé",
      "measure": "size('.vl-x__figure') / size('.vl-x__kicker')",
      "expect": 5,
      "tol": 0.6
    }
  ]
}