Référence

README & journal

Philosophie d’Aubui, règles et historique des versions.

Source : ui.aubota.xyz/README.md — rendu à la volée, toujours à jour.

Aubui est le design system officiel d’AUBOTA.xyz. Tu l’utilises comme un mini-framework externe : un import, des attributs, le reste est géré.

Installation (30 secondes)

HTML

<!DOCTYPE html>
<html lang="fr" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mon module</title>
  <script src="https://ui.aubota.xyz/js/aubui.js" defer></script>
</head>
<body>

  <nav aub-nav brand="MonModule">
    <a href="/">Accueil</a>
    <a href="/liste">Liste</a>
  </nav>

  <main style="padding: 1.5rem">
    <div aub-card pad>
      <h2 aub-title>Titre</h2>
      <p aub-muted>Description secondaire</p>
      <button aub-btn primary>Valider</button>
      <button aub-btn ghost sm>Annuler</button>
    </div>
  </main>

</body>
</html>

C’est tout. Le script injecte le CSS, transforme les attributs, construit la navbar (desktop + hamburger mobile), active le thème et la cloche.

Philosophie

Principe	Détail
Déclaratif	Tu décris l’intention (`aub-btn primary sm`), le script applique la forme
Source unique	Couleurs, radius, spacing → un seul fichier (`tokens.css`). Tout le domaine suit
Vanilla	Aucun framework externe. HTML / CSS / JS natifs
Progressif	Sans JS, le HTML reste lisible. Avec JS, il devient l’UI complète
Mobile-first	Navbar haute + hamburger automatique sous 720px

Vocabulaire HTML

Boutons

HTML

<button aub-btn>Default</button>
<button aub-btn primary>Primary</button>
<button aub-btn primary sm>Petit</button>
<button aub-btn danger lg>Danger large</button>
<button aub-btn ghost block>Pleine largeur</button>

Modificateurs : primary · ghost · danger · success · sm · md · lg · block

Cartes

HTML

<div aub-card pad>
  <h3 aub-title>Titre</h3>
  <p aub-muted>Corps</p>
</div>

Champs

HTML

<label aub-label>Email</label>
<input aub-input placeholder="vous@exemple.com">
<span aub-hint>On ne partage jamais ton email</span>

Navbar

HTML

<nav aub-nav brand="Feedback" brand-href="/">
  <a href="/public">Publics</a>
  <a href="/submit">Soumettre</a>
  <a href="/mine">Mes tickets</a>
</nav>

Options :

brand="…" — nom affiché
brand-href="…" — lien du brand (défaut /)
no-notif — pas de cloche
no-theme — pas de bouton thème

Le script génère : brand · liens · spacer · cloche · thème · hamburger (mobile) · drawer.

Alertes & badges

HTML

<div aub-alert info>Information</div>
<div aub-alert success>Succès</div>
<span aub-badge danger>Erreur</span>

Texte

HTML

<p aub-muted>Secondaire</p>
<a aub-link href="…">Lien accent</a>
<code aub-code>.aub-btn</code>

API JavaScript

// Notifications
AubotaNotif.setCount(3);
AubotaNotif.render([
  { title: 'Nouveau ticket', body: 'Bug X', time: '2 min', unread: true, href: '/admin/1' }
]);

// Forcer un re-scan (contenu ajouté dynamiquement)
Aubui.process();
Aubui.processNav();

Comportements data-attributes (toujours valides) :

Attribut	Effet
`data-aub-action="toggle"` + `data-aub-target="#id"`	affiche / masque
`data-aub-action="copy"` + `data-aub-copy="texte"`	presse-papiers
`data-aub-action="dismiss"`	ferme le parent dismissible
`data-aub-theme-toggle`	dark / light

Personnaliser l’apparence

Tout se passe dans css/aubui/tokens.css (couleurs, espaces, radius, typo). Tu changes une variable → tous les modules suivent. L’expérience utilisateur (structure, comportements) ne change pas.

Compatibilité classes classiques

Les classes .aub-btn, .aub-btn--primary, etc. restent supportées. Tu peux mixer attributs déclaratifs et classes si besoin (migration progressive).

Arborescence

Code

ui.aubota.xyz/
  aubui.css              → bundle CSS
  js/
    aubui.js             → point d’entrée unique
    engine.js            → moteur d’attributs + navbar
    theme.js, accent.js, actions.js, notifications.js
    dialog.js            → AubuiDialog + AubuiToast (lightbox, toasts)
    aubui-search.js      → AubuiSearch (non chargé par aubui.js)
    aubui-invite.js      → AubInvite (mode démo)
    timepicker.js, navbar.js, aubui.light.js, aubui.auth.js
  css/aubui/
    tokens.css           → design tokens (source unique)
    components/          → button, nav, card, …
    pages/               → layouts fins par module
  pages/                 → documentation interactive (une page par composant)
  docs/registry.php      → navigation de la doc (source unique)
  API.md                 → contrat figé
  README.md              → ce fichier

Documentation interactive

https://ui.aubota.xyz/ — une page par composant : à quoi ça sert, balise exacte, API, exemple vivant, accessibilité.

Installation · Tokens · Thème & accent · Motion
Boutons · Formulaires · Cartes & alertes · Navbar
Notifications · Dialogues & toasts · Recherche · Sélecteur d’heure · Invitation (démo)
Moteur déclaratif · Actions data-aub
États vides & chargement · Pages d’erreur · Catalogue
API figée — contrat complet (rendu de API.md)

La navigation (barre latérale, sommaire mobile, précédent/suivant, recherche, accueil) est construite depuis docs/registry.php : c’est la seule liste à tenir.

Règle : toute nouveauté Aubui = une section de doc

Aucun ajout dans ui.aubota.xyz (nouveau fichier js/*.js ou css/aubui/components/*.css, nouvel attribut, nouvelle option, nouvel événement) n’est livré sans sa doc dans le même livrable :

1. Page ou section dans pages/ (gabarit : pages/dialog.php) avec les 5 rubriques : à quoi ça sert · installer (balise exacte) · API (lue dans le code, jamais devinée) · exemple vivant (qui tourne sur le vrai composant) · accessibilité. 2. Entrée dans docs/registry.php : sources = les fichiers documentés, status, et une ligne news datée (elle apparaît dans « Nouveautés » sur l’accueil). 3. Ligne dans API.md si un attribut, une classe ou une globale est ajouté. 4. Changer AUB_BUILD dans js/aubui.js si un CSS/JS est modifié (cache 1 an).

Garde-fou : l’accueil de la doc liste en orange tout fichier js/*.js ou css/aubui/components/*.css qu’aucune page ne déclare dans ses sources. Un livrable Aubui qui fait apparaître ce bandeau n’est pas prêt.

Journal

2026-10-19

Doc refondue (INC-11, INC-12) : navigation par docs/registry.php, barre latérale + recherche (AubuiSearch) + sommaire, pages Navbar, Notifications, Dialogues & toasts, Recherche, Sélecteur d’heure, Invitation, Moteur, Actions, Motion, États vides ; API.md et ce README rendus dans la doc (/pages/source.php) ; contrôle de couverture sur l’accueil.
Règle « toute nouveauté Aubui = une section de doc » (ci-dessus).
.htaccess : le cache 1 an des fichiers ?v= s’applique enfin (règle déplacée avant l’arrêt « fichier existant »).

2026-10-18

aubui-search.js (AubuiSearch), dialog.js (AubuiDialog + AubuiToast, data-aub-confirm), aubui-invite.js (AubInvite), thème/accent synchronisés (aub-prefs, AubuiPrefsSync), cloche fiable.

2026-09-07

Navbar globale V2 (js/navbar.js + css/aubui/components/navbar-global.css + aubui.full.css)
Desktop : grands modules en liens horizontaux + sous-navbar (window.AubotaNav.links) ; header sticky (barre + ligne accent + sous-nav)
Mobile : cloche + hamburger → drawer (droite) avec nom / :AUBOTA.xyz, Déconnexion / Se connecter, dropdown modules, liste sous-modules, apparence (accent + thème)
Accent : persistance cross-sous-domaines (cookie domain=.aubota.xyz + localStorage) dans accent.js
Sélecteur de couleurs dans le drawer : panneau dans le flux (plus de débordement hors écran)

2026-08-26

navbar.js : barre globale 2 niveaux (modules + sous-nav) injectée partout via AubotaNav
Feedback + Hub branchés sur navbar.js

2026-08-25

Moteur déclaratif : attributs aub-btn primary sm → classes automatiques
Navbar intelligente : aub-nav brand="…" → structure complète + hamburger mobile + drawer
Import unique : un seul <script src="…/aubui.js"> injecte CSS + tout le JS
Docs reframées comme mini-framework

2026-08-20

Navbar standard + cloche notifications
Point d’entrée aubui.js (v1)
Feedback migré

2026-08-19

Migration complète CSS vers ui.aubota.xyz
Option B : src = métier seulement

Liens waza

#ui #aubui #engine

Changelog 2026-08-26

CSS plats : aubui.core.css (léger) + aubui.full.css (complet) — plus de chaîne @import
aubui.js mode léger : si AubotaNav.disabled → core + 4 scripts (pas navbar/notif)
Accent picker collapsible : 1 pastille, panneau au clic (data-aub-accent-picker)
Navbar : suppression de la barre sticky sous-modules ; pages module dans le drawer uniquement
Burger mobile : sections drawer (AUBOTA + pages du site), login/user masqués sur petit écran

Changelog 2026-09-07

Navbar V2 responsive (desktop liens / mobile drawer)
Header sticky complet
Accent cookie .aubota.xyz
Fix panneau accent dans le drawer mobile