HTML-kennsluefni — Lily Design System

Það sem þú munt byggja

Lítið tengiliðaeyðublað — innsláttarreitir með merkimiðum, sendihnappur, raunveruleg lyklaborðs- og skjálesarahegðun — fyrst ber, svo stílað, á um 10 mínútum.

Áður en þú byrjar

Þú þarft vafra og textaritil. Það er allt. (git hjálpar til við að ná í íhlutaskrárnar, en þú getur líka afritað þær af GitHub í vafranum.)

Skref 1 — Náðu í kóðann

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

Hver íhlutur er sjálfstæð skrá í components/ — button.html, text-input.htmlog svo framvegis — með haushugleiðingu sem skjalfestir HTML-merki, klasakrók, lyklaborðshegðun og aðgengissamning. Skrárnar eru safnið — afritaðu það sem þú þarft og farðu af stað.

Skref 2 — Fyrsti íhluturinn þinn

Opnaðu components/button.html, eða skrifaðu bara markupið — klasakrókurinn er samningurinn:

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

Þar sem þetta er raunverulegur <button>eru lyklaborðsfókus, virkjun með Enter og Space og undirliggjandi hnappahlutverk þegar rétt.

Skref 3 — Settu saman lítið eyðublað

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

Taktu eftir mynstrinu: hver stýring tengir sinn <label for>, notar sértækustu innsláttartegundina og ber nákvæmlega einn kebab-case klasakrók.

Athugaðu verkið: opnaðu síðuna í vafra. Hún lítur einföld út — nákvæmlega eins og ætlað er: stíllinn er enn framundan. Ýttu á Tab: fókusinn færist í gegnum hverja stýringu, merkimiðar eru lesnir upp og sending virkar. Hegðunin er tilbúin; útlitið er þitt og er næst.

Skref 4 — Stílaðu það

Skrifaðu CSS gegn krókunum:

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

Eða slepptu handskrifuðu CSS alveg — tengdu eitt af 45 tilbúnu þemunum og sama markup lifnar við:

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

Skref 5 — Kannaðu frekar

Próf geymslunnar keyra í raunverulegum vöfrum: pnpm install && pnpm test (WebDriverIO).
Storybook fyrir hvern íhlut: pnpm run storybook.
HTML+CSS+JS dæmaforritið sýnir alla 571 íhlutina stílaða, leitarhæfa og sýnda.

Næstu skref

Þemu — skipti á þema á keyrslutíma með theme-picker.
Stillingahjálpartæki — tungumál og textastærð.
Íhlutasafn — full viðmiðun.

Spurningar á leiðinni? hjálparsíðan er full af svörum — og ef skref gæti verið skýrara, segðu okkur og við bætum kennsluefnið með ánægju.