Lily Design System™

Čo je Lily?

Bezplatný dizajnový systém s otvoreným kódom, ktorý kladie prístupnosť na prvé miesto: stretne vás tam, kde programujete, a ustúpi z cesty, keď ho nepotrebujete.

Stručne

Lily je katalóg webových komponentov, z ktorých každý je implementovaný v ôsmich bezhlavých variantoch (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks a Web Components), a k tomu sada kompletných ukážkových aplikácií, ktoré ukazujú, ako ich štýlovať.

Bezhlavé verzie neobsahujú žiadne CSS. Poskytujú sémantické HTML, roly a stavy ARIA, podporu klávesnice a vlastnosti vhodné na internacionalizáciu. Vizuálny dizajn prinášate vy.

Dizajnové princípy

Prístupné

Každý komponent vychádza zo sémantického HTML. ARIA sa pridáva len tam, kde samotné HTML vzor nevyjadrí. Komponenty cielia na WCAG 2.2 AAA — farby, rozostupy, fokus aj navigácia klávesnicou sú všetky zohľadnené.

Skladateľné

Lily uprednostňuje malé komponenty s jediným účelom, ktoré do seba zapadajú. Zložené vzory sa opakujú stále dokola:

  • Nav → List → ListItem — pre omrvinkovú navigáciu, zoznamy obsahu, akordeónové ponuky, stromové ponuky a stránkovanie
  • Form → Field → Input — pre akékoľvek rozloženie formulára so štítkami, nápovedami a chybami
  • Table → Head/Body/Foot → Row → Data — pre tabuľky, kalendáre, Ganttove diagramy a kanbanové tabule
  • Bar → BarButton — pre panely nástrojov, panely kariet, panely úloh, panely akcií a panely ponúk
  • Picker → PickerButton — pre výbery farieb, výbery hodnotenia, výbery tém

Internacionalizovateľné

Ani jediný reťazec viditeľný používateľom nie je zapísaný napevno. Štítky, zástupné texty, chybové hlásenia, texty tlačidiel — všetko sú parametre. Zapojte vlastný prekladový systém a Lily hovorí akýmkoľvek jazykom, ktorým hovoríte vy.

Bezhlavé

Bezhlavé komponenty majú žiadne CSS, žiadne bloky <style> , žiadne dizajnové tokeny, ktoré ste si nevybrali. Sprístupňujú jediný názov triedy v kebab-case na každom koreňovom prvku, takže ich môžete cieliť, ako chcete — sémantické CSS, Tailwind, CSS-in-JS, je to na vás.

Kompletné ukážky

Ukážkové aplikácie ukazujú, ako štýlovať komponenty pre skutočné použitie — aké dizajnové tokeny nastaviť, aké varianty pridať, ako skladať stránky. Sú to plnohodnotné aplikácie SvelteKit, Next.js, Nuxt, Blazor a Eleventy, nie len pieskoviská.

Zdroje inšpirácie

Lily čerpá vzory a jazyk zo zámerne širokej sady dizajnových systémov:

Licencia

Lily je viaclicencovaný: BSD, MIT, Apache-2.0, GPL-2.0 alebo GPL-3.0. Vyberte si licenciu, ktorá vyhovuje vášmu projektu. Ak nevyhovuje žiadna, ozvite sa nám.

Kontakt

Vedúci projektu: Joel Parker Henderson — joel@joelparkerhenderson.com.

Našli ste chybu, máte nápad, chcete prispieť komponentom? Otvorte issue alebo pull request na GitHub.

Stav: Lily je celkom nová práca a vítame spoluprácu, vedenie aj spätnú väzbu. Veci sa budú meniť a vyvíjať.