Lily Design System™

Mis on Lily?

Tasuta avatud lähtekoodiga disainisüsteem, kus juurdepääsetavus on esikohal – see kohtub sinuga seal, kus sa koodi kirjutad, ja astub kõrvale, kui sul seda vaja pole.

Lühidalt

Lily on veebikomponentide kataloog, mille iga komponent on realiseeritud kaheksas päisteta variandis (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks ja Web Components), pluss hulk valmis näiterakendusi, mis näitavad, kuidas neid kujundada.

Päisteta versioonid sisaldavad null CSS-i. Need annavad sulle semantilise HTML-i, ARIA rollid ja olekud, klaviatuuritoe ning rahvusvahelistamist toetavad atribuudid. Visuaalse kujunduse tood ise.

Disainipõhimõtted

Juurdepääsetav

Iga komponent lähtub semantilisest HTML-ist. ARIA lisatakse ainult seal, kus HTML üksi mustrit väljendada ei suuda. Komponendid taotlevad WCAG 2.2 AAA taset – värve, vahesid, fookust ja klaviatuurinavigatsiooni arvestatakse kõike.

Kombineeritav

Lily eelistab väikseid ühe eesmärgiga komponente, mis sobituvad kokku. Liitmustrid kordunud tuhandeid kordi:

  • Nav → List → ListItem – lisalehe teekondade, sisukordade, akordionmenüüde, puumenüüde ja lehekülgede jaoks
  • Form → Field → Input – mis tahes vormipaigutuse jaoks siltide, vihjete ja vigadega
  • Table → Head/Body/Foot → Row → Data – tabelite, kalendrite, Gantti diagrammide ja kanban-tahvlite jaoks
  • Bar → BarButton – tööriistaribade, vahekaardiribade, tegumiribade, toimingute ribade ja menüüribade jaoks
  • Picker → PickerButton – värvivalijate, hindamisvalijate ja teemavalijate jaoks

Rahvusvahelistatav

Mitte ainsatki kasutajale nähtavat stringi pole koodi kirjutatud. Sildid, kohatäited, veateated, nuppude tekstid – kõik on parameetrid. Ühenda oma tõlkesüsteem ja Lily räägib iga keelt, mida sinagi.

Päisteta

Päisteta komponentidel on ei mingit CSS-i, ei mingeid <style> -plokke ega disainitunnuseid, mida sa pole ise valinud. Need pakuvad igal juurelemendil ühte kebab-case klassinime, nii et saad neid sihtida, nagu soovid – semantiline CSS, Tailwind, CSS-in-JS, sinu otsus.

Valmis näited

Näiterakendused näitavad, kuidas komponente päriskasutuseks kujundada – milliseid disainitunnuseid seada, milliseid variatsioone lisada, kuidas lehti koostada. Need on täisväärtuslikud SvelteKit-, Next.js-, Nuxt-, Blazor- ja Eleventy-rakendused, mitte pelgalt liivakastid.

Inspiratsiooniallikad

Lily võtab mustreid ja keelt teadlikult laiast disainisüsteemide valikust:

Litsents

Lilyl on mitu litsentsi: BSD, MIT, Apache-2.0, GPL-2.0 või GPL-3.0. Vali see, mis sinu projektile sobib. Kui ükski ei sobi, võta ühendust.

Kontakt

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

Leidsid vea, sul on idee või tahad komponendi panustada? Ava teema või tõmbepäring aadressil GitHub.

Staatus: Lily on täiesti uus töö ning me tervitame koostööd, juhiseid ja tagasisidet. Asjad liiguvad ja arenevad.