HTML-Tutorial — Lily Design System

Was du baust

Ein kleines Kontaktformular — beschriftete Eingabefelder, eine Absenden-Schaltfläche, echtes Tastatur- und Screenreader-Verhalten — zuerst nackt, dann gestaltet, in etwa 10 Minuten.

Bevor du anfängst

Du brauchst einen Browser und einen Texteditor. Das ist alles. (git hilft beim Holen der Komponentendateien, aber du kannst sie auch im Browser von GitHub kopieren.)

Schritt 1 — Den Code holen

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

Jede Komponente ist eine eigenständige Datei in components/ — button.html, text-input.htmlund so weiter — mit einem Kopfkommentar, der ihr HTML-Tag, den Klassen-Hook, das Tastaturverhalten und den Barrierefreiheitsvertrag dokumentiert. Die Dateien sind die Bibliothek — kopiere, was du brauchst, und leg los.

Schritt 2 — Deine erste Komponente

Öffne components/button.html, oder schreib einfach das Markup — der Klassen-Hook ist der Vertrag:

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

Weil es ein echtes <button>ist, stimmen Tastaturfokus, Aktivierung mit Enter und Leertaste und die implizite Button-Rolle bereits.

Schritt 3 — Ein kleines Formular zusammensetzen

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

Beachte das Muster: Jedes Bedienelement verknüpft sein <label for>, nutzt den spezifischsten Input-Typ und trägt genau einen Klassen-Hook in Kebab-Case.

Prüfe deine Arbeit: öffne die Seite in einem Browser. Sie sieht schlicht aus — genau wie beabsichtigt: Die Gestaltung kommt noch. Drücke Tab: Der Fokus wandert durch jedes Bedienelement, die Labels werden angesagt und das Absenden funktioniert. Das Verhalten ist fertig; das Aussehen gehört dir und kommt als Nächstes.

Schritt 4 — Gestalten

Schreibe CSS gegen die 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 spar dir das Handschreiben von CSS ganz — binde eines der 45 fertigen Themes ein, und dasselbe Markup leuchtet auf:

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

Schritt 5 — Weiter erkunden

Die Tests des Repos laufen in echten Browsern: pnpm install && pnpm test (WebDriverIO).
Storybook für jede Komponente: pnpm run storybook.
HTML+CSS+JS-Beispiel-App zeigt alle 571 Komponenten gestaltet, durchsuchbar und vorgeführt.

Nächste Schritte

Theming — Theme-Umschaltung zur Laufzeit mit theme-picker.
Einstellungs-Helper — Sprache und Textgröße.
Komponentenkatalog — die vollständige Referenz.

Fragen unterwegs? Die Hilfeseite steckt voller Antworten — und wenn ein Schritt klarer sein könnte, sag es uns und wir verbessern das Tutorial gern.