Lily Design System™

Vad är Lily?

Ett gratis, tillgänglighetsfokuserat designsystem med öppen källkod som möter dig där du kodar – och håller sig undan när du inte behöver det.

Kort version

Lily är en katalog med webbkomponenter, var och en implementerad i åtta huvudlösa varianter (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks och Web Components) samt en uppsättning färdiga exempelappar som visar hur de kan formges.

De huvudlösa versionerna levereras med noll CSS. De ger dig semantisk HTML, ARIA-roller och -tillstånd, tangentbordsstöd och egenskaper som underlättar internationalisering. Du står för den visuella designen.

Designprinciper

Tillgänglig

Varje komponent utgår från semantisk HTML. ARIA läggs bara till där HTML ensamt inte kan uttrycka mönstret. Komponenterna siktar på WCAG 2.2 AAA – färger, avstånd, fokus och tangentbordsnavigering har alla beaktats.

Sammansättbar

Lily föredrar små komponenter med ett enda syfte som passar ihop. Sammansatta mönster återkommer gång på gång:

  • Nav → List → ListItem – för brödsmulor, innehållsförteckningar, dragspelsmenyer, trädmenyer och sidnumrering
  • Form → Field → Input – för alla formulärlayouter med etiketter, tips och fel
  • Table → Head/Body/Foot → Row → Data – för tabeller, kalendrar, Gantt-diagram och kanbantavlor
  • Bar → BarButton – för verktygsfält, flikfält, aktivitetsfält, åtgärdsfält och menyfält
  • Picker → PickerButton – för färgväljare, betygsväljare och temaväljare

Internationaliserbar

Inte en enda användarvänd sträng är hårdkodad. Etiketter, platshållare, felmeddelanden och knapptexter är alla parametrar. Koppla in ditt eget översättningssystem så talar Lily vilket språk du än gör.

Huvudlös

Huvudlösa komponenter har ingen CSS, inga <style> -block och inga designtokens du inte själv valt. De exponerar ett enda klassnamn i kebab-case på varje rotelement så att du kan rikta in dig på dem hur du vill – semantisk CSS, Tailwind, CSS-in-JS, du bestämmer.

Färdiga exempel

Exempelapparna visar hur komponenterna formges för verklig användning – vilka designtokens som ska sättas, vilka variationer som ska läggas till och hur sidor sätts ihop. De är fullständiga SvelteKit-, Next.js-, Nuxt-, Blazor- och Eleventy-appar, inte bara sandlådor.

Inspirationskällor

Lily hämtar mönster och språk från en medvetet bred uppsättning designsystem:

Licens

Lily har flera licenser: BSD, MIT, Apache-2.0, GPL-2.0 eller GPL-3.0. Välj den licens som passar ditt projekt. Fungerar ingen av dem, hör av dig.

Kontakt

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

Hittat en bugg, har du en idé eller vill du bidra med en komponent? Öppna ett ärende eller en pull request på GitHub.

Status: Lily är ett alldeles nytt arbete och vi välkomnar samarbete, vägledning och återkoppling. Saker kommer att förändras och utvecklas.