Lily Design System™

Kas ir Lily?

Bezmaksas atvērtā koda dizaina sistēma, kas pieejamību liek pirmajā vietā: satiek jūs tur, kur rakstāt kodu, un atkāpjas, kad tā nav vajadzīga.

Īsumā

Lily ir tīmekļa komponentu katalogs, kura katra komponente ir īstenota astoņos bezgalvas variantos (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks un Web Components), kā arī gatavu paraugu lietotņu kopa, kas rāda, kā tās stilizēt.

Bezgalvas versijas piegādā ar nulle CSS. Tās sniedz semantisku HTML, ARIA lomas un stāvokļus, tastatūras atbalstu un īpašības, kas piemērotas internacionalizācijai. Vizuālo dizainu atnesat jūs.

Dizaina principi

Pieejams

Katra komponente sākas ar semantisku HTML. ARIA tiek pievienots tikai tur, kur ar HTML vien nepietiek, lai izteiktu paraugu. Komponentes mērķē uz WCAG 2.2 AAA — tiek ņemtas vērā krāsas, atstarpes, fokuss un navigācija ar tastatūru.

Salikams

Lily dod priekšroku mazām viena mērķa komponentēm, kas sakļaujas kopā. Saliktie paraugi atkārtojas atkal un atkal:

  • Nav → List → ListItem — navigācijas ceļiem, satura sarakstiem, akordeona izvēlnēm, koka izvēlnēm un lapošanai
  • Form → Field → Input — jebkuram veidlapas izkārtojumam ar etiķetēm, norādēm un kļūdām
  • Table → Head/Body/Foot → Row → Data — tabulām, kalendāriem, Ganta diagrammām un kanban tāfelēm
  • Bar → BarButton — rīkjoslām, ciļņu joslām, uzdevumu joslām, darbību joslām un izvēlņu joslām
  • Picker → PickerButton — krāsu atlasītājiem, vērtējuma atlasītājiem, tēmu atlasītājiem

Internacionalizējams

Neviena lietotājam redzama virkne nav iekodēta tieši kodā. Etiķetes, vietturi, kļūdu ziņojumi, pogu teksts — viss ir parametri. Pieslēdziet savu tulkošanas sistēmu, un Lily runā jebkurā valodā, kurā runājat jūs.

Bezgalvas

Bezgalvas komponentēm ir nulle CSS, nekādu <style> bloku, nekādu dizaina marķieru, kurus neesat izvēlējies. Tās atklāj vienu kebab-case klases nosaukumu katrā saknes elementā, lai jūs varētu tās mērķēt, kā vēlaties — semantisks CSS, Tailwind, CSS-in-JS, jūsu izvēle.

Gatavi piemēri

Paraugu lietotnes rāda, kā stilizēt komponentes reālai lietošanai — kādus dizaina marķierus iestatīt, kādus variantus pievienot, kā veidot lapas. Tās ir pilnvērtīgas SvelteKit, Next.js, Nuxt, Blazor un Eleventy lietotnes, ne tikai smilšu kastes.

Iedvesmas avoti

Lily smeļas paraugus un valodu no apzināti plašas dizaina sistēmu kopas:

Licence

Lily ir vairākas licences: BSD, MIT, Apache-2.0, GPL-2.0 vai GPL-3.0. Izvēlieties to, kas der jūsu projektam. Ja neder neviena, sazinieties ar mums.

Kontakti

Projekta vadītājs: Joel Parker Henderson — joel@joelparkerhenderson.com.

Atradāt kļūdu, ir ideja, vēlaties pievienot komponenti? Atveriet issue vai pull request vietnē GitHub.

Statuss: Lily ir pavisam jauns darbs, un mēs sveicam sadarbību, norādījumus un atsauksmes. Lietas mainīsies un attīstīsies.