Le ragioni di Lily

Parti dal tuo design

Il tuo team sa già come dovrebbe apparire il tuo prodotto. Lily parte esattamente da lì: fornisce le parti davvero difficili da fare bene e costose da rifare – l'elemento semantico corretto, gli stati ARIA, il contratto da tastiera, la gestione del focus – e lascia ogni decisione visiva interamente, con gioia, a te. Il tuo CSS è l'aspetto del design system fin dal primo giorno.

Poiché ogni componente porta con sé un hook di classe stabile e una struttura pura, il tuo stile resta pulitamente tuo a ogni aggiornamento – e l'accessibilità sottostante continua a funzionare, versione dopo versione.

A cosa si impegna Lily

• Accessibile per impostazione predefinita. WCAG 2.2 AAA è l'obiettivo di ogni componente. I pattern seguono le WAI-ARIA Authoring Practices; ogni componente interattivo è utilizzabile da tastiera con un contratto documentato; le app di esempio mantengono una baseline axe-core pulita.
• Internazionalizzabile per costruzione. Ogni stringa visibile all'utente – ogni etichetta, errore e annuncio – è una prop con nomi stabili tra i framework, così la traduzione scorre in modo naturale. RTL e testo bidirezionale ereditano dal tuo dir. I componenti sensibili alla lingua ricevono la lingua come prop, sempre in modo esplicito.
• Un catalogo, otto framework. Gli stessi 571 componenti (536 come Web Components nativi) con gli stessi hook di classe e le stesse convenzioni per le prop in HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks e Web Components. Il tuo CSS e le competenze del tuo team si trasferiscono da uno stack all'altro.
• Indipendente dalla strategia CSS. Una classe stabile in kebab-case per ogni radice di componente. CSS semantico, utility di Tailwind, CSS-in-JS o uno dei 57 temi pronti: Lily li accoglie tutti e si fa da parte con eleganza.
• Gratuito, per sempre, alle tue condizioni. Open source con la licenza che preferisci tra BSD, MIT, Apache-2.0, GPL-2.0 o GPL-3.0. Nessun livello pro, nessuna licenza per postazione, nessuna telemetria.

Profondità dove conta

Oltre ai soliti pulsanti e finestre di dialogo, il catalogo si spinge più in là della maggior parte degli altri:

• Pattern per il settore pubblico studiati dai design system di NHS UK, GOV.UK, USWDS e ONS: riepiloghi degli errori, riquadri di avviso, elenchi di riepilogo, banner di fase, link per saltare.
• 140 componenti per identificativi personali nazionali che coprono identificativi sanitari, di documenti nazionali, fiscali e di passaporto in oltre 50 paesi, ciascuno con formato e algoritmo di validazione documentati.
• Elementi base editoriali e di scrollytelling adattati da Reuters Graphics: layout di articoli, scroller, timeline, mappe a tessere.
• Helper per i selettori – piccoli pacchetti che gestiscono un'interazione dall'inizio alla fine: cambio di tema (con caricamento del foglio di stile a runtime), lingua, dimensione del testo, movimento ridotto, ricerca, link alle pagine, condivisione e inserimento di data e ora. Ciascuno è un pulsante a icona headless che apre un popup – non un <select> nativo – con persistenza e sicurezza SSR integrate.

Temi per il settore pubblico, pronti all'uso

Lily include 57 temi di riferimento autonomi che puntano direttamente ai suoi hook di classe: NHS England, NHS Scotland e NHS Wales (ciascuno nelle varianti per pazienti e per operatori), GOV.UK, USWDS, palette ispirate a Adobe Spectrum e Mozilla Protocol, e una serie di temi chiari e scuri generici. Collega un foglio di stile e un aspetto da pubblica amministrazione è attivo; l'helper theme-picker li cambia a runtime.

Come si confronta Lily

Teniamo un confronto onesto, componente per componente, con altri design system – con e senza stili, commerciali e del settore pubblico. Dove un'altra libreria è più adatta a te, il confronto lo mostrerà; Lily impara da tutte e cita apertamente le proprie fonti di ispirazione.

Chi c'è dietro

Lily è un progetto open source giovane e indipendente che accoglie collaborazione, indicazioni e feedback – vedi Informazioni per la storia e le fonti di ispirazione. Tutto – la specifica, i test, la roadmap, perfino gli strumenti di audit – è aperto su github.com/LilyDesignSystem.

Aiuta Lily a crescere

Se Lily ti è utile, le cose più preziose che puoi fare sono:

• Metti una stella e condividi. Metti una stella al repository principale e mostra a un collega il catalogo – la visibilità è la risorsa più scarsa che un progetto giovane abbia.
• Costruisci qualcosa e raccontacelo. I resoconti d'uso nel mondo reale – cosa ha funzionato, cosa potrebbe essere più fluido – plasmano la roadmap più di ogni altra cosa.
• Verifica l'accessibilità. Le prove con screen reader (VoiceOver, NVDA, JAWS) sulle app di esempio valgono oro; segnala ciò che trovi.
• Contribuisci con un tema o una traduzione. Entrambi sono primi contributi autonomi e ben delimitati.
• Condividi ciò che trovi, con una riproduzione minima, sul repository GitHub, oppure scrivi a joel@joelparkerhenderson.com.