Lily Design System™

HTML-vejledning

Den enklest tænkelige start: kopiér semantisk HTML med Lilys klassekroge, tilføj ét typografiark, udgiv. Almindelige filer, der virker overalt, hvor HTML virker.

Det her bygger du

En lille kontaktformular — felter med etiketter, en send-knap, ægte tastatur- og skærmlæseradfærd — først nøgen, derefter formgivet, på omkring 10 minutter.

Før du går i gang

Du skal bruge en browser og en teksteditor. Det er alt. (git hjælper med at hente komponentfilerne, men du kan også kopiere dem fra GitHub i browseren.)

Trin 1 — Hent koden

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

Hver komponent er en selvstændig fil i components/ — button.html, text-input.html, og så videre — med en hovedkommentar, der dokumenterer dens HTML-tag, klassekrog, tastaturadfærd og tilgængelighedskontrakt. Filerne er biblioteket — kopiér det, du har brug for, og kør.

Trin 2 — Din første komponent

Åbn components/button.html, eller skriv bare markuppen — klassekrogen er kontrakten:

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

Fordi det er en ægte <button>er tastaturfokus, aktivering med Enter og Mellemrum og den implicitte knaprolle allerede korrekte.

Trin 3 — Sæt en lille formular sammen

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

Læg mærke til mønsteret: hver kontrol knytter sin <label for>, bruger den mest specifikke input-type og bærer præcis én klassekrog i kebab-case.

Tjek dit arbejde: åbn siden i en browser. Den ser nøgen ud — præcis som tilsigtet: formgivningen kommer endnu. Tryk på Tab: fokus flytter sig gennem hver kontrol, etiketterne oplæses, og afsendelse virker. Adfærden er færdig; udseendet er dit og er næste skridt.

Trin 4 — Giv den stil

Skriv CSS mod krogene:

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

Eller spring håndskrevet CSS helt over — link et af de 45 færdige temaer, og den samme markup lyser op: 

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

Trin 5 — Udforsk videre

  • Repoets tests kører i rigtige browsere: pnpm install && pnpm test (WebDriverIO).
  • Storybook for hver komponent: pnpm run storybook.
  • HTML+CSS+JS eksempelapp viser alle 571 komponenter formgivet, søgbare og demonstreret.

Næste skridt

Spørgsmål undervejs? Siden Hjælp er fuld af svar — og hvis et trin kan blive tydeligere, så fortæl os det og vi forbedrer gerne vejledningen.