Catalogue Aubui

Contrat unique. Toute UI produit doit venir d’ici. Besoin nouveau → entrée catalogue + API.md + CSS, puis usage.

Installation

<link rel="stylesheet" href="https://ui.aubota.xyz/aubui.css">
<script src="https://ui.aubota.xyz/js/theme.js" defer></script>
<script src="https://ui.aubota.xyz/js/accent.js" defer></script>
<script src="https://ui.aubota.xyz/js/actions.js" defer></script>

Boutons `.aub-btn`

<button type="button" class="aub-btn aub-btn--primary">Primary</button>
<button type="button" class="aub-btn aub-btn--ghost aub-btn--sm">Ghost sm</button>
<button type="button" class="aub-btn aub-btn--primary aub-btn--block">Pleine largeur</button>

Champs

Nom Aide optionnelle

Catégorie

Options

Newsletter Notifs

<div class="aub-field">
  <label class="aub-label" for="email">Email</label>
  <input class="aub-input aub-input--block" id="email" type="email">
  <span class="aub-hint">On ne spamme pas.</span>
</div>

<select class="aub-input aub-input--block">
  <optgroup label="Véhicules">
    <option>Voiture</option>
  </optgroup>
</select>

<label class="aub-check"><input type="checkbox"> Accepter</label>

Cartes & badges

Tag

Titre carte

Corps de la carte avec texte secondaire.

<div class="aub-card aub-card--pad">
  <h3 class="aub-card__title">Titre</h3>
  <p class="aub-muted">Contenu</p>
</div>
<span class="aub-badge">Badge</span>

Alertes

Info —

Succès

Attention

Erreur

<div class="aub-alert aub-alert--danger" data-aub-dismissible>
  <div>Message
    <button type="button" class="aub-btn aub-btn--sm aub-btn--ghost" data-aub-action="dismiss">Fermer</button>
  </div>
</div>

Actions `data-aub-*`

Pas de JS métier dans les modules pour ça — uniquement actions.js.

<button type="button" class="aub-btn" data-aub-action="toggle" data-aub-target="#x">Toggle</button>
<div id="x" hidden>…</div>

<button type="button" class="aub-btn" data-aub-action="copy" data-aub-copy="texte fixe">Copier</button>
<button type="button" class="aub-btn" data-aub-action="copy" data-aub-copy-from="#input">Copier champ</button>

Thème & accent

data-theme="dark|light" sur <html> · data-accent="blue|yellow|…"

<html data-theme="dark" data-accent="blue">
<button type="button" data-aub-theme-toggle>Thème</button>
<button type="button" class="aub-accent-dot" data-accent-set="green"></button>

Règle

Interdit d’inventer .mon-bouton dans un module. D’abord catalogue + API.md, ensuite les views.