Apa kuwi Lily?

Ringkesané

Lily kuwi katalog komponèn web, saben siji diwujudaké ing wolung varian tanpa sirah (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks lan Web Components), ditambah sakumpulan aplikasi conto lengkap sing nuduhaké carané menehi gaya.

Versi tanpa sirah teka kanthi nol CSS. Kuwi menehi sampéyan HTML semantik, peran lan kahanan ARIA, dhukungan keyboard, lan properti sing ramah internasionalisasi. Desain visual sampéyan sing nggawa.

Prinsip desain

Bisa diaksès

Saben komponèn diwiwiti saka HTML semantik. ARIA mung ditambahaké ing ngendi HTML piyambak ora bisa mratélakaké pola. Komponèn ngarah menyang WCAG 2.2 AAA — warna, jarak, fokus, lan navigasi keyboard kabèh dipikirake.

Bisa dirakit

Lily luwih seneng komponèn cilik kanthi tujuan siji sing bisa dicantélaké. Pola gabungan muncul bola-bali:

• Nav → List → ListItem — kanggo breadcrumb, dhaptar isi, menu akordion, menu wit, lan paginasi
• Form → Field → Input — kanggo tata letak formulir apa waé kanthi labèl, pitunjuk, lan kesalahan
• Table → Head/Body/Foot → Row → Data — kanggo tabel, kalèndhèr, bagan Gantt, lan papan kanban
• Bar → BarButton — kanggo bar piranti, bar tab, bar tugas, bar aksi, lan bar menu
• Picker → PickerButton — kanggo pamilih warna, pamilih rating, pamilih tema

Bisa diinternasionalisasi

Ora ana siji waé string sing katon pangguna sing ditulis permanèn ing kode. Labèl, placeholder, pesen kesalahan, tèks tombol — kabèh iku parameter. Sambungna sistem terjemahan dhéwé lan Lily nganggo basa apa waé sing sampéyan gunakaké.

Tanpa sirah

Komponèn tanpa sirah duwé ora ana CSS, ora ana blok <style> , ora ana token desain sing ora sampéyan pilih. Kuwi mbukak siji jeneng kelas kebab-case ing saben elemèn oyod supaya sampéyan bisa nargetaké kaya sing dikarepaké — CSS semantik, Tailwind, CSS-in-JS, sampéyan sing mutusaké.

Conto lengkap

Aplikasi conto nuduhaké carané menehi gaya komponèn kanggo panggunaan nyata — token desain apa sing disetèl, varian apa sing ditambahaké, carané nyusun kaca. Kuwi aplikasi SvelteKit, Next.js, Nuxt, Blazor, lan Eleventy lengkap, dudu mung kothak pasir.

Sumber inspirasi

Lily njupuk pola lan basa saka sakumpulan sistem desain sing sengaja dipilih jembar:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

Lisènsi

Lily duwé pirang-pirang lisènsi ing sangisoré BSD, MIT, Apache-2.0, GPL-2.0, utawa GPL-3.0. Pilih sing cocog karo proyèk sampéyan. Yèn ora ana sing cocog, hubungi kita.

Kontak

Pimpinan proyèk: Joel Parker Henderson — joel@joelparkerhenderson.com.

Nemu bug, duwé gagasan, péngin nyumbang komponèn? Bukak issue utawa pull request ing GitHub.