揀 Lily 嘅理由

由你嘅設計開始

你嘅團隊已經知道產品應該係咩樣。Lily 正正由嗰度開始:佢提供真係難做啱同重做好貴嘅部分 — 正確嘅語義元素、ARIA 狀態、鍵盤合約、焦點管理 — 而每一個視覺決定都完全、開心咁屬於你。你嘅 CSS 就係設計系統嘅外觀,由第一日開始。

因為每個元件都帶有穩定嘅類別掛鉤同純粹嘅結構,你嘅樣式喺每次升級之後都清清楚楚屬於你 — 而底下嘅無障礙功能亦會一版一版咁繼續運作。

Lily 承諾啲乜

• 預設無障礙。 WCAG 2.2 AAA 係每個元件嘅目標。模式跟隨 WAI-ARIA Authoring Practices;每個互動元件都可以用鍵盤操作,有文件記錄嘅合約;範例應用程式保持乾淨嘅 axe-core 基線。
• 設計上就可國際化。 每個使用者睇到嘅字串 — 每個標籤、錯誤同公告 — 都係跨框架名稱穩定嘅屬性,所以翻譯自然流動。RTL 同雙向文字繼承自你嘅 dir。感知地區設定嘅元件將地區設定當作屬性,永遠係明確指定。
• 一個目錄,八個框架。 同樣嘅 571 個元件(536 個係原生 Web Components),喺 HTML、Svelte、React、Vue、Angular、Blazor、Nunjucks 同 Web Components 入面有相同嘅類別掛鉤同屬性慣例。你嘅 CSS 同團隊嘅知識可以跨技術棧轉移。
• 唔揀 CSS 策略。 每個元件根元素一個穩定嘅 kebab-case 類別。語義化 CSS、Tailwind 工具類、CSS-in-JS,或者 57 個現成主題之一 — Lily 全部歡迎,並且優雅咁讓路。
• 永遠免費,由你話事。 開源授權由你揀:BSD、MIT、Apache-2.0、GPL-2.0 或 GPL-3.0。冇專業版、冇席位授權、冇遙測。

喺重要嘅地方有深度

除咗一般嘅按鈕同對話框,呢個目錄伸展得比大部分都遠:

• 公共部門模式 研究自 NHS UK、GOV.UK、USWDS 同 ONS 設計系統 — 錯誤摘要、警告提示框、摘要列表、階段橫幅、跳過連結。
• 140 個國民個人識別碼元件 涵蓋 50 多個國家嘅醫療、國民身份證、稅務同護照識別碼,每個都記錄咗佢嘅格式同驗證演算法。
• 編輯同捲動敘事原語 改編自路透社圖像 — 文章版面、捲動器、時間線、圖磚地圖。
• 選擇器輔助工具 — 細細個嘅套件,各自由頭到尾擁有一個互動:主題切換(連執行時載入樣式表)、語言、文字大細、減少動態、搜尋、頁面連結、分享,同日期時間輸入。每個都係無頭圖示按鈕,打開彈出視窗 — 唔係原生嘅 <select> — 內置持久性同 SSR 安全。

為公共部門而設嘅主題,開箱即用

Lily 附帶 57 個獨立嘅參考主題,直接針對佢嘅類別掛鉤:NHS England、NHS Scotland 同 NHS Wales(各有面向病人同面向從業員嘅版本)、GOV.UK、USWDS、受 Adobe Spectrum 同 Mozilla Protocol 啟發嘅配色,以及一組通用嘅淺色同深色主題。連結一份樣式表,政府級外觀就即時啟用;輔助工具 theme-picker 會喺執行時切換佢哋。

Lily 同其他系統比較

我哋保持誠實、逐個元件嘅 同其他設計系統嘅比較 — 有樣式同無頭、商業同公共部門。如果另一個函式庫更啱你,比較會顯示出嚟;Lily 向全部學習,並且公開引用佢嘅靈感來源。

背後係邊個

Lily 係一個年輕嘅獨立開源項目,歡迎協作、指引同意見 — 睇 關於 了解故事同靈感來源。一切 — 規格、測試、路線圖,甚至審核工具 — 都公開喺 github.com/LilyDesignSystem.

幫 Lily 成長

如果 Lily 對你有用,你可以做嘅最有價值嘅事:

• 畀個星同分享。 畀個星 主要倉庫 同帶同事睇吓 目錄 — 知名度係年輕項目最缺乏嘅資源。
• 整啲嘢然後話畀我哋知。 真實世界嘅使用報告 — 邊啲得、邊啲可以更順暢 — 比任何嘢都更塑造路線圖。
• 審核無障礙。 用螢幕閱讀器(VoiceOver、NVDA、JAWS)檢查 範例應用程式 價值連城;將你發現嘅提交上嚟。
• 貢獻主題或翻譯。 兩樣都係獨立、範圍清晰嘅首次貢獻。
• 分享你發現嘅嘢,附上最小重現, 喺 GitHub 倉庫,或者電郵至 joel@joelparkerhenderson.com.