Tutoriel HTML — Lily Design System

Ce que vous allez construire

Un petit formulaire de contact — champs avec étiquettes, un bouton d'envoi, vrai comportement clavier et lecteur d'écran — d'abord nu, puis stylé, en 10 minutes environ.

Avant de commencer

Il vous faut un navigateur et un éditeur de texte. C'est tout. (git aide à récupérer les fichiers des composants, mais vous pouvez aussi les copier depuis GitHub dans le navigateur.)

Étape 1 — Récupérer le code

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

Chaque composant est un fichier autonome dans components/ — button.html, text-input.htmlet ainsi de suite — avec un commentaire d'en-tête documentant sa balise HTML, son crochet de classe, son comportement clavier et son contrat d'accessibilité. Les fichiers sont la bibliothèque — copiez ce dont vous avez besoin et partez.

Étape 2 — Votre premier composant

Ouvrez components/button.html, ou écrivez simplement le balisage — le crochet de classe est le contrat :

<button class="button" type="button">
  Save
</button>

Comme c'est un vrai <button>, le focus clavier, l'activation avec Entrée et Espace et le rôle de bouton implicite sont déjà corrects.

Étape 3 — Composer un petit formulaire

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

Remarquez le motif : chaque contrôle lie son propre <label for>, utilise le type d'input le plus spécifique et porte exactement un crochet de classe en kebab-case.

Vérifiez votre travail : ouvrez la page dans un navigateur. Elle paraît nue — exactement comme prévu : le style reste à venir. Appuyez sur Tab: le focus traverse chaque contrôle, les étiquettes sont annoncées et l'envoi fonctionne. Le comportement est fait ; l'apparence est la vôtre et c'est l'étape suivante.

Étape 4 — Le styler

Écrivez du CSS contre les crochets :

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

Ou sautez entièrement l'écriture du CSS à la main — liez l'un des 45 thèmes prêts à l'emploi et le même balisage s'illumine :

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

Étape 5 — Explorer plus loin

Les tests du dépôt s'exécutent dans de vrais navigateurs : pnpm install && pnpm test (WebDriverIO).
Storybook pour chaque composant : pnpm run storybook.
L'application d'exemple HTML+CSS+JS montre les 571 composants stylés, interrogeables et démontrés.

Étapes suivantes

Thèmes — changement de thème à l'exécution avec theme-picker.
Assistants de préférences — langue et taille du texte.
Catalogue de composants — la référence complète.

Des questions en chemin ? La page d'aide regorge de réponses — et si une étape peut être plus claire, dites-le-nous et nous améliorerons volontiers le tutoriel.