Lily Design System™

Mi az a Lily?

Ingyenes, nyílt forráskódú, a hozzáférhetőséget előtérbe helyező tervezési rendszer, amely ott találkozik veled, ahol kódolsz – és félreáll, ha nincs rá szükséged.

A rövid változat

A Lily a webkomponensek katalógusa, amelyek mindegyike nyolc fej nélküli változatban valósul meg (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks és Web Components), plusz egy sor kész példaalkalmazás, amely megmutatja, hogyan stílusozhatók.

A fej nélküli verziók nulla CSS-t tartalmaznak. Szemantikus HTML-t, ARIA-szerepköröket és -állapotokat, billentyűzettámogatást és az nemzetköziesítésre alkalmas tulajdonságokat adnak. A vizuális tervezést te hozod.

Tervezési alapelvek

Hozzáférhető

Minden komponens szemantikus HTML-ből indul ki. Az ARIA csak ott kerül rá, ahol a HTML önmagában nem tudja kifejezni a mintát. A komponensek célja a WCAG 2.2 AAA szint – a színeket, a térközöket, a fókuszt és a billentyűzetes navigációt mind figyelembe vesszük.

Összeállítható

A Lily a kicsi, egycélú, egymásba illeszkedő komponenseket kedveli. Az összetett minták újra és újra megjelennek:

  • Nav → List → ListItem – morzsamenükhöz, tartalomjegyzékekhez, harmonikamenükhöz, fa menükhöz és lapozáshoz
  • Form → Field → Input – bármilyen címkékkel, súgókkal és hibákkal ellátott űrlapelrendezéshez
  • Table → Head/Body/Foot → Row → Data – táblázatokhoz, naptárakhoz, Gantt-diagramokhoz és kanban-táblákhoz
  • Bar → BarButton – eszköztárakhoz, lapsávokhoz, feladatsávokhoz, műveletsávokhoz és menüsávokhoz
  • Picker → PickerButton – színválasztókhoz, értékelésválasztókhoz, témaválasztókhoz

Nemzetköziesíthető

Egyetlen, a felhasználónak látható karakterlánc sincs beégetve. A címkék, helyőrzők, hibaüzenetek, gombfeliratok – mind paraméterek. Kapcsold be a saját fordítórendszeredet, és a Lily bármilyen nyelven beszél, amelyiken te.

Fej nélküli

A fej nélküli komponenseknek nincs CSS-ük, nincsenek <style> -blokkjaik, és nincsenek olyan tervezési tokenek, amelyeket nem te választottál. Minden gyökérelemen egyetlen kebab-case osztálynevet tesznek elérhetővé, így úgy célozhatod őket, ahogy akarod – szemantikus CSS, Tailwind, CSS-in-JS, a te döntésed.

Kész példák

A példaalkalmazások megmutatják, hogyan stílusozd a komponenseket valós használatra – milyen tervezési tokeneket állíts be, milyen változatokat adj hozzá, hogyan állíts össze oldalakat. Teljes SvelteKit-, Next.js-, Nuxt-, Blazor- és Eleventy-alkalmazások, nem csupán homokozók.

Inspirációs források

A Lily mintákat és nyelvezetet vesz át a tervezési rendszerek szándékosan széles köréből:

Licenc

A Lily többes licenc alatt áll: BSD, MIT, Apache-2.0, GPL-2.0 vagy GPL-3.0. Válaszd a projektedhez illőt. Ha egyik sem megfelelő, vedd fel velünk a kapcsolatot.

Kapcsolat

Projektvezető: Joel Parker Henderson – joel@joelparkerhenderson.com.

Hibát találtál, van egy ötleted, vagy komponenssel szeretnél hozzájárulni? Nyiss egy issue-t vagy pull requestet itt: GitHub.

Állapot: A Lily vadonatúj munka, és szívesen fogadjuk az együttműködést, az útmutatást és a visszajelzést. A dolgok változni és fejlődni fognak.