HTML-Tutorial — Lily Design System

Wat Dir bauen wäert

E klengt Kontaktformulaire — Felder mat Etiketten, e Schécken-Knäppchen, richtegt Tastatur- an Écranliesser-Verhalen — fir d'éischt nackeg, duerno gestalt, an ongeféier 10 Minutten.

Ier Dir ufänkt

Dir braucht e Browser an en Texteditor. Dat ass alles. (git hëlleft, d'Komponentedateien ze kréien, awer Dir kënnt se och am Browser vun GitHub kopéieren.)

Schrëtt 1 — D'Code kréien

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

All Komponent ass eng eegestänneg Datei am components/ — button.html, text-input.htmlan esou weider — mat engem Kopkommentar, deen hire HTML-Tag, de Klassen-Hook, d'Tastaturverhalen an den Zougänglechkeetskontrakt dokumentéiert. D'Dateien sinn d'Bibliothéik — kopéiert, wat Dir braucht, a lass.

Schrëtt 2 — Är éischt Komponent

Maacht components/button.htmlop, oder schreift einfach d'Markup — de Klassen-Hook ass de Kontrakt:

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

Well et e richtegt <button>ass, sinn Tastatur-Fokus, Aktivéierung mat Enter a Space an déi implizit Knäppchen-Roll schonn richteg.

Schrëtt 3 — E klengt Formulaire zesummestellen

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

Bemierkt d'Muster: all Kontroll verlinkt säin <label for>, benotzt dee spezifeschsten Input-Typ a bréngt genee ee Kebab-Case-Klassen-Hook mat.

Kontrolléiert Är Aarbecht: maacht d'Säit am Browser op. Si gesäit nackeg aus — genee wéi geduecht: d'Gestaltung kënnt nach. Dréckt Tab: de Fokus geet duerch all Kontroll, d'Etiketten ginn ugekënnegt an d'Schécken funktionéiert. D'Verhalen ass fäerdeg; d'Ausgesi ass Är a kënnt als Nächst.

Schrëtt 4 — Gestalt et

Schreift CSS géint d'Hooks:

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

Oder iwwersprang d'Handschreiwe vu CSS ganz — verlinkt ee vun de 45 fäerdege Themen an datselwecht Markup liicht op:

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

Schrëtt 5 — Weider entdecken

D'Tester vum Repo lafen a richtege Browser: pnpm install && pnpm test (WebDriverIO).
Storybook fir all Komponent: pnpm run storybook.
HTML+CSS+JS Beispill-App weist all 571 Komponenten gestalt, duerchsichbar an demonstréiert.

Nächst Schrëtt

Themen — Themewiessel zur Laafzäit mat theme-picker.
Astellungs-Helperen — Sprooch a Textgréisst.
Komponentekatalog — déi komplett Referenz.

Froen ënnerwee? D'Hëllefsäit ass voller Äntwerten — a wann e Schrëtt méi kloer kéint sinn, soot et eis a mir verbesseren den Tutorial gär.