Tutorial HTML — Lily Design System

Cosa costruirai

Un piccolo modulo di contatto — campi con etichetta, un pulsante di invio, comportamento reale di tastiera e screen reader — prima spoglio, poi stilizzato, in circa 10 minuti.

Prima di iniziare

Servono un browser e un editor di testo. Tutto qui. (git aiuta a prendere i file dei componenti, ma puoi copiarli anche da GitHub nel browser.)

Passo 1 — Ottieni il codice

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

Ogni componente è un file autonomo in components/ — button.html, text-input.html, e così via — con un commento di intestazione che documenta il suo tag HTML, l'hook di classe, il comportamento da tastiera e il contratto di accessibilità. I file sono la libreria — copia ciò che ti serve e vai.

Passo 2 — Il tuo primo componente

Apri components/button.html, oppure scrivi semplicemente il markup — l'hook di classe è il contratto:

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

Poiché è un vero <button>, il focus da tastiera, l'attivazione con Invio e Spazio e il ruolo implicito di pulsante sono già corretti.

Passo 3 — Componi un piccolo modulo

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

Nota lo schema: ogni controllo collega la propria <label for>, usa il tipo di input più specifico e porta esattamente un hook di classe in kebab-case.

Controlla il lavoro: apri la pagina in un browser. Appare spoglia — esattamente come previsto: lo stile deve ancora venire. Premi Tab: il focus si sposta su ogni controllo, le etichette vengono annunciate e l'invio funziona. Il comportamento è fatto; l'aspetto è tuo, ed è il prossimo passo.

Passo 4 — Dagli uno stile

Scrivi CSS sugli hook:

.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; }

Oppure salta del tutto la scrittura a mano del CSS — collega uno dei 45 temi pronti e lo stesso markup si accende:

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

Passo 5 — Esplora oltre

I test del repository girano su browser reali: pnpm install && pnpm test (WebDriverIO).
Storybook per ogni componente: pnpm run storybook.
App di esempio HTML+CSS+JS mostra tutti i 571 componenti stilizzati, ricercabili e dimostrati.

Prossimi passi

Temi — cambio di tema a runtime con theme-picker.
Helper delle preferenze — lingua e dimensione del testo.
Catalogo dei componenti — il riferimento completo.

Domande lungo la strada? La pagina di aiuto è piena di risposte — e se un passo può essere più chiaro, faccelo sapere e miglioreremo volentieri il tutorial.