Lily Design System™

Wat ass Lily?

E gratis Open-Source-Designsystem, dat d’Zougänglechkeet an de Mëttelpunkt stellt: et trëfft Iech do, wou Dir Code schreift, a geet Iech aus dem Wee, wann Dir et net braucht.

Déi kuerz Versioun

Lily ass e Katalog vu Webkomponenten, vun deenen all eenzel an aacht headless Varianten (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks a Web Components) ëmgesat ass, plus eng Rei kompletter Beispillapplikatiounen, déi weisen, wéi een se stylt.

D’Headless-Versioune kommen mat null CSS. Si ginn Iech semantescht HTML, ARIA-Rollen an -Zoustänn, Tastaturënnerstëtzung an Eegenschafte fir d’Internationaliséierung. Dat visuellt Design bréngt Dir mat.

Designprinzipien

Zougänglech

All Komponent fänkt mat semantesche HTML un. ARIA kënnt just dobäi, wou HTML eleng d’Muster net ausdrécke kann. D’Komponente ziilen op WCAG 2.2 AAA — Faarwen, Ofstänn, Fokus an Tastaturnavigatioun ginn all berécksiichtegt.

Kombinéierbar

Lily bevorzugt kleng Komponenten mat engem eenzege Zweck, déi ineneragräifen. Zesummegesate Muster dauche ëmmer erëm op:

  • Nav → List → ListItem — fir Brotkrumme-Pied, Inhaltslëschten, Akkordeonmenüen, Beemmenüen a Säitenummeréierung
  • Form → Field → Input — fir all Formularlayout mat Etiketten, Hiweiser a Feeler
  • Table → Head/Body/Foot → Row → Data — fir Tabellen, Kalenneren, Gantt-Diagrammer a Kanban-Tafelen
  • Bar → BarButton — fir Geschirleisten, Tableisten, Aufgabeleisten, Aktiounsleisten a Menüleisten
  • Picker → PickerButton — fir Faarfwielers, Bewäertungswielers, Themewielers

Internationaliséierbar

Net eng eenzeg Zeechefolleg, déi de Benotzer gesäit, ass fest am Code geschriwwen. Etiketten, Platzhalter, Feelermeldungen, Knäppertext — alles sinn Parameteren. Verbannt Äert eegent Iwwersetzungssystem a Lily schwätzt all Sprooch, déi Dir schwätzt.

Headless

Headless-Komponenten hunn null CSS, keng <style> -Blöcke, keng Design-Tokens, déi Dir net selwer gewielt hutt. Si stellen eng eenzeg Klassennumm a Kebab-Case op all Wuerzelelement zur Verfügung, sou datt Dir se kënnt ugräifen, wéi Dir wëllt — semantescht CSS, Tailwind, CSS-in-JS, Är Entscheedung.

Kompletter Beispiller

D’Beispillapplikatiounen weisen, wéi een d’Komponente fir de richtege Gebrauch stylt — wéi eng Design-Tokens ee setzt, wéi eng Variatiounen ee bäifügt, wéi ee Säite kompoyéiert. Et sinn voll SvelteKit-, Next.js-, Nuxt-, Blazor- an Eleventy-Applikatiounen, net just Sandkëschten.

Inspiratiounsquellen

Lily hëlt Muster a Sprooch aus engem bewosst breede Set vu Designsystemer:

Lizenz

Lily huet méi Lizenzen: BSD, MIT, Apache-2.0, GPL-2.0 oder GPL-3.0. Wielt déi, déi bei Äre Projet passt. Wann keng passt, mellt Iech bei eis.

Kontakt

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

Fehler fonnt, eng Iddi, wëllt Dir eng Komponent bäisteieren? Maacht en Issue oder e Pull Request op GitHub.

Status: Lily ass brandneier Wierk, a mir begréissen Zesummenaarbecht, Orientéierung a Feedback. D’Saache wäerte sech änneren an entwéckelen.