Lily Design System™

Was ist Lily?

Ein kostenloses, quelloffenes Designsystem mit Barrierefreiheit an erster Stelle, das Sie dort abholt, wo Sie programmieren – und Ihnen aus dem Weg geht, wenn Sie es nicht brauchen.

Die Kurzfassung

Lily ist ein Katalog von Webkomponenten, die jeweils in acht Headless-Varianten umgesetzt sind (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks und Web Components), dazu eine Reihe sofort einsetzbarer Beispiel-Apps, die zeigen, wie man sie gestaltet.

Die Headless-Versionen liefern null CSSaus. Sie bieten semantisches HTML, ARIA-Rollen und -Zustände, Tastaturunterstützung und für die Internationalisierung geeignete Props. Das visuelle Design bringen Sie mit.

Gestaltungsprinzipien

Barrierefrei

Jede Komponente beginnt bei semantischem HTML. ARIA kommt nur dort hinzu, wo HTML allein das Muster nicht ausdrücken kann. Die Komponenten zielen auf WCAG 2.2 AAA – Farben, Abstände, Fokus und Tastaturnavigation werden alle berücksichtigt.

Kombinierbar

Lily bevorzugt kleine Komponenten mit nur einem Zweck, die sich zusammenstecken lassen. Zusammengesetzte Muster tauchen immer wieder auf:

  • Nav → List → ListItem – für Brotkrumennavigation, Inhaltsverzeichnisse, Akkordeonmenüs, Baummenüs und Seitennummerierung
  • Form → Field → Input – für jedes Formularlayout mit Beschriftungen, Hinweisen und Fehlern
  • Table → Head/Body/Foot → Row → Data – für Tabellen, Kalender, Gantt-Diagramme und Kanban-Boards
  • Bar → BarButton – für Werkzeugleisten, Tab-Leisten, Taskleisten, Aktionsleisten und Menüleisten
  • Picker → PickerButton – für Farbwähler, Bewertungswähler und Themenwähler

Internationalisierbar

Keine einzige für Nutzer sichtbare Zeichenkette ist fest codiert. Beschriftungen, Platzhalter, Fehlermeldungen, Schaltflächentexte – alles sind Parameter. Binden Sie Ihr eigenes Übersetzungssystem ein, und Lily spricht jede Sprache, die Sie sprechen.

Headless

Headless-Komponenten haben kein CSS, keine <style> -Blöcke und keine Design-Tokens, die Sie nicht selbst gewählt haben. Sie stellen auf jedem Wurzelelement einen einzigen Klassennamen in Kebab-Case bereit, sodass Sie sie gestalten können, wie Sie möchten – semantisches CSS, Tailwind, CSS-in-JS, Ihre Entscheidung.

Sofort einsetzbare Beispiele

Die Beispiel-Apps zeigen, wie die Komponenten für den echten Einsatz gestaltet werden – welche Design-Tokens zu setzen sind, welche Varianten hinzukommen und wie man Seiten zusammensetzt. Es sind vollständige SvelteKit-, Next.js-, Nuxt-, Blazor- und Eleventy-Apps, nicht nur Sandkästen.

Inspirationsquellen

Lily übernimmt Muster und Sprache aus einer bewusst breit gewählten Gruppe von Designsystemen:

Lizenz

Lily ist mehrfach lizenziert unter BSD, MIT, Apache-2.0, GPL-2.0 oder GPL-3.0. Wählen Sie die Lizenz, die zu Ihrem Projekt passt. Falls keine davon passt, nehmen Sie Kontakt auf.

Kontakt

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

Einen Fehler gefunden, eine Idee oder eine Komponente beizutragen? Eröffnen Sie ein Issue oder einen Pull Request auf GitHub.

Status: Lily ist ganz neu, und wir freuen uns über Zusammenarbeit, Anleitung und Rückmeldungen. Vieles wird sich bewegen und weiterentwickeln.