Návod pro HTML — Lily Design System

Co vytvoříte

Malý kontaktní formulář — pole se štítky, tlačítko odeslat, skutečné chování klávesnice a čtečky obrazovky — nejprve holý, potom ostylovaný, zhruba za 10 minut.

Než začnete

Potřebujete prohlížeč a textový editor. To je vše. (git pomáhá při získání souborů komponent, ale můžete je zkopírovat i z GitHubu v prohlížeči.)

Krok 1 — Získejte kód

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

Každá komponenta je samostatný soubor v components/ — button.html, text-input.htmla tak dále — se záhlavním komentářem dokumentujícím její značku HTML, třídní háček, chování klávesnice a smlouvu o přístupnosti. Soubory jsou knihovna — zkopírujte, co potřebujete, a jeďte.

Krok 2 — Vaše první komponenta

Otevřete components/button.html, nebo prostě napište značky — třídní háček je smlouva:

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

Protože je to skutečný <button>, fokus klávesnice, aktivace klávesami Enter a mezerník i implicitní role tlačítka jsou už správně.

Krok 3 — Sestavte malý formulář

<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šimněte si vzoru: každý ovládací prvek propojí svůj <label for>, použije nejpřesnější typ vstupu a nese přesně jeden třídní háček v kebab-case.

Zkontrolujte svou práci: otevřete stránku v prohlížeči. Vypadá holě — přesně jak bylo zamýšleno: stylování teprve přijde. Stiskněte Tab: fokus prochází každým ovládacím prvkem, štítky se oznamují a odeslání funguje. Chování je hotové; vzhled je váš a je další na řadě.

Krok 4 — Ostylujte ho

Napište CSS proti háčkům:

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

Nebo ruční psaní CSS úplně přeskočte — připojte jedno z 45 hotových témat a stejné značky se rozsvítí:

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

Krok 5 — Prozkoumejte dál

Testy repozitáře běží ve skutečných prohlížečích: pnpm install && pnpm test (WebDriverIO).
Storybook pro každou komponentu: pnpm run storybook.
Ukázková aplikace HTML+CSS+JS ukazuje všech 571 komponent ostylovaných, prohledávatelných a předvedených.

Další kroky

Témata — přepínání tématu za běhu pomocí theme-picker.
Pomocníci pro předvolby — jazyk a velikost textu.
Katalog komponent — úplná reference.

Otázky cestou? Stránka nápovědy je plná odpovědí — a pokud by nějaký krok mohl být jasnější, dejte nám vědět a návod rádi vylepšíme.