Lily คืออะไร?

สรุปสั้น ๆ

Lily คือแคตตาล็อกของ เว็บคอมโพเนนต์ ซึ่งแต่ละตัวถูกสร้างขึ้นในแปดรูปแบบแบบ headless (HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks และ Web Components) พร้อมชุดแอปตัวอย่างที่ครบถ้วนซึ่งแสดงวิธีจัดสไตล์

เวอร์ชัน headless มาพร้อม CSS เป็นศูนย์ โดยให้ HTML เชิงความหมาย บทบาทและสถานะของ ARIA การรองรับแป้นพิมพ์ และ props ที่เหมาะกับการรองรับหลายภาษา ส่วนการออกแบบด้านภาพเป็นหน้าที่ของคุณ

หลักการออกแบบ

เข้าถึงได้

ทุกคอมโพเนนต์เริ่มจาก HTML เชิงความหมาย ARIA จะถูกเพิ่มเข้ามาเฉพาะที่ HTML เพียงอย่างเดียวไม่สามารถแสดงรูปแบบนั้นได้ คอมโพเนนต์มุ่งเป้าไปที่ WCAG 2.2 AAA — สี ระยะห่าง โฟกัส และการนำทางด้วยแป้นพิมพ์ ล้วนได้รับการพิจารณา

ประกอบเข้าด้วยกันได้

Lily ชอบคอมโพเนนต์ขนาดเล็กที่มีจุดประสงค์เดียวและต่อเข้ากันได้พอดี รูปแบบเชิงประกอบปรากฏซ้ำแล้วซ้ำอีก:

• Nav → List → ListItem — สำหรับเส้นทางนำทาง รายการสารบัญ เมนูแอคคอร์เดียน เมนูแบบต้นไม้ และการแบ่งหน้า
• Form → Field → Input — สำหรับเลย์เอาต์ฟอร์มทุกแบบที่มีป้ายกำกับ คำแนะนำ และข้อผิดพลาด
• Table → Head/Body/Foot → Row → Data — สำหรับตาราง ปฏิทิน แผนภูมิแกนต์ และกระดานคัมบัง
• Bar → BarButton — สำหรับแถบเครื่องมือ แถบแท็บ แถบงาน แถบการกระทำ และแถบเมนู
• Picker → PickerButton — สำหรับตัวเลือกสี ตัวเลือกคะแนน ตัวเลือกธีม

รองรับหลายภาษา

ไม่มีสตริงที่ผู้ใช้เห็นแม้แต่ตัวเดียวที่เขียนตายตัวไว้ในโค้ด ป้ายกำกับ ตัวยึดตำแหน่ง ข้อความแสดงข้อผิดพลาด ข้อความบนปุ่ม ล้วนเป็นพารามิเตอร์ ใส่ระบบแปลภาษาของคุณเข้ามา แล้ว Lily จะพูดภาษาที่คุณพูด

Headless

คอมโพเนนต์แบบ headless มี ไม่มี 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 (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

สัญญาอนุญาต

Lily ใช้ได้หลายสัญญาอนุญาต ภายใต้ BSD, MIT, Apache-2.0, GPL-2.0 หรือ GPL-3.0 เลือกอันที่เหมาะกับโปรเจกต์ของคุณ หากไม่มีอันใดเหมาะ โปรดติดต่อเรา

ติดต่อ

หัวหน้าโครงการ: Joel Parker Henderson — joel@joelparkerhenderson.com.

พบข้อบกพร่อง มีไอเดีย หรืออยากสมทบคอมโพเนนต์ใช่ไหม เปิด issue หรือ pull request ได้ที่ GitHub.