Lily Design System™

Tutorial HTML

Wiwitan sing paling prasaja: salin HTML semantik nganggo pancingan kelas Lily, tambahna siji lembar gaya, terbitna. Berkas prasaja sing mlaku ing ngendi wae HTML mlaku.

Apa sing bakal sampeyan gawé

Formulir kontak cilik — kolom nganggo label, siji tombol kirim, prilaku keyboard lan pamaca layar sing nyata — dhisik polosan, banjur ditata, kira-kira 10 menit.

Sadurunge miwiti

Sampeyan butuh browser lan editor teks. Mung iku. (git mbiyantu njupuk berkas komponen, nanging sampeyan uga bisa nyalin saka GitHub ing browser.)

Langkah 1 — Njupuk kode

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

Saben komponen iku berkas mandiri ing components/ — button.html, text-input.htmllan sapiturute — kanthi komentar header sing nyathet tag HTML-é, pancingan kelas, prilaku keyboard lan kontrak aksesibilitas. Berkas iku pustaka — salinen sing dibutuhaké lan mangkat.

Langkah 2 — Komponen pisanan sampeyan

Bukak components/button.html, utawa mung tulis markup — pancingan kelas iku kontrak:

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

Amarga iku <button>nyata, fokus keyboard, aktivasi nganggo Enter lan Space, lan peran tombol implisit wis bener.

Langkah 3 — Nyusun formulir cilik

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

Gatèkna polané: saben kontrol nyambungaké <label for>dhéwé, nganggo jinis input sing paling spesifik lan nggawa persis siji pancingan kelas kebab-case.

Priksa pagawéan sampeyan: bukak kaca ing browser. Katon polosan — persis kaya sing dikarepaké: penataan isih ing ngarep. Pencet Tab: fokus mlaku liwat saben kontrol, label diumumaké lan kirim mlaku. Prilaku wis rampung; tampilan iku duwèkmu lan dadi langkah sabanjuré.

Langkah 4 — Tata

Tulis CSS nglawan pancingan:

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

Utawa lompati nulis CSS kanthi tangan babar pisan — sambungna siji saka 45 tema sing wis siap lan markup sing padha urub: 

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

Langkah 5 — Jelajahi luwih adoh

  • Tes repositori mlaku ing browser nyata: pnpm install && pnpm test (WebDriverIO).
  • Storybook kanggo saben komponen: pnpm run storybook.
  • Aplikasi conto HTML+CSS+JS nampilaké kabèh 571 komponen kanthi gaya, bisa digoleki lan didemonstrasiaké.

Langkah sabanjuré

Ana pitakon ing dalan? Kaca pitulung kebak wangsulan — lan menawa ana langkah sing bisa luwih cetha, kandhanana kita lan kita bakal seneng nyaosi tutorial luwih apik.