Tutorial HTML — Lily Design System

Ce vei construi

Un mic formular de contact — câmpuri cu etichete, un buton de trimitere, comportament real al tastaturii și al cititorului de ecran — mai întâi simplu, apoi stilizat, în aproximativ 10 minute.

Înainte să începi

Ai nevoie de un browser și de un editor de text. Atât. (git ajută la obținerea fișierelor componentelor, dar le poți copia și de pe GitHub în browser.)

Pasul 1 — Obține codul

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

Fiecare componentă este un fișier de sine stătător în components/ — button.html, text-input.htmlși așa mai departe — cu un comentariu de antet care documentează eticheta HTML, cârligul de clasă, comportamentul tastaturii și contractul de accesibilitate. Fișierele sunt biblioteca — copiază ce ai nevoie și pornește.

Pasul 2 — Prima ta componentă

Deschide components/button.htmlsau scrie pur și simplu marcajul — cârligul de clasă este contractul:

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

Fiindcă este un <button>real, focalizarea tastaturii, activarea cu Enter și Space și rolul implicit de buton sunt deja corecte.

Pasul 3 — Compune un formular mic

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

Observă tiparul: fiecare control își leagă <label for>, folosește cel mai specific tip de input și poartă exact un cârlig de clasă în kebab-case.

Verifică-ți munca: deschide pagina într-un browser. Arată simplu — exact cum era intenționat: stilizarea urmează. Apasă Tab: focalizarea trece prin fiecare control, etichetele sunt anunțate, iar trimiterea funcționează. Comportamentul este gata; aspectul este al tău și urmează.

Pasul 4 — Stilizează-l

Scrie CSS pe cârlige:

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

Sau sari complet peste scrisul CSS-ului de mână — leagă una dintre cele 45 de teme gata făcute și același marcaj se luminează:

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

Pasul 5 — Explorează mai departe

Testele depozitului rulează în browsere reale: pnpm install && pnpm test (WebDriverIO).
Storybook pentru fiecare componentă: pnpm run storybook.
Aplicația-exemplu HTML+CSS+JS arată toate cele 571 de componente stilizate, căutabile și demonstrate.

Pașii următori

Teme — comutare de temă în timpul rulării cu theme-picker.
Ajutoare pentru preferințe — limbă și dimensiunea textului.
Catalogul de componente — referința completă.

Întrebări pe parcurs? Pagina de ajutor este plină de răspunsuri — iar dacă un pas poate fi mai clar, spune-ne și vom îmbunătăți cu plăcere tutorialul.