Lily Design System™

Beth yw Lily?

System ddylunio am ddim, cod agored, sy'n rhoi hygyrchedd yn gyntaf ac sy'n eich cyfarfod lle rydych chi'n codio — ac yn cadw o'r ffordd pan nad oes ei hangen arnoch.

Y fersiwn fer

Catalog o gydrannau gwe yw Lily, pob un wedi'i weithredu mewn wyth blas headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, a Web Components) ynghyd â chasgliad o apiau enghreifftiol cyflawn sy'n dangos sut i'w harddullio.

Nid yw'r fersiynau headless yn cynnwys dim CSS. Maen nhw'n rhoi HTML semantig i chi, rolau a chyflyrau ARIA, cefnogaeth i'r bysellfwrdd, a phropiau sy'n gyfeillgar i ryngwladoli. Chi sy'n dod â'r dyluniad gweledol.

Egwyddorion dylunio

Hygyrch

Mae pob cydran yn dechrau o HTML semantig. Dim ond lle na all HTML ar ei ben ei hun fynegi'r patrwm y caiff ARIA ei ychwanegu. Y nod ar gyfer y cydrannau yw WCAG 2.2 AAA — rhoddir sylw i liwiau, bylchau, ffocws, a llywio drwy'r bysellfwrdd.

Cyfansoddadwy

Mae Lily yn ffafrio cydrannau bach, un pwrpas sy'n cydio yn ei gilydd. Mae patrymau cyfansawdd yn ymddangos dro ar ôl tro:

  • Nav → List → ListItem — ar gyfer briwsion bara, rhestrau cynnwys, dewislenni acordion, dewislenni coed, a thudalennu
  • Form → Field → Input — ar gyfer unrhyw gynllun ffurflen gyda labeli, awgrymiadau, a gwallau
  • Table → Head/Body/Foot → Row → Data — ar gyfer tablau, calendrau, siartiau gantt, a byrddau kanban
  • Bar → BarButton — ar gyfer bariau offer, bariau tabiau, bariau tasgau, bariau gweithredu, a bariau dewislen
  • Picker → PickerButton — ar gyfer dewiswyr lliw, dewiswyr graddio, dewiswyr thema

Rhyngwladoladwy

Nid oes yr un llinyn sy'n wynebu'r defnyddiwr wedi'i godio'n galed. Labeli, deunydd dalfan, negeseuon gwall, testun botymau — pob un yn baramedr. Rhowch eich system gyfieithu eich hun ar waith, ac mae Lily yn siarad pa bynnag iaith a siaradwch chi.

Headless

Nid oes gan gydrannau headless ddim CSS, dim blociau <style>, dim tocynnau dylunio na wnaethoch ddewis eu cael. Maen nhw'n datgelu un enw dosbarth kebab-case ar bob elfen wraidd fel y gallwch eu targedu sut bynnag y dymunwch — CSS semantig, Tailwind, CSS-in-JS, eich dewis chi.

Enghreifftiau cyflawn

Mae'r apiau enghreifftiol yn dangos sut i arddullio'r cydrannau i'w defnyddio go iawn — pa docynnau dylunio i'w gosod, pa amrywiadau i'w hychwanegu, sut i gyfansoddi tudalennau. Apiau llawn SvelteKit, Next.js, Nuxt, Blazor, ac Eleventy ydyn nhw, nid blychau tywod yn unig.

Ysbrydoliaeth

Mae Lily yn benthyca patrymau ac iaith o gasgliad eang yn fwriadol o systemau dylunio:

Trwydded

Mae Lily wedi'i amlrwyddedu o dan BSD, MIT, Apache-2.0, GPL-2.0, neu GPL-3.0. Dewiswch ba bynnag drwydded sy'n gweddu i'ch prosiect. Os nad yw'r un o'r rheini'n gweithio, cysylltwch â ni.

Cysylltu

Arweinydd y prosiect: Joel Parker Henderson — joel@joelparkerhenderson.com.

Wedi dod o hyd i fyg, gennych syniad, eisiau cyfrannu cydran? Agorwch fater neu gais tynnu ar GitHub.

Statws: Gwaith newydd sbon yw Lily ac rydym yn croesawu cydweithio, arweiniad, ac adborth. Bydd pethau'n symud ac yn esblygu.