Lily Design System™

Co je Lily?

Bezplatný návrhový systém s otevřeným kódem, který klade přístupnost na první místo: potká vás tam, kde programujete, a ustoupí z cesty, když ho nepotřebujete.

Stručně

Lily je katalog webových komponent, z nichž každá je implementována v osmi bezhlavých variantách (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks a Web Components), a k tomu sada kompletních ukázkových aplikací, které ukazují, jak je stylovat.

Bezhlavé verze neobsahují žádné CSS. Poskytují sémantické HTML, role a stavy ARIA, podporu klávesnice a vlastnosti vhodné pro internacionalizaci. Vizuální návrh přinášíte vy.

Návrhové principy

Přístupné

Každá komponenta vychází ze sémantického HTML. ARIA se přidává jen tam, kde samotné HTML vzor nevyjádří. Komponenty míří na WCAG 2.2 AAA — barvy, rozestupy, fokus i navigace klávesnicí jsou všechny zohledněny.

Skládatelné

Lily upřednostňuje malé komponenty s jediným účelem, které do sebe zapadají. Složené vzory se opakují stále dokola:

  • Nav → List → ListItem — pro drobečkovou navigaci, seznamy obsahu, akordeonová menu, stromová menu a stránkování
  • Form → Field → Input — pro jakékoli rozvržení formuláře se štítky, nápovědami a chybami
  • Table → Head/Body/Foot → Row → Data — pro tabulky, kalendáře, Ganttovy diagramy a kanbanové tabule
  • Bar → BarButton — pro panely nástrojů, panely karet, panely úloh, panely akcí a panely nabídek
  • Picker → PickerButton — pro výběry barev, výběry hodnocení, výběry motivů

Internacionalizovatelné

Ani jediný řetězec viditelný uživateli není zapsán napevno. Štítky, zástupné texty, chybové zprávy, texty tlačítek — vše jsou parametry. Zapojte vlastní překladový systém a Lily mluví jakýmkoli jazykem, kterým mluvíte vy.

Bezhlavé

Bezhlavé komponenty mají žádné CSS, žádné bloky <style> , žádné návrhové tokeny, které jste si nevybrali. Zpřístupňují jediný název třídy v kebab-case na každém kořenovém prvku, takže je můžete cílit, jak chcete — sémantické CSS, Tailwind, CSS-in-JS, je to na vás.

Kompletní ukázky

Ukázkové aplikace ukazují, jak komponenty stylovat pro skutečné použití — jaké návrhové tokeny nastavit, jaké varianty přidat, jak skládat stránky. Jsou to plnohodnotné aplikace SvelteKit, Next.js, Nuxt, Blazor a Eleventy, ne jen pískoviště.

Zdroje inspirace

Lily čerpá vzory a jazyk z záměrně široké sady návrhových systémů:

Licence

Lily je vícelicencovaný: BSD, MIT, Apache-2.0, GPL-2.0 nebo GPL-3.0. Vyberte si licenci, která vyhovuje vašemu projektu. Pokud nevyhovuje žádná, ozvěte se nám.

Kontakt

Vedoucí projektu: Joel Parker Henderson — joel@joelparkerhenderson.com.

Našli jste chybu, máte nápad, chcete přispět komponentou? Otevřete issue nebo pull request na GitHub.

Stav: Lily je zcela nová práce a vítáme spolupráci, vedení i zpětnou vazbu. Věci se budou měnit a vyvíjet.