Cos'è Lily?

In breve

Lily è un catalogo di web component, ciascuno implementato in otto varianti headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks e Web Components), più una serie di app di esempio complete che mostrano come applicare gli stili.

Le versioni headless non includono alcun CSS. Ti offrono HTML semantico, ruoli e stati ARIA, supporto da tastiera e prop adatte all'internazionalizzazione. Il design visivo lo porti tu.

Principi di progettazione

Accessibile

Ogni componente parte da HTML semantico. ARIA viene aggiunto solo dove l'HTML da solo non riesce a esprimere il pattern. I componenti puntano a WCAG 2.2 AAA – colori, spaziatura, focus e navigazione da tastiera sono tutti presi in considerazione.

Componibile

Lily privilegia componenti piccoli e con un solo scopo che si incastrano tra loro. I pattern composti ricorrono continuamente:

• Nav → List → ListItem – per breadcrumb, elenchi di contenuti, menu a fisarmonica, menu ad albero e paginazione
• Form → Field → Input – per qualsiasi layout di modulo con etichette, suggerimenti ed errori
• Table → Head/Body/Foot → Row → Data – per tabelle, calendari, diagrammi di Gantt e bacheche kanban
• Bar → BarButton – per barre degli strumenti, barre delle schede, barre delle attività, barre delle azioni e barre dei menu
• Picker → PickerButton – per selettori di colore, selettori di valutazione, selettori di tema

Internazionalizzabile

Nemmeno una stringa visibile all'utente è scritta direttamente nel codice. Etichette, segnaposto, messaggi di errore, testi dei pulsanti: tutto è parametro. Inserisci il tuo sistema di traduzione e Lily parla qualsiasi lingua parli tu.

Headless

I componenti headless non hanno alcun CSS, nessun blocco <style> , nessun design token che tu non abbia scelto. Espongono un solo nome di classe in kebab-case su ogni elemento radice, così puoi selezionarli come preferisci: CSS semantico, Tailwind, CSS-in-JS, a te la scelta.

Esempi completi

Le app di esempio mostrano come applicare gli stili ai componenti per un uso reale: quali design token impostare, quali varianti aggiungere, come comporre le pagine. Sono app complete in SvelteKit, Next.js, Nuxt, Blazor ed Eleventy, non semplici sandbox.

Fonti di ispirazione

Lily attinge pattern e linguaggio da un insieme volutamente ampio di design system:

• 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

Licenza

Lily è distribuito con più licenze: BSD, MIT, Apache-2.0, GPL-2.0 o GPL-3.0. Scegli quella più adatta al tuo progetto. Se nessuna va bene, contattaci.

Contatti

Responsabile del progetto: Joel Parker Henderson – joel@joelparkerhenderson.com.

Hai trovato un bug, hai un'idea, vuoi contribuire con un componente? Apri una issue o una pull request su GitHub.