Lily Design System™

Cad é Lily?

Córas dearaidh saor in aisce, foinse oscailte, a chuireann an inrochtaineacht i dtús: castar leat é san áit a scríobhann tú cód, agus bogann sé as do bhealach nuair nach bhfuil sé de dhíth ort.

An leagan gearr

Is catalóg de chomhpháirteanna gréasáin é Lily, agus cuirtear gach ceann acu i bhfeidhm in ocht leagan gan cheann (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks agus Web Components), móide sraith d’aipeanna samplacha iomlána a thaispeánann conas iad a stíliú.

Tagann na leaganacha gan cheann le nialas CSS. Tugann siad HTML séimeantach duit, róil agus staid ARIA, tacaíocht méarchláir agus airíonna atá oiriúnach don idirnáisiúnú. Is tusa a thugann an dearadh amhairc.

Prionsabail dearaidh

Inrochtana

Tosaíonn gach comhpháirt ó HTML séimeantach. Cuirtear ARIA leis ach amháin san áit nach leor HTML leis an bpatrún a chur in iúl. Díríonn na comhpháirteanna ar WCAG 2.2 AAA — cuirtear dathanna, spásáil, fócas agus nascleanúint méarchláir san áireamh go léir.

Intiomsaithe

Is fearr le Lily comhpháirteanna beaga aon-chuspóra a fheistíonn le chéile. Tagann patrúin chomhdhéanta chun cinn arís agus arís eile:

  • Nav → List → ListItem — le haghaidh blúirí aráin, liostaí ábhair, roghchláir cairdín, roghchláir chrainn agus leathanaigh
  • Form → Field → Input — le haghaidh aon leagan amach foirme le lipéid, leideanna agus earráidí
  • Table → Head/Body/Foot → Row → Data — le haghaidh táblaí, féilirí, cairteacha Gantt agus boird kanban
  • Bar → BarButton — le haghaidh barraí uirlisí, barraí cluaisíní, barraí tascanna, barraí gníomhaíochta agus barraí roghchláir
  • Picker → PickerButton — le haghaidh roghnóirí datha, roghnóirí rátála, roghnóirí téama

Idirnáisiúnaithe

Níl aon teaghrán a fheiceann an t-úsáideoir scríofa go docht sa chód. Lipéid, sealbhóirí áite, teachtaireachtaí earráide, téacs cnaipí — is paraiméadair iad ar fad. Plugáil isteach do chóras aistrithe féin agus labhraíonn Lily cibé teanga a labhraíonn tusa.

Gan cheann

Tá nialas CSS ag na comhpháirteanna gan cheann, gan aon bhloc <style> , gan aon chomharthaí dearaidh nár roghnaigh tú. Nochtann siad ainm aicme amháin i kebab-case ar gach eilimint fréimhe ionas gur féidir leat díriú orthu mar is mian leat — CSS séimeantach, Tailwind, CSS-in-JS, do rogha féin.

Samplaí iomlána

Taispeánann na haipeanna samplacha conas na comhpháirteanna a stíliú le haghaidh úsáide fíorúla — cé na comharthaí dearaidh le socrú, cé na héagsúlachtaí le cur leis, conas leathanaigh a chumadh. Is aipeanna iomlána SvelteKit, Next.js, Nuxt, Blazor agus Eleventy iad, ní hamháin bosca gainimh.

Foinsí spreagtha

Tarraingíonn Lily patrúin agus teanga as tacar leathan d’aon ghnó de chórais dearaidh:

Ceadúnas

Tá ilcheadúnas ag Lily faoi BSD, MIT, Apache-2.0, GPL-2.0, nó GPL-3.0. Roghnaigh cibé ceann a oireann do do thionscadal. Mura n-oireann aon cheann acu, déan teagmháil linn.

Teagmháil

Ceannaire an tionscadail: Joel Parker Henderson — joel@joelparkerhenderson.com.

Ar aimsigh tú fabht, an bhfuil smaoineamh agat, an bhfuil tú ag iarraidh comhpháirt a chur leis? Oscail issue nó pull request ar GitHub.

Stádas: Is saothar úrnua é Lily agus fáiltímid roimh chomhoibriú, treoir agus aiseolas. Athróidh agus forbrófar rudaí.