Vodnik za HTML — Lily Design System

Kaj boste ustvarili

Majhen kontaktni obrazec — polja z oznakami, gumb za pošiljanje, resnično vedenje tipkovnice in bralnika zaslona — najprej gol, nato oblikovan, v približno 10 minutah.

Preden začnete

Potrebujete brskalnik in urejevalnik besedila. To je vse. (git pomaga pri pridobivanju datotek komponent, lahko pa jih kopirate tudi z GitHuba v brskalniku.)

Korak 1 — Pridobite kodo

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

Vsaka komponenta je samostojna datoteka v components/ — button.html, text-input.htmlin tako naprej — z glavo-komentarjem, ki dokumentira njeno oznako HTML, razredni kavelj, vedenje tipkovnice in pogodbo o dostopnosti. Datoteke so knjižnica — kopirajte, kar potrebujete, in naprej.

Korak 2 — Vaša prva komponenta

Odprite components/button.htmlali preprosto napišite označevanje — razredni kavelj je pogodba:

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

Ker je to pravi <button>, so fokus tipkovnice, aktivacija s tipkama Enter in preslednica ter implicitna vloga gumba že pravilni.

Korak 3 — Sestavite majhen obrazec

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

Opazite vzorec: vsak kontrolnik poveže svoj <label for>, uporabi najbolj specifičen tip vnosa in nosi natanko en razredni kavelj v kebab-case.

Preverite svoje delo: odprite stran v brskalniku. Videti je gola — natanko kot je bilo načrtovano: oblikovanje šele sledi. Pritisnite Tab: fokus gre skozi vsak kontrolnik, oznake se izgovorijo in pošiljanje deluje. Vedenje je končano; videz je vaš in je naslednji korak.

Korak 4 — Oblikujte ga

Napišite CSS proti kavljem:

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

Ali pa ročno pisanje CSS povsem preskočite — povežite eno od 45 pripravljenih tem in isto označevanje zasveti:

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

Korak 5 — Raziščite dlje

Testi repozitorija tečejo v pravih brskalnikih: pnpm install && pnpm test (WebDriverIO).
Storybook za vsako komponento: pnpm run storybook.
Vzorčna aplikacija HTML+CSS+JS prikazuje vseh 571 komponent oblikovanih, z iskanjem in predstavljenih.

Naslednji koraki

Teme — preklapljanje teme med izvajanjem s theme-picker.
Pomočniki za nastavitve — jezik in velikost besedila.
Katalog komponent — popolna referenca.

Vprašanja na poti? Stran s pomočjo je polna odgovorov — in če bi bil kakšen korak lahko jasnejši, sporočite nam in vodnik bomo z veseljem izboljšali.