HTML-veiledning — Lily Design System

Hva du skal bygge

Et lite kontaktskjema — inndatafelt med etiketter, en send-knapp, ekte tastatur- og skjermleseroppførsel — først bart, så stilet, på omtrent 10 minutter.

Før du begynner

Du trenger en nettleser og et tekstredigeringsprogram. Det er alt. (git hjelper med å hente komponentfilene, men du kan også kopiere dem fra GitHub i nettleseren.)

Steg 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 frittstående fil i components/ — button.html, text-input.html, og så videre — med en toppkommentar som dokumenterer HTML-taggen, klassekroken, tastaturoppførselen og tilgjengelighetskontrakten. Filene er biblioteket — kopier det du trenger og kom i gang.

Steg 2 — Din første komponent

Åpne components/button.html, eller bare skriv markupen — klassekroken er kontrakten:

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

Fordi det er en ekte <button>, er tastaturfokus, Enter- og Space-aktivering og den implisitte knapperollen allerede riktige.

Steg 3 — Sett sammen et lite skjema

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

Legg merke til mønsteret: hver kontroll knytter sin <label for>, bruker den mest spesifikke inndatatypen og bærer nøyaktig én kebab-case-klassekrok.

Sjekk arbeidet ditt: åpne siden i en nettleser. Den ser enkel ut — akkurat som tiltenkt: stilingen ligger fortsatt foran. Trykk Tab: fokus beveger seg gjennom hver kontroll, etikettene kunngjøres og innsending fungerer. Oppførselen er ferdig; utseendet er ditt og er neste.

Steg 4 — Stil det

Skriv CSS mot krokene:

.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 hopp over håndskrevet CSS helt — lenk til ett av de 45 ferdige temaene, så lyser den samme markupen opp:

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

Steg 5 — Utforsk videre

Repoets tester kjører i ekte nettlesere: pnpm install && pnpm test (WebDriverIO).
Storybook for hver komponent: pnpm run storybook.
HTML+CSS+JS-eksempelappen viser alle 571 komponentene stilet, søkbare og demonstrert.

Neste steg

Tema — temabytte ved kjøretid med theme-picker.
Preferansehjelpere — språk og tekststørrelse.
Komponentkatalog — hele referansen.

Spørsmål underveis? hjelpesiden er full av svar — og hvis et steg kan bli tydeligere, fortell oss så forbedrer vi gjerne veiledningen.