Lily là gì?

Tóm tắt ngắn

Lily là một danh mục các thành phần web, mỗi thành phần được triển khai theo tám kiểu headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks và Web Components), cùng một bộ ứng dụng ví dụ đầy đủ cho thấy cách tạo kiểu cho chúng.

Các phiên bản headless được cung cấp với không có CSS nào. Chúng mang đến HTML ngữ nghĩa, vai trò và trạng thái ARIA, hỗ trợ bàn phím và các prop thân thiện với đa ngôn ngữ. Thiết kế hình ảnh là phần của bạn.

Nguyên tắc thiết kế

Dễ tiếp cận

Mỗi thành phần bắt đầu từ HTML ngữ nghĩa. ARIA chỉ được thêm vào ở những nơi HTML một mình không thể diễn đạt mẫu đó. Các thành phần hướng tới WCAG 2.2 AAA — màu sắc, khoảng cách, tiêu điểm và điều hướng bằng bàn phím đều được cân nhắc.

Có thể kết hợp

Lily ưu tiên các thành phần nhỏ, đơn mục đích, khớp vào nhau. Các mẫu ghép xuất hiện lặp đi lặp lại:

• Nav → List → ListItem — cho đường dẫn breadcrumb, danh sách mục lục, menu accordion, menu dạng cây và phân trang
• Form → Field → Input — cho mọi bố cục biểu mẫu có nhãn, gợi ý và lỗi
• Table → Head/Body/Foot → Row → Data — cho bảng, lịch, biểu đồ Gantt và bảng kanban
• Bar → BarButton — cho thanh công cụ, thanh tab, thanh tác vụ, thanh hành động và thanh menu
• Picker → PickerButton — cho bộ chọn màu, bộ chọn xếp hạng, bộ chọn giao diện

Có thể quốc tế hóa

Không một chuỗi nào hiển thị cho người dùng bị viết cứng trong mã. Nhãn, văn bản gợi ý, thông báo lỗi, chữ trên nút — tất cả đều là tham số. Gắn hệ thống dịch của bạn vào và Lily nói bất kỳ ngôn ngữ nào bạn nói.

Headless

Các thành phần headless không có CSS, không có khối <style> , không có token thiết kế nào bạn chưa chọn. Chúng chỉ phơi ra một tên lớp kebab-case duy nhất trên mỗi phần tử gốc để bạn nhắm tới theo cách bạn muốn — CSS ngữ nghĩa, Tailwind, CSS-in-JS, tùy bạn.

Ví dụ đầy đủ

Các ứng dụng ví dụ cho thấy cách tạo kiểu cho thành phần để dùng thực tế — nên đặt token thiết kế nào, thêm biến thể nào, ghép trang ra sao. Đó là các ứng dụng SvelteKit, Next.js, Nuxt, Blazor và Eleventy hoàn chỉnh, không chỉ là sân thử nghiệm.

Nguồn cảm hứng

Lily lấy các mẫu và ngôn ngữ từ một tập hợp hệ thống thiết kế được chọn rộng rãi có chủ ý:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

Giấy phép

Lily được cấp nhiều giấy phép theo BSD, MIT, Apache-2.0, GPL-2.0 hoặc GPL-3.0. Hãy chọn giấy phép phù hợp với dự án của bạn. Nếu không giấy phép nào phù hợp, hãy liên hệ với chúng tôi.

Liên hệ

Trưởng dự án: Joel Parker Henderson — joel@joelparkerhenderson.com.

Tìm thấy lỗi, có ý tưởng, muốn đóng góp một thành phần? Hãy mở issue hoặc pull request tại GitHub.