Lily Design System™

Lily ni nini?

Mfumo wa usanifu huria, wa chanzo wazi, unaoweka ufikivu mbele, unaokutana nawe mahali unapoandika msimbo — na kukupisha njia unapokuwa huuhitaji.

Muhtasari mfupi

Lily ni orodha ya vipengele vya wavuti, kila kimoja kikitekelezwa kwa namna nane zisizo na mwonekano (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, na Web Components) pamoja na programu za mifano zilizokamilika zinazoonyesha jinsi ya kuvipamba.

Matoleo yasiyo na mwonekano hayana CSS yoyote. Yanakupa HTML ya kisemantiki, majukumu na hali za ARIA, usaidizi wa kibodi, na sifa zinazofaa lugha nyingi. Wewe unaleta muundo wa kuona.

Kanuni za usanifu

Inayofikika

Kila kipengele huanza kutoka HTML ya kisemantiki. ARIA huongezwa tu pale HTML pekee haiwezi kueleza mchoro husika. Vipengele vinalenga WCAG 2.2 AAA — rangi, nafasi, kielekezi cha umakini, na usogezaji kwa kibodi vyote huzingatiwa.

Vinavyoweza kuunganishwa

Lily hupendelea vipengele vidogo vyenye kusudi moja vinavyoungana. Michoro ya mchanganyiko hujirudia mara nyingi:

  • Nav → List → ListItem — kwa njia za mkate, orodha za yaliyomo, menyu za akodioni, menyu za mti, na kurasa
  • Form → Field → Input — kwa mpangilio wowote wa fomu wenye lebo, vidokezo, na makosa
  • Table → Head/Body/Foot → Row → Data — kwa majedwali, kalenda, chati za Gantt, na mbao za kanban
  • Bar → BarButton — kwa pau za zana, pau za vichupo, pau za kazi, pau za vitendo, na pau za menyu
  • Picker → PickerButton — kwa vichaguzi vya rangi, vichaguzi vya ukadiriaji, vichaguzi vya mandhari

Vinavyoweza kutafsiriwa

Hakuna maandishi hata moja ya mtumiaji yaliyowekwa moja kwa moja kwenye msimbo. Lebo, vishikilia nafasi, ujumbe wa makosa, maandishi ya vitufe — vyote ni vigezo. Weka mfumo wako wa tafsiri na Lily huzungumza lugha yoyote unayozungumza.

Bila mwonekano

Vipengele visivyo na mwonekano havina CSS, hakuna vizuizi vya <style>, hakuna tokeni za usanifu ambazo hukuzichagua. Vinaonyesha jina moja la darasa la herufi ndogo zilizotenganishwa kwa kistari kwenye kila kipengele cha mzizi ili uweze kuvilenga upendavyo — CSS ya kisemantiki, Tailwind, CSS-in-JS, uamuzi wako.

Mifano iliyokamilika

Programu za mifano zinaonyesha jinsi ya kupamba vipengele kwa matumizi halisi — ni tokeni gani za usanifu za kuweka, ni tofauti gani za kuongeza, jinsi ya kuunganisha kurasa. Ni programu kamili za SvelteKit, Next.js, Nuxt, Blazor, na Eleventy, si sehemu za majaribio tu.

Vyanzo vya msukumo

Lily huchukua michoro na lugha kutoka kwa mkusanyiko mpana wa kimakusudi wa mifumo ya usanifu:

Leseni

Lily ina leseni nyingi: BSD, MIT, Apache-2.0, GPL-2.0, au GPL-3.0. Chagua leseni inayofaa mradi wako. Kama hakuna inayofaa, wasiliana nasi.

Mawasiliano

Kiongozi wa mradi: Joel Parker Henderson — joel@joelparkerhenderson.com

Umegundua hitilafu, una wazo, au unataka kuchangia kipengele? Fungua suala au ombi la kuvuta kwenye GitHub.

Hali: Lily ni kazi mpya kabisa na tunakaribisha ushirikiano, mwongozo, na maoni. Mambo yatabadilika na kuendelea kukua.