Lily Design System™

Što je Lily?

Besplatan dizajnerski sustav otvorenog koda koji pristupačnost stavlja na prvo mjesto: dočeka vas ondje gdje programirate i makne vam se s puta kad vam ne treba.

Ukratko

Lily je katalog web komponenti, od kojih je svaka implementirana u osam bezglavih varijanti (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks i Web Components), uz skup gotovih primjera aplikacija koji pokazuju kako ih stilizirati.

Bezglave verzije dolaze s nula CSS-a. Daju vam semantički HTML, ARIA uloge i stanja, podršku za tipkovnicu i svojstva prilagođena internacionalizaciji. Vizualni dizajn donosite vi.

Dizajnerska načela

Pristupačno

Svaka komponenta kreće od semantičkog HTML-a. ARIA se dodaje samo ondje gdje sam HTML ne može izraziti obrazac. Komponente ciljaju na WCAG 2.2 AAA — boje, razmaci, fokus i navigacija tipkovnicom svi su uzeti u obzir.

Složivo

Lily preferira male komponente s jednom namjenom koje se uklapaju jedna u drugu. Složeni obrasci javljaju se uvijek iznova:

  • Nav → List → ListItem — za navigacijske mrvice, popise sadržaja, harmonika izbornike, stablaste izbornike i straničenje
  • Form → Field → Input — za svaki raspored obrasca s oznakama, savjetima i pogreškama
  • Table → Head/Body/Foot → Row → Data — za tablice, kalendare, Ganttove dijagrame i kanban ploče
  • Bar → BarButton — za alatne trake, trake kartica, trake zadataka, trake radnji i trake izbornika
  • Picker → PickerButton — za birače boja, birače ocjena, birače tema

Moguća internacionalizacija

Nijedan niz vidljiv korisniku nije zapisan izravno u kodu. Oznake, rezervirana mjesta, poruke o pogreškama, tekst gumba — sve su parametri. Uključite vlastiti sustav prevođenja i Lily govori bilo koji jezik kojim govorite i vi.

Bezglavo

Bezglave komponente imaju nula CSS-a, nikakve blokove <style> , nikakve dizajnerske tokene koje niste sami odabrali. Izlažu jedan naziv klase u kebab-caseu na svakom korijenskom elementu da ih možete ciljati kako želite — semantički CSS, Tailwind, CSS-in-JS, vaša odluka.

Gotovi primjeri

Primjeri aplikacija pokazuju kako stilizirati komponente za stvarnu upotrebu — koje dizajnerske tokene postaviti, koje varijacije dodati, kako slagati stranice. To su potpune aplikacije SvelteKit, Next.js, Nuxt, Blazor i Eleventy, a ne samo pješčanici.

Izvori inspiracije

Lily crpi obrasce i jezik iz namjerno širokog skupa dizajnerskih sustava:

Licenca

Lily ima više licenci: BSD, MIT, Apache-2.0, GPL-2.0 ili GPL-3.0. Odaberite onu koja odgovara vašem projektu. Ako nijedna ne odgovara, javite nam se.

Kontakt

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

Pronašli ste grešku, imate ideju, želite doprinijeti komponentom? Otvorite issue ili pull request na GitHub.

Status: Lily je posve novi rad i pozdravljamo suradnju, smjernice i povratne informacije. Stvari će se mijenjati i razvijati.