Lily Design System™

Kaj je Lily?

Brezplačen oblikovalski sistem odprte kode, ki na prvo mesto postavlja dostopnost: sreča vas tam, kjer pišete kodo, in se umakne, ko ga ne potrebujete.

Na kratko

Lily je katalog spletnih komponent, od katerih je vsaka izvedena v osmih brezglavih različicah (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks in Web Components), poleg tega pa še nabor popolnih vzorčnih aplikacij, ki kažejo, kako jih stilizirati.

Brezglave različice vsebujejo nič CSS. Ponujajo semantični HTML, vloge in stanja ARIA, podporo tipkovnici in lastnosti, primerne za internacionalizacijo. Vizualno oblikovanje prispevate vi.

Oblikovalska načela

Dostopno

Vsaka komponenta izhaja iz semantičnega HTML. ARIA se doda le tam, kjer sam HTML ne more izraziti vzorca. Komponente ciljajo na WCAG 2.2 AAA — upoštevane so barve, razmiki, fokus in krmarjenje s tipkovnico.

Sestavljivo

Lily daje prednost majhnim komponentam z enim namenom, ki se prilegajo druga drugi. Sestavljeni vzorci se ponavljajo znova in znova:

  • Nav → List → ListItem — za drobtinice, sezname vsebine, harmonika menije, drevesne menije in oštevilčenje strani
  • Form → Field → Input — za vsako postavitev obrazca z oznakami, namigi in napakami
  • Table → Head/Body/Foot → Row → Data — za tabele, koledarje, Ganttove diagrame in kanban table
  • Bar → BarButton — za orodne vrstice, vrstice zavihkov, vrstice opravil, vrstice dejanj in menijske vrstice
  • Picker → PickerButton — za izbirnike barv, izbirnike ocen, izbirnike tem

Primerno za internacionalizacijo

Nobeno uporabniku vidno besedilo ni trdo zapisano v kodi. Oznake, nadomestna besedila, sporočila o napakah, besedilo gumbov — vse so parametri. Vključite svoj prevajalski sistem in Lily govori vsak jezik, ki ga govorite vi.

Brezglavo

Brezglave komponente imajo nič CSS, nobenih blokov <style> , nobenih oblikovalskih žetonov, ki jih niste izbrali. Na vsakem korenskem elementu izpostavijo eno ime razreda v kebab-case, da jih lahko ciljate, kakor želite — semantični CSS, Tailwind, CSS-in-JS, vaša odločitev.

Popolni primeri

Vzorčne aplikacije kažejo, kako stilizirati komponente za dejansko uporabo — katere oblikovalske žetone nastaviti, katere različice dodati, kako sestavljati strani. So popolne aplikacije SvelteKit, Next.js, Nuxt, Blazor in Eleventy, ne le peskovniki.

Viri navdiha

Lily črpa vzorce in jezik iz namerno širokega nabora oblikovalskih sistemov:

Licenca

Lily ima več licenc: BSD, MIT, Apache-2.0, GPL-2.0 ali GPL-3.0. Izberite tisto, ki ustreza vašemu projektu. Če nobena ne ustreza, se obrnite na nas.

Stik

Vodja projekta: Joel Parker Henderson — joel@joelparkerhenderson.com.

Ste našli napako, imate idejo, želite prispevati komponento? Odprite issue ali pull request na GitHub.

Stanje: Lily je povsem novo delo in pozdravljamo sodelovanje, usmeritve in povratne informacije. Stvari se bodo spreminjale in razvijale.