Verser un pattern

Deux portes, la même bibliothèque : un formulaire si vous ne voulez pas cloner, une pull request si git ne vous fait pas peur. Dans les deux cas un contrôle automatique répond dans la minute, champ par champ, et vous êtes crédité dans le pattern. Licence MIT.

Remplir le formulaire ↗ Forker le dépôt ↗

Sans git — le formulaire

Remplissez le formulaire. Identifiant, famille, intention, conditions d'emploi, mots-clés, et le fragment HTML avec son <style>. Rien à installer.
Un robot contrôle dans la minute et commente ce qui manque : identifiant déjà pris, script ou image interdits, couleurs en dur, avoid_when trop court. Vous modifiez l'issue, le contrôle se rejoue.
Un mainteneur répond /accepter : les fichiers sont écrits, l'index régénéré, et une pull request s'ouvre à votre nom. Elle se referme sur votre issue à la fusion.

Avec git — la pull request

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.

Ouvrir une pull request ↗

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
    }
  ]
}