Lily Design System™

Hvað er Lily?

Ókeypis, opið og aðgengi-fyrst hönnunarkerfi sem mætir þér þar sem þú skrifar kóða — og víkur úr vegi þegar þú þarft ekki á því að halda.

Stutta útgáfan

Lily er safn vefíhluta, hver útfærður í átta höfuðlausum útgáfum (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks og Web Components) ásamt safni fullbúinna dæmaforrita sem sýna hvernig á að stíla þá.

Höfuðlausu útgáfurnar innihalda ekkert CSS. Þær gefa þér merkingarfræðilegt HTML, ARIA-hlutverk og -stöður, lyklaborðsstuðning og eiginleika sem henta alþjóðavæðingu. Þú sérð um útlitið.

Hönnunarreglur

Aðgengilegt

Hver íhlutur byrjar á merkingarfræðilegu HTML. ARIA er aðeins bætt við þar sem HTML eitt og sér getur ekki lýst mynstrinu. Íhlutirnir miða við WCAG 2.2 AAA — litir, bil, fókus og lyklaborðsleiðsögn eru öll höfð í huga.

Samsetjanlegt

Lily kýs litla íhluti með eitt hlutverk sem smella saman. Samsett mynstur birtast aftur og aftur:

  • Nav → List → ListItem — fyrir brauðmola, efnisyfirlit, harmonikkuvalmyndir, trévalmyndir og blaðsíðuskiptingu
  • Form → Field → Input — fyrir hvaða eyðublaðsuppsetningu sem er með merkimiðum, vísbendingum og villum
  • Table → Head/Body/Foot → Row → Data — fyrir töflur, dagatöl, Gantt-töflur og kanban-töflur
  • Bar → BarButton — fyrir verkfærastikur, flipastikur, verkstikur, aðgerðastikur og valmyndastikur
  • Picker → PickerButton — fyrir litaveljara, einkunnaveljara, þemaveljara

Alþjóðavæðanlegt

Enginn texti sem notandinn sér er harðkóðaður. Merkimiðar, staðgengiltexti, villuskilaboð, hnappatexti — allt eru þetta færibreytur. Notaðu þitt eigið þýðingarkerfi og Lily talar hvaða tungumál sem þú talar.

Höfuðlaust

Höfuðlausir íhlutir hafa ekkert CSS, engar <style> blokkir og engin hönnunargildi sem þú valdir ekki sjálf(ur). Þeir birta eitt kebab-case klasaheiti á hverjum rótarþætti svo þú getir miðað á þá eins og þér hentar — merkingarfræðilegt CSS, Tailwind, CSS-in-JS, þitt er valið.

Fullbúin dæmi

Dæmaforritin sýna hvernig á að stíla íhlutina fyrir raunverulega notkun — hvaða hönnunargildi á að stilla, hvaða afbrigðum á að bæta við og hvernig á að setja saman síður. Þau eru fullgild SvelteKit-, Next.js-, Nuxt-, Blazor- og Eleventy-forrit, ekki bara tilraunasvæði.

Innblástur

Lily sækir mynstur og orðalag í viljandi breiðan hóp hönnunarkerfa:

Leyfi

Lily er með mörg leyfi, þar á meðal BSD, MIT, Apache-2.0, GPL-2.0 eða GPL-3.0. Veldu það leyfi sem hentar verkefninu þínu. Ef ekkert þeirra gengur, hafðu samband.

Samband

Verkefnisstjóri: Joel Parker Henderson — joel@joelparkerhenderson.com.

Fannstu villu, ertu með hugmynd, viltu leggja til íhlut? Opnaðu vandamál eða sameiningarbeiðni á GitHub.

Staða: Lily er glænýtt verk og við bjóðum samstarf, leiðsögn og endurgjöf velkomin. Hlutirnir munu hreyfast og þróast.