Lily Design System™

Apa itu Lily?

Sistem desain gratis, sumber terbuka, dan mengutamakan aksesibilitas yang menemui Anda di tempat Anda menulis kode — dan menyingkir saat Anda tidak membutuhkannya.

Versi singkat

Lily adalah katalog komponen web, masing-masing diimplementasikan dalam delapan varian headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, dan Web Components), ditambah sekumpulan aplikasi contoh lengkap yang menunjukkan cara menatanya.

Versi headless tidak menyertakan CSS sama sekali. Versi ini memberi Anda HTML semantik, peran dan status ARIA, dukungan papan ketik, dan properti yang ramah internasionalisasi. Anda membawa desain visualnya.

Prinsip desain

Aksesibel

Setiap komponen berawal dari HTML semantik. ARIA hanya ditambahkan di tempat HTML saja tidak dapat mengungkapkan polanya. Komponen menargetkan WCAG 2.2 AAA — warna, jarak, fokus, dan navigasi papan ketik semuanya dipertimbangkan.

Dapat dikomposisi

Lily mengutamakan komponen kecil berfungsi tunggal yang saling menyambung. Pola gabungan muncul berulang kali:

  • Nav → List → ListItem — untuk breadcrumb, daftar isi, menu akordeon, menu pohon, dan penomoran halaman
  • Form → Field → Input — untuk tata letak formulir apa pun dengan label, petunjuk, dan galat
  • Table → Head/Body/Foot → Row → Data — untuk tabel, kalender, bagan Gantt, dan papan kanban
  • Bar → BarButton — untuk bilah alat, bilah tab, bilah tugas, bilah aksi, dan bilah menu
  • Picker → PickerButton — untuk pemilih warna, pemilih penilaian, dan pemilih tema

Dapat diinternasionalisasi

Tak satu pun teks yang tampil bagi pengguna ditulis langsung di dalam kode. Label, teks placeholder, pesan galat, teks tombol — semuanya parameter. Pasang sistem terjemahan Anda sendiri dan Lily berbicara dalam bahasa apa pun yang Anda gunakan.

Headless

Komponen headless tidak memiliki CSS, tidak ada blok <style>, tidak ada token desain yang tidak Anda pilih. Komponen ini mengekspos satu nama kelas kebab-case pada setiap elemen akar sehingga Anda dapat menargetnya sesuka Anda — CSS semantik, Tailwind, CSS-in-JS, terserah Anda.

Contoh lengkap

Aplikasi contoh menunjukkan cara menata komponen untuk penggunaan nyata — token desain apa yang diatur, variasi apa yang ditambahkan, cara menyusun halaman. Semuanya aplikasi SvelteKit, Next.js, Nuxt, Blazor, dan Eleventy yang utuh, bukan sekadar tempat uji coba.

Inspirasi

Lily mengambil pola dan bahasa dari sekumpulan sistem desain yang sengaja dipilih beragam:

Lisensi

Lily berlisensi ganda di bawah BSD, MIT, Apache-2.0, GPL-2.0, atau GPL-3.0. Pilih lisensi yang cocok untuk proyek Anda. Jika tak satu pun cocok, hubungi kami.

Kontak

Pemimpin proyek: Joel Parker Henderson — joel@joelparkerhenderson.com.

Menemukan bug, punya ide, ingin menyumbangkan komponen? Buka isu atau pull request di GitHub.

Status: Lily adalah karya yang masih baru dan kami menyambut kolaborasi, bimbingan, dan masukan. Banyak hal akan bergerak dan berkembang.