Lily Design System™

Tutorial HTML

Awal paling sederhana: salin HTML semantik dengan kait kelas Lily, tambahkan satu lembar gaya, terbitkan. Berkas biasa yang bekerja di mana pun HTML bekerja.

Apa yang akan Anda bangun

Formulir kontak kecil — kolom berlabel, tombol kirim, perilaku papan ketik dan pembaca layar yang nyata — pertama polos, lalu bergaya, dalam sekitar 10 menit.

Sebelum memulai

Anda memerlukan peramban dan penyunting teks. Itu saja. (git membantu mengambil berkas komponen, tetapi Anda juga dapat menyalinnya dari GitHub di peramban.)

Langkah 1 — Dapatkan kodenya

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

Setiap komponen adalah berkas mandiri di components/ — button.html, text-input.htmldan seterusnya — dengan komentar header yang mendokumentasikan tag HTML, kait kelas, perilaku papan ketik, dan kontrak aksesibilitasnya. Berkas adalah pustakanya — salin yang Anda perlukan dan berangkat.

Langkah 2 — Komponen pertama Anda

Buka components/button.html, atau cukup tulis markup-nya — kait kelas adalah kontraknya:

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

Karena ini adalah <button>sungguhan, fokus papan ketik, aktivasi dengan Enter dan Space, dan peran tombol implisit sudah benar.

Langkah 3 — Susun formulir kecil

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

Perhatikan polanya: setiap kontrol menautkan <label for>miliknya, menggunakan tipe input yang paling spesifik, dan membawa tepat satu kait kelas kebab-case.

Periksa pekerjaan Anda: buka halaman di peramban. Tampak polos — persis seperti yang dimaksudkan: penataan gaya masih akan datang. Tekan Tab: fokus berpindah melalui setiap kontrol, label diumumkan, dan pengiriman berfungsi. Perilakunya selesai; tampilan adalah milik Anda dan menjadi langkah berikutnya.

Langkah 4 — Beri gaya

Tulis CSS terhadap kait:

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

Atau lewati sama sekali penulisan CSS secara manual — tautkan salah satu dari 45 tema siap pakai dan markup yang sama menyala: 

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

Langkah 5 — Jelajahi lebih jauh

  • Pengujian repositori berjalan di peramban sungguhan: pnpm install && pnpm test (WebDriverIO).
  • Storybook untuk setiap komponen: pnpm run storybook.
  • Aplikasi contoh HTML+CSS+JS menampilkan semua 571 komponen yang bergaya, dapat dicari, dan didemonstrasikan.

Langkah berikutnya

Ada pertanyaan di tengah jalan? Halaman bantuan penuh jawaban — dan jika suatu langkah bisa lebih jelas, beri tahu kami dan kami dengan senang hati akan memperbaiki tutorial ini.