Lily Design System™

Hvad er Lily?

Et gratis designsystem med åben kildekode og tilgængelighed i højsædet, der møder dig dér, hvor du koder – og holder sig af vejen, når du ikke har brug for det.

Den korte version

Lily er et katalog over webkomponenter, som hver især er implementeret i otte hovedløse varianter (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks og Web Components) samt et sæt færdige eksempelapps, der viser, hvordan de kan stilles.

De hovedløse versioner leveres med nul CSS. De giver dig semantisk HTML, ARIA-roller og -tilstande, tastaturunderstøttelse og props, der egner sig til internationalisering. Det visuelle design tager du med.

Designprincipper

Tilgængelig

Hver komponent tager udgangspunkt i semantisk HTML. ARIA lægges kun oven på, hvor HTML alene ikke kan udtrykke mønstret. Komponenterne sigter mod WCAG 2.2 AAA – farver, afstand, fokus og tastaturnavigation tages alle i betragtning.

Sammensættelig

Lily foretrækker små komponenter med ét formål, der passer sammen. Sammensatte mønstre går igen igen:

  • Nav → List → ListItem – til brødkrummer, indholdsfortegnelser, harmonikamenuer, træmenuer og sidetal
  • Form → Field → Input – til alle formularlayouts med etiketter, hjælpetekster og fejl
  • Table → Head/Body/Foot → Row → Data – til tabeller, kalendere, Gantt-diagrammer og kanbantavler
  • Bar → BarButton – til værktøjslinjer, fanelinjer, opgavelinjer, handlingslinjer og menulinjer
  • Picker → PickerButton – til farvevælgere, vurderingsvælgere og temavælgere

Kan internationaliseres

Ikke en eneste brugervendt streng er hårdkodet. Etiketter, pladsholdere, fejlmeddelelser og knaptekster er alle parametre. Sæt dit eget oversættelsessystem ind, så taler Lily ethvert sprog, du gør.

Hovedløs

Hovedløse komponenter har ingen CSS, ingen <style> -blokke og ingen designtokens, som du ikke selv har valgt. De udstiller ét enkelt klassenavn i kebab-case på hvert rodelement, så du kan målrette dem, som du vil – semantisk CSS, Tailwind, CSS-in-JS, det er op til dig.

Færdige eksempler

Eksempelapps viser, hvordan komponenterne stilles til rigtig brug – hvilke designtokens der skal sættes, hvilke varianter der skal tilføjes, og hvordan sider sammensættes. De er fuldgyldige SvelteKit-, Next.js-, Nuxt-, Blazor- og Eleventy-apps, ikke blot sandkasser.

Inspirationskilder

Lily henter mønstre og sprog fra en bevidst bred samling designsystemer:

Licens

Lily har flere licenser: BSD, MIT, Apache-2.0, GPL-2.0 eller GPL-3.0. Vælg den licens, der passer til dit projekt. Hvis ingen af dem fungerer, så tag kontakt.

Kontakt

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

Har du fundet en fejl, har du en idé, eller vil du bidrage med en komponent? Opret en issue eller en pull request på GitHub.

Status: Lily er helt nyt arbejde, og vi byder samarbejde, vejledning og feedback velkommen. Tingene vil ændre sig og udvikle sig.