Lily Design System™

X’inhi Lily?

Sistema tad-disinn b’xejn u b’sors miftuħ, li tqiegħed l-aċċessibbiltà l-ewwel: tiltaqa’ miegħek fejn tikteb il-kodiċi, u titbiegħed meta ma jkollokx bżonnha.

Fil-qosor

Lily hija katalgu ta’ komponenti tal-web, li kull wieħed minnhom huwa implimentat f’tmien verżjonijiet headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks u Web Components), flimkien ma’ sett ta’ applikazzjonijiet ta’ eżempju kompluti li juru kif tistilizzahom.

Il-verżjonijiet headless jiġu bi xejn CSS. Jagħtuk HTML semantiku, rwoli u stati ARIA, appoġġ għat-tastiera u proprjetajiet adattati għall-internazzjonalizzazzjoni. Id-disinn viżwali inti ġġibu.

Prinċipji tad-disinn

Aċċessibbli

Kull komponent jibda minn HTML semantiku. L-ARIA tiżdied biss fejn l-HTML waħdu ma jistax jesprimi x-xejra. Il-komponenti jimmiraw lejn WCAG 2.2 AAA — il-kuluri, l-ispazji, il-fokus u n-navigazzjoni bit-tastiera huma kollha kkunsidrati.

Jista’ jinġabar

Lily tippreferi komponenti żgħar b’skop wieħed li jidħlu f’xulxin. Ix-xejriet komposti jidhru għal darba wara l-oħra:

  • Nav → List → ListItem — għal breadcrumbs, listi tal-kontenut, menus akkordjun, menus tas-siġra u paġinazzjoni
  • Form → Field → Input — għal kull dispożizzjoni ta’ formola bi tikketti, suġġerimenti u żbalji
  • Table → Head/Body/Foot → Row → Data — għal tabelli, kalendarji, dijagrammi Gantt u bords kanban
  • Bar → BarButton — għal toolbars, tab bars, task bars, action bars u menu bars
  • Picker → PickerButton — għal għażla tal-kulur, għażla tal-klassifikazzjoni, għażla tat-tema

Jista’ jiġi internazzjonalizzat

L-ebda sekwenza viżibbli għall-utent mhi miktuba direttament fil-kodiċi. It-tikketti, il-placeholders, il-messaġġi tal-iżball, it-test tal-buttuni — kollha parametri. Qabbad is-sistema tat-traduzzjoni tiegħek u Lily titkellem kwalunkwe lingwa titkellem int.

Headless

Il-komponenti headless għandhom xejn CSS, l-ebda blokki <style> , l-ebda tokens tad-disinn li ma għażiltx int. Jesponu isem wieħed ta’ klassi f’kebab-case fuq kull element għerq, biex tkun tista’ timmirhom kif trid — CSS semantiku, Tailwind, CSS-in-JS, id-deċiżjoni tiegħek.

Eżempji kompluti

L-applikazzjonijiet ta’ eżempju juru kif tistilizza l-komponenti għal użu reali — liema tokens tad-disinn tistabbilixxi, liema varjazzjonijiet iżżid, kif tikkomponi paġni. Huma applikazzjonijiet SvelteKit, Next.js, Nuxt, Blazor u Eleventy sħaħ, mhux biss sandboxes.

Sorsi ta’ ispirazzjoni

Lily tieħu x-xejriet u l-lingwaġġ minn sett wiesa’ apposta ta’ sistemi tad-disinn:

Liċenzja

Lily għandha liċenzji multipli: BSD, MIT, Apache-2.0, GPL-2.0 jew GPL-3.0. Agħżel dik li taqbel mal-proġett tiegħek. Jekk l-ebda waħda ma taqbel, ikkuntattjana.

Kuntatt

Mexxej tal-proġett: Joel Parker Henderson — joel@joelparkerhenderson.com.

Sibt bug, għandek idea, trid tikkontribwixxi komponent? Iftaħ issue jew pull request fuq GitHub.

Stat: Lily hija xogħol ġdid ġdid u nilqgħu l-kollaborazzjoni, il-gwida u l-feedback. L-affarijiet se jinbidlu u se jevolvu.