Wat is Lily?

De korte versie

Lily is een catalogus van webcomponenten, elk geïmplementeerd in acht headless varianten (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks en Web Components), plus een set kant-en-klare voorbeeldapps die laten zien hoe je ze opmaakt.

De headless versies bevatten nul CSS. Ze geven je semantische HTML, ARIA-rollen en -statussen, toetsenbordondersteuning en props die geschikt zijn voor internationalisering. Het visuele ontwerp breng jij mee.

Ontwerpprincipes

Toegankelijk

Elke component begint bij semantische HTML. ARIA wordt er alleen bovenop gelegd waar HTML alleen het patroon niet kan uitdrukken. De componenten streven naar WCAG 2.2 AAA – kleuren, ruimte, focus en toetsenbordnavigatie worden allemaal meegenomen.

Combineerbaar

Lily geeft de voorkeur aan kleine componenten met één doel die in elkaar klikken. Samengestelde patronen keren steeds terug:

• Nav → List → ListItem – voor kruimelpaden, inhoudslijsten, accordeonmenu's, boommenu's en paginering
• Form → Field → Input – voor elke formulierindeling met labels, hints en fouten
• Table → Head/Body/Foot → Row → Data – voor tabellen, agenda's, gantt-diagrammen en kanbanborden
• Bar → BarButton – voor werkbalken, tabbalken, taakbalken, actiebalken en menubalken
• Picker → PickerButton – voor kleurkiezers, waarderingskiezers en themakiezers

Internationaliseerbaar

Geen enkele voor de gebruiker zichtbare tekenreeks is hardgecodeerd. Labels, plaatsaanduidingen, foutmeldingen en knopteksten zijn allemaal parameters. Koppel je eigen vertaalsysteem en Lily spreekt elke taal die jij spreekt.

Headless

Headless componenten hebben geen CSS, geen <style> -blokken en geen designtokens die je niet zelf hebt gekozen. Ze tonen één kebab-case klassenaam op elk rootelement, zodat je ze kunt targeten zoals je wilt – semantische CSS, Tailwind, CSS-in-JS, jouw keuze.

Kant-en-klare voorbeelden

De voorbeeldapps laten zien hoe je de componenten opmaakt voor echt gebruik: welke designtokens je instelt, welke varianten je toevoegt en hoe je pagina's samenstelt. Het zijn volledige SvelteKit-, Next.js-, Nuxt-, Blazor- en Eleventy-apps, geen simpele zandbakken.

Inspiratiebronnen

Lily ontleent patronen en taal aan een bewust brede set designsystemen:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

Licentie

Lily heeft meerdere licenties: BSD, MIT, Apache-2.0, GPL-2.0 of GPL-3.0. Kies de licentie die bij je project past. Past geen enkele, neem dan contact op.

Contact

Projectleider: Joel Parker Henderson – joel@joelparkerhenderson.com.

Een bug gevonden, een idee, of wil je een component bijdragen? Open een issue of pull request op GitHub.