Návod pre HTML — Lily Design System

Čo vytvoríte

Malý kontaktný formulár — polia s popismi, tlačidlo odoslať, skutočné správanie klávesnice a čítačky obrazovky — najprv holý, potom ostylovaný, približne za 10 minút.

Skôr než začnete

Potrebujete prehliadač a textový editor. To je všetko. (git pomáha pri získaní súborov komponentov, ale môžete ich skopírovať aj z GitHubu v prehliadači.)

Krok 1 — Získajte kód

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

Každý komponent je samostatný súbor v components/ — button.html, text-input.htmla tak ďalej — s hlavičkovým komentárom dokumentujúcim jeho značku HTML, triedny háčik, správanie klávesnice a zmluvu o prístupnosti. Súbory sú knižnica — skopírujte, čo potrebujete, a choďte.

Krok 2 — Váš prvý komponent

Otvorte components/button.html, alebo jednoducho napíšte značky — triedny háčik je zmluva:

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

Pretože je to skutočný <button>, fokus klávesnice, aktivácia klávesmi Enter a medzerník aj implicitná rola tlačidla sú už správne.

Krok 3 — Zložte malý formulár

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

Všimnite si vzor: každý ovládací prvok prepojí svoj <label for>, použije najpresnejší typ vstupu a nesie presne jeden triedny háčik v kebab-case.

Skontrolujte svoju prácu: otvorte stránku v prehliadači. Vyzerá holo — presne podľa zámeru: štýlovanie ešte len príde. Stlačte Tab: fokus prechádza každým ovládacím prvkom, popisy sa oznamujú a odoslanie funguje. Správanie je hotové; vzhľad je váš a je ďalším krokom.

Krok 4 — Ostylujte ho

Napíšte CSS proti háčikom:

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

Alebo ručné písanie CSS úplne preskočte — pripojte jednu zo 45 hotových tém a rovnaké značky sa rozsvietia:

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

Krok 5 — Preskúmajte ďalej

Testy repozitára bežia v skutočných prehliadačoch: pnpm install && pnpm test (WebDriverIO).
Storybook pre každý komponent: pnpm run storybook.
Ukážková aplikácia HTML+CSS+JS ukazuje všetkých 571 komponentov ostylovaných, prehľadávateľných a predvedených.

Ďalšie kroky

Témy — prepínanie témy za behu pomocou theme-picker.
Pomocníci pre predvoľby — jazyk a veľkosť textu.
Katalóg komponentov — úplná referencia.

Otázky po ceste? Stránka pomocníka je plná odpovedí — a ak by niektorý krok mohol byť jasnejší, dajte nám vedieť a návod radi vylepšíme.