Ang kaso para sa Lily
Ibinibigay sa iyo ng Lily ang mahihirap na bahagi — semantics, accessibility, gawi ng keyboard, internationalization — at iniiwan ang hitsura nang buo, masaya, sa iyo.
Magsimula sa iyong disenyo
Alam na ng iyong koponan kung paano dapat magmukha ang produkto mo. Doon mismo nagsisimula ang Lily: ibinibigay nito ang mga bahaging talagang mahirap gawin nang tama at magastos ulitin — ang tamang semantic element, mga state ng ARIA, kontrata ng keyboard, pamamahala ng focus — at iniiwan ang bawat visual na desisyon nang buo, masaya, sa iyo. Ang iyong CSS ang hitsura ng design system, mula sa unang araw.
Dahil bawat component ay may matatag na class hook at purong istruktura, nananatiling malinaw na sa iyo ang iyong istilo sa bawat upgrade — at patuloy na gumagana ang accessibility sa ilalim nito, bersyon pagkatapos ng bersyon.
Ang ipinangangako ng Lily
- Accessible bilang default. Ang WCAG 2.2 AAA ang target para sa bawat component. Sumusunod ang mga pattern sa WAI-ARIA Authoring Practices; ang bawat interactive na component ay magagamit gamit ang keyboard na may dokumentadong kontrata; pinapanatili ng mga halimbawang app ang malinis na axe-core baseline.
-
Maaaring i-internationalize sa disenyo. Ang bawat string na nakikita ng user — bawat label, error, at anunsyo — ay prop na may matatag na pangalan sa lahat ng framework, kaya natural na dumadaloy ang pagsasalin. Namamana ang RTL at bidirectional na teksto mula sa iyong
dir. Tinatanggap ng mga component na nakakaalam ng locale ang locale bilang prop, palaging tahasan. - Isang catalog, walong framework. Ang parehong 571 component (536 bilang native na Web Components) na may parehong class hook at kombensyon ng prop sa HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, at Web Components. Nalilipat ang iyong CSS at kaalaman ng koponan sa iba't ibang stack.
- Walang pinapanigan na estratehiya sa CSS. Isang matatag na kebab-case na klase sa bawat ugat ng component. Semantic CSS, mga utility ng Tailwind, CSS-in-JS, o isa sa 57 handa nang tema — tinatanggap sila lahat ng Lily at maayos na umiiwas sa daan.
- Libre, magpakailanman, sa iyong mga tuntunin. Open source sa ilalim ng pinili mong BSD, MIT, Apache-2.0, GPL-2.0, o GPL-3.0. Walang pro tier, walang seat license, walang telemetry.
Lalim kung saan mahalaga
Higit sa karaniwang mga button at dialog, mas malayo ang abot ng catalog kaysa sa karamihan:
- Mga pattern ng pampublikong sektor na sinaliksik mula sa mga design system ng NHS UK, GOV.UK, USWDS, at ONS — mga buod ng error, babalang callout, buod na listahan, phase banner, skip link.
- 140 component ng pambansang personal na identifier na sumasaklaw sa mga identifier para sa kalusugan, pambansang ID, buwis, at pasaporte sa mahigit 50 bansa, na bawat isa ay nagdodokumento ng format at algorithm ng pagpapatunay nito.
- Mga editorial at scrollytelling na primitive na hinango mula sa Reuters Graphics — mga layout ng artikulo, scroller, timeline, tile map.
-
Mga picker helper — maliliit na package na may-ari ng isang interaksyon mula simula hanggang wakas: pagpapalit ng tema (na may runtime na paglo-load ng stylesheet), wika, laki ng teksto, nabawasang galaw, paghahanap, mga link ng pahina, pagbabahagi, at pagpasok ng petsa-oras. Bawat isa ay headless na icon button na nagbubukas ng popup — hindi native na
<select>— na may built-in na persistence at kaligtasan sa SSR.
Mga tema para sa pampublikong sektor, handa na agad
May kasamang 57 standalone na reference na tema ang Lily na direktang tumututok sa mga class hook nito: NHS England, NHS Scotland, at NHS Wales (bawat isa sa mga variant para sa pasyente at practitioner), GOV.UK, USWDS, mga palette na inspirasyon ng Adobe Spectrum at Mozilla Protocol, at isang hanay ng pangkalahatang liwanag at madilim na tema. Mag-link ng isang stylesheet at gumagana na ang hitsurang pang-gobyerno; ang theme-picker helper ang magpapalit sa mga ito sa runtime.
Paano naghahambing ang Lily
Nag-iingat kami ng tapat, component-by-component paghahambing laban sa ibang design system — may istilo at headless, komersyal at pampublikong sektor. Kung mas angkop sa iyo ang ibang library, ipapakita iyon ng paghahambing; natututo ang Lily sa kanilang lahat at hayagang binabanggit ang mga inspirasyon nito.
Sino ang nasa likod nito
Ang Lily ay isang batang, independiyenteng open-source na proyekto na malugod na tumatanggap ng pakikipagtulungan, gabay, at puna — tingnan ang Tungkol para sa kuwento at mga inspirasyon. Lahat — ang espesipikasyon, ang mga pagsusuri, ang roadmap, pati ang audit tooling — ay bukas sa github.com/LilyDesignSystem.
Tulungan ang Lily na lumago
Kung kapaki-pakinabang sa iyo ang Lily, ito ang pinakamahahalagang magagawa mo:
- Mag-star at magbahagi. Mag-star sa pangunahing repo at ipakita sa isang katrabaho ang catalog — ang kamalayan ang pinakakulang na yaman ng isang batang proyekto.
- Gumawa ng isang bagay at sabihin sa amin. Ang mga ulat ng totoong paggamit — ano ang gumana, ano ang mas gagaan — ang humuhubog sa roadmap higit sa anupaman.
- Mag-audit ng accessibility. Ang mga screen-reader pass (VoiceOver, NVDA, JAWS) sa mga halimbawang app ay ginto; i-file ang iyong natuklasan.
- Mag-ambag ng tema o pagsasalin. Parehong self-contained at mahusay ang saklaw na unang kontribusyon.
- Ibahagi ang natuklasan mo, na may minimal na reproduction, sa GitHub repository, o mag-email sa joel@joelparkerhenderson.com.