Lily 係乜嘢?

簡單講

Lily 係一個 網頁元件嘅目錄,每個元件都有八種無頭版本(HTML、Svelte、React、Vue、Angular、Blazor、Nunjucks 同 Web Components),另外仲有一套功能齊全嘅範例應用程式,示範點樣加上樣式。

無頭版本附帶 零 CSS。佢哋提供語義化 HTML、ARIA 角色同狀態、鍵盤支援,同埋對國際化友善嘅屬性。視覺設計由你自己帶。

設計原則

無障礙

每個元件都由語義化 HTML 開始。淨係喺 HTML 本身表達唔到模式嘅時候先加 ARIA。元件嘅目標係 WCAG 2.2 AAA — 顏色、間距、焦點同鍵盤導覽全部都有考慮。

可組合

Lily 偏好細細個、單一用途、可以扣埋一齊嘅元件。複合模式不斷重複出現:

• Nav → List → ListItem — 用於麵包屑、內容列表、摺疊選單、樹狀選單同分頁
• Form → Field → Input — 用於任何有標籤、提示同錯誤嘅表單版面
• Table → Head/Body/Foot → Row → Data — 用於表格、日曆、甘特圖同看板
• Bar → BarButton — 用於工具列、分頁列、工作列、動作列同選單列
• Picker → PickerButton — 用於顏色選擇器、評分選擇器、主題選擇器

可國際化

冇一個使用者睇到嘅字串係寫死嘅。標籤、佔位文字、錯誤訊息、按鈕文字 — 全部都係參數。放入你自己嘅翻譯系統,Lily 就會講你講嘅任何語言。

無頭

無頭元件冇 CSS,冇 <style> 區塊,亦冇你冇揀過嘅設計令牌。佢哋喺每個根元素上公開一個 kebab-case 類別名,等你可以照自己意思去針對 — 語義化 CSS、Tailwind、CSS-in-JS,由你揀。

功能齊全嘅範例

範例應用程式示範點樣為真實使用去加上元件樣式 — 要設定咩設計令牌、加咩變體、點樣組合頁面。佢哋係完整嘅 SvelteKit、Next.js、Nuxt、Blazor 同 Eleventy 應用程式,唔係淨係沙盒。

靈感來源

Lily 從一批特意揀得好廣泛嘅設計系統入面汲取模式同語言:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU(澳洲政府)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• 路透社圖像元件

授權

Lily 採用多重授權,包括 BSD、MIT、Apache-2.0、GPL-2.0 或 GPL-3.0。揀啱你項目嘅授權。如果全部都唔啱,請聯絡我哋。

聯絡

項目負責人:Joel Parker Henderson — joel@joelparkerhenderson.com.

發現咗錯誤、有諗頭、想貢獻元件?請喺 GitHub 開 issue 或 pull request.