Zer da Lily?

Bertsio laburra

Lily web-osagaienkatalogo bat da, bakoitza zortzi bertsio buru gabetan inplementatua (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks eta Web Components), eta estilatzeko modua erakusten duten aplikazio adibide osoen multzo bat.

Bertsio buru gabeek CSSrik ezdute. HTML semantikoa, ARIA rolak eta egoerak, teklatuaren euskarria eta i18n-rako egokiak diren propak ematen dizkizute. Diseinu bisuala zuk jartzen duzu.

Diseinu-printzipioak

Irisgarria

Osagai guztiak HTML semantikotik abiatzen dira. ARIA HTMLak berak patroia adierazi ezin duen tokian soilik gehitzen da. Osagaiek honakoa dute helburu: WCAG 2.2 AAA — koloreak, tarteak, fokua eta teklatuarekin nabigatzea kontuan hartzen dira.

Konposagarria

Lilyk osagai txiki eta xede bakarrekoak nahiago ditu, elkarri doitzen zaizkionak. Patroi konposatuak behin eta berriz agertzen dira:

• Nav → List → ListItem — ogi-apurrentzat, eduki-zerrendentzat, akordeoi-menuentzat, zuhaitz-menuentzat eta orrialdekatzerako
• Form → Field → Input — etiketak, aholkuak eta erroreak dituen edozein formulario-diseinutarako
• Table → Head/Body/Foot → Row → Data — taulentzat, egutegientzat, Gantt diagramentzat eta kanban taulentzat
• Bar → BarButton — tresna-barrentzat, fitxa-barrentzat, zeregin-barrentzat, ekintza-barrentzat eta menu-barrentzat
• Picker → PickerButton — kolore-hautatzaileentzat, balorazio-hautatzaileentzat, gai-hautatzaileentzat

Nazioartekotu daitekeena

Erabiltzaileak ikusten duen kate bakar bat ere ez dago gogor kodetuta. Etiketak, leku-markak, errore-mezuak, botoien testua — dena parametroa da. Sartu zure itzulpen-sistema eta Lilyk zuk hitz egiten duzun hizkuntzan hitz egingo du.

Buru gabekoa

Osagai buru gabeek ez dute CSSrik, ez <style> blokerik eta ez diseinu-tokenik zuk aukeratu ez dituzunak. Erro-elementu bakoitzean kebab-case klase-izen bakarra erakusten dute, nahi duzun moduan hautatzeko — CSS semantikoa, Tailwind, CSS-in-JS, zure aukera.

Adibide osoak

Adibide-aplikazioek erabilera errealerako osagaiak nola estilatu erakusten dute — zein diseinu-token ezarri, zein aldaera gehitu, orriak nola osatu. SvelteKit, Next.js, Nuxt, Blazor eta Eleventy aplikazio osoak dira, ez hondar-kutxak soilik.

Inspirazioak

Lilyk patroiak eta hizkuntza hartzen ditu nahita zabala den diseinu-sistema sorta batetik:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australiako Gobernua)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters-en grafiko-osagaiak

Lizentzia

Lilyk lizentzia anitz ditu, besteak beste BSD, MIT, Apache-2.0, GPL-2.0 edo GPL-3.0. Aukeratu zure proiektuari egokitzen zaiona. Bat ere ez bada egokia, jarri harremanetan.

Kontaktua

Proiektuaren arduraduna: Joel Parker Henderson — joel@joelparkerhenderson.com.

Akats bat aurkitu duzu, ideiaren bat duzu, osagai bat eman nahi duzu? Ireki issue bat edo pull request bat hemen: GitHub.