Apakah Lily?

Versi ringkas

Lily ialah katalog komponen web, setiap satu dilaksanakan dalam lapan rasa tanpa kepala (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks dan Web Components) serta satu set aplikasi contoh lengkap yang menunjukkan cara menggayakannya.

Versi tanpa kepala disertakan dengan sifar CSS. Ia memberi anda HTML semantik, peranan dan keadaan ARIA, sokongan papan kekunci dan prop yang mesra i18n. Anda membawa reka bentuk visual.

Prinsip reka bentuk

Mudah diakses

Setiap komponen bermula daripada HTML semantik. ARIA hanya ditambah di mana HTML sahaja tidak dapat menyatakan coraknya. Komponen menyasarkan WCAG 2.2 AAA — warna, jarak, fokus dan navigasi papan kekunci semuanya dipertimbangkan.

Boleh digubah

Lily mengutamakan komponen kecil berfungsi tunggal yang bercantum dengan mudah. Corak majmuk muncul berulang kali:

• Nav → List → ListItem — untuk breadcrumb, senarai kandungan, menu akordion, menu pokok dan penomboran halaman
• Form → Field → Input — untuk sebarang susun atur borang dengan label, petunjuk dan ralat
• Table → Head/Body/Foot → Row → Data — untuk jadual, kalendar, carta Gantt dan papan kanban
• Bar → BarButton — untuk bar alat, bar tab, bar tugas, bar tindakan dan bar menu
• Picker → PickerButton — untuk pemilih warna, pemilih penilaian, pemilih tema

Boleh diantarabangsakan

Tiada satu pun rentetan yang dilihat pengguna dikodkan keras. Label, pemegang tempat, mesej ralat, teks butang — semuanya parameter. Masukkan sistem terjemahan anda sendiri dan Lily bertutur dalam apa jua bahasa yang anda gunakan.

Tanpa kepala

Komponen tanpa kepala tidak mempunyai CSS, tiada <style> blok, dan tiada token reka bentuk yang tidak anda pilih. Ia mendedahkan satu nama kelas kebab-case pada setiap elemen akar supaya anda boleh menyasarkannya sesuka hati — CSS semantik, Tailwind, CSS-in-JS, pilihan anda.

Contoh lengkap

Aplikasi contoh menunjukkan cara menggayakan komponen untuk kegunaan sebenar — token reka bentuk apa yang perlu ditetapkan, variasi apa yang perlu ditambah, cara menggubah halaman. Ia ialah aplikasi SvelteKit, Next.js, Nuxt, Blazor dan Eleventy sepenuhnya, bukan sekadar kotak pasir.

Inspirasi

Lily mengambil corak dan bahasa daripada set sistem reka bentuk yang sengaja dipilih secara luas:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Kerajaan Australia)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Komponen grafik Reuters

Lesen

Lily berlesen berbilang di bawah BSD, MIT, Apache-2.0, GPL-2.0 atau GPL-3.0. Pilih lesen yang sesuai untuk projek anda. Jika tiada yang sesuai, hubungi kami.

Hubungi

Ketua projek: Joel Parker Henderson — joel@joelparkerhenderson.com.

Terjumpa pepijat, ada idea, mahu menyumbang komponen? Buka isu atau permintaan tarik di GitHub.