Lily Design System™

Hva er Lily?

Et gratis designsystem med åpen kildekode som setter tilgjengelighet først, som møter deg der du skriver kode — og holder seg unna når du ikke trenger det.

Kortversjonen

Lily er en katalog over webkomponenter, hver implementert i åtte hodeløse varianter (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks og Web Components) pluss et sett komplette eksempelapper som viser hvordan de kan stiles.

De hodeløse versjonene leveres med null CSS. De gir deg semantisk HTML, ARIA-roller og -tilstander, tastaturstøtte og egenskaper som passer for internasjonalisering. Du tar med det visuelle designet.

Designprinsipper

Tilgjengelig

Hver komponent starter med semantisk HTML. ARIA legges bare til der HTML alene ikke kan uttrykke mønsteret. Komponentene tar sikte på WCAG 2.2 AAA — farger, mellomrom, fokus og tastaturnavigasjon er alle vurdert.

Sammensettbar

Lily foretrekker små komponenter med ett formål som lar seg sette sammen. Sammensatte mønstre dukker opp igjen og igjen:

  • Nav → List → ListItem — for brødsmuler, innholdslister, trekkspillmenyer, trestrukturmenyer og paginering
  • Form → Field → Input — for enhver skjemaoppsett med etiketter, hint og feil
  • Table → Head/Body/Foot → Row → Data — for tabeller, kalendere, Gantt-diagrammer og kanban-tavler
  • Bar → BarButton — for verktøylinjer, fanelinjer, oppgavelinjer, handlingslinjer og menylinjer
  • Picker → PickerButton — for fargevelgere, vurderingsvelgere, temavelgere

Kan internasjonaliseres

Ikke en eneste tekststreng brukeren ser er hardkodet. Etiketter, plassholdere, feilmeldinger, knappetekst — alt er parametere. Koble til ditt eget oversettelsessystem, så snakker Lily hvilket språk du enn snakker.

Hodeløs

Hodeløse komponenter har ingen CSS, ingen <style> blokker og ingen designtokener du ikke har valgt. De eksponerer ett kebab-case-klassenavn på hvert rotelement slik at du kan målrette dem som du vil — semantisk CSS, Tailwind, CSS-in-JS, det er opp til deg.

Komplette eksempler

Eksempelappene viser hvordan komponentene kan stiles for ekte bruk — hvilke designtokener som skal settes, hvilke varianter som skal legges til, hvordan sider settes sammen. De er fullverdige SvelteKit-, Next.js-, Nuxt-, Blazor- og Eleventy-apper, ikke bare sandkasser.

Inspirasjoner

Lily henter mønstre og språk fra et bevisst bredt utvalg designsystemer:

Lisens

Lily har flere lisenser under BSD, MIT, Apache-2.0, GPL-2.0 eller GPL-3.0. Velg den som passer prosjektet ditt. Hvis ingen av dem fungerer, ta kontakt.

Kontakt

Prosjektleder: Joel Parker Henderson — joel@joelparkerhenderson.com.

Funnet en feil, har du en idé, vil du bidra med en komponent? Åpne en sak eller en pull request på GitHub.

Status: Lily er helt nytt arbeid, og vi ønsker samarbeid, veiledning og tilbakemeldinger velkommen. Ting vil bevege seg og utvikle seg.