Lily Design System™

Kas yra Lily?

Nemokama atvirojo kodo dizaino sistema, kurioje prieinamumas yra pirmoje vietoje: sutinka jus ten, kur rašote kodą, ir pasitraukia, kai jos nereikia.

Trumpai

Lily yra žiniatinklio komponentų katalogas, kurio kiekvienas komponentas įgyvendintas aštuoniais bevaigiais variantais (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ir Web Components), taip pat parengtų pavyzdinių programų rinkinys, rodantis, kaip juos stilizuoti.

Bevaigėse versijose yra nulis CSS. Jos suteikia semantinį HTML, ARIA vaidmenis ir būsenas, klaviatūros palaikymą ir savybes, tinkamas internacionalizacijai. Vizualinį dizainą atnešate jūs.

Dizaino principai

Prieinamas

Kiekvienas komponentas prasideda nuo semantinio HTML. ARIA pridedama tik ten, kur vien HTML negali išreikšti šablono. Komponentai taikosi į WCAG 2.2 AAA — atsižvelgiama į spalvas, tarpus, fokusą ir naršymą klaviatūra.

Sudedamas

Lily teikia pirmenybę mažiems vieno tikslo komponentams, kurie susijungia vienas su kitu. Sudėtiniai šablonai kartojasi vėl ir vėl:

  • Nav → List → ListItem — duonos trupinių takeliams, turinio sąrašams, akordeono meniu, medžio meniu ir puslapiavimui
  • Form → Field → Input — bet kuriam formos išdėstymui su etiketėmis, užuominomis ir klaidomis
  • Table → Head/Body/Foot → Row → Data — lentelėms, kalendoriams, Ganto diagramoms ir kanban lentoms
  • Bar → BarButton — įrankių juostoms, skirtukų juostoms, užduočių juostoms, veiksmų juostoms ir meniu juostoms
  • Picker → PickerButton — spalvų parinkikliams, vertinimo parinkikliams, temų parinkikliams

Internacionalizuojamas

Nė viena vartotojui matoma eilutė nėra įrašyta tiesiai į kodą. Etiketės, vietos žymekliai, klaidų pranešimai, mygtukų tekstas — viskas yra parametrai. Prijunkite savo vertimo sistemą, ir Lily kalbės bet kuria kalba, kuria kalbate jūs.

Bevaigis

Bevaigiai komponentai turi nulį CSS, jokių <style> blokų, jokių dizaino žetonų, kurių nepasirinkote. Jie atskleidžia vieną kebab-case klasės pavadinimą kiekviename šakniniame elemente, kad galėtumėte juos taikyti kaip norite — semantinis CSS, Tailwind, CSS-in-JS, jūsų sprendimas.

Parengti pavyzdžiai

Pavyzdinės programos rodo, kaip stilizuoti komponentus tikram naudojimui — kokius dizaino žetonus nustatyti, kokius variantus pridėti, kaip sudėti puslapius. Tai pilnos SvelteKit, Next.js, Nuxt, Blazor ir Eleventy programos, ne tik smėlio dėžės.

Įkvėpimo šaltiniai

Lily semiasi šablonų ir kalbos iš sąmoningai plataus dizaino sistemų rinkinio:

Licencija

Lily turi kelias licencijas: BSD, MIT, Apache-2.0, GPL-2.0 arba GPL-3.0. Pasirinkite tą, kuri tinka jūsų projektui. Jei netinka nė viena, susisiekite su mumis.

Kontaktai

Projekto vadovas: Joel Parker Henderson — joel@joelparkerhenderson.com.

Radote klaidą, turite idėją, norite prisidėti komponentu? Atidarykite issue arba pull request adresu GitHub.

Būsena: Lily yra visiškai naujas darbas, ir mes sveikiname bendradarbiavimą, patarimus ir atsiliepimus. Dalykai keisis ir vystysis.