Ano ang Lily?

Maikling bersyon

Ang Lily ay isang catalog ng mga web component, na bawat isa ay ipinatupad sa walong headless na bersyon (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, at Web Components) kasama ang isang hanay ng kumpletong halimbawang app na nagpapakita kung paano ito bibigyan ng istilo.

Ang mga headless na bersyon ay may zero CSS. Binibigyan ka nila ng semantic HTML, mga role at state ng ARIA, suporta sa keyboard, at mga prop na akma sa i18n. Ikaw ang magdadala ng visual na disenyo.

Mga prinsipyo ng disenyo

Accessible

Nagsisimula ang bawat component sa semantic HTML. Idinaragdag lamang ang ARIA kung saan hindi kayang ipahayag ng HTML lamang ang pattern. Tinututukan ng mga component ang WCAG 2.2 AAA — isinasaalang-alang ang mga kulay, espasyo, focus, at pag-navigate gamit ang keyboard.

Composable

Mas gusto ng Lily ang maliliit na component na iisa ang gamit na madaling pagsamahin. Paulit-ulit na lumilitaw ang mga compound na pattern:

• Nav → List → ListItem — para sa breadcrumbs, mga listahan ng nilalaman, accordion menu, tree menu, at pagination
• Form → Field → Input — para sa anumang layout ng form na may mga label, hint, at error
• Table → Head/Body/Foot → Row → Data — para sa mga talahanayan, kalendaryo, gantt chart, at kanban board
• Bar → BarButton — para sa mga tool bar, tab bar, task bar, action bar, at menu bar
• Picker → PickerButton — para sa mga color picker, rating picker, theme picker

Maaaring i-internationalize

Walang isa mang string na nakikita ng user ang naka-hardcode. Mga label, placeholder, mensahe ng error, teksto ng button — lahat ay mga parameter. Ilagay ang sarili mong sistema ng pagsasalin at magsasalita ang Lily ng anumang wikang sinasalita mo.

Headless

Ang mga headless na component ay walang CSS, walang <style> block, at walang design token na hindi mo pinili. Naglalantad sila ng isang kebab-case na pangalan ng klase sa bawat root element upang maitutok mo sila sa anumang paraang gusto mo — semantic CSS, Tailwind, CSS-in-JS, ikaw ang bahala.

Kumpletong mga halimbawa

Ipinapakita ng mga halimbawang app kung paano bigyan ng istilo ang mga component para sa tunay na paggamit — anong mga design token ang itatakda, anong mga variation ang idaragdag, paano buuin ang mga pahina. Mga ganap na SvelteKit, Next.js, Nuxt, Blazor, at Eleventy app ang mga ito, hindi lang mga sandbox.

Mga inspirasyon

Kumukuha ang Lily ng mga pattern at wika mula sa sadyang malawak na hanay ng mga design system:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Pamahalaan ng Australia)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Mga graphics component ng Reuters

Lisensya

Ang Lily ay may maraming lisensya sa ilalim ng BSD, MIT, Apache-2.0, GPL-2.0, o GPL-3.0. Piliin ang lisensyang akma sa proyekto mo. Kung wala sa mga ito ang gumagana, makipag-ugnayan sa amin.

Makipag-ugnayan

Namumuno sa proyekto: Joel Parker Henderson — joel@joelparkerhenderson.com.

May nakitang bug, may ideya, gustong mag-ambag ng component? Magbukas ng issue o pull request sa GitHub.