เหตุผลที่ควรเลือก Lily

เริ่มจากการออกแบบของคุณ

ทีมของคุณรู้อยู่แล้วว่าผลิตภัณฑ์ควรมีหน้าตาอย่างไร Lily เริ่มจากจุดนั้นพอดี: ให้ส่วนที่ทำให้ถูกต้องได้ยากจริง ๆ และมีค่าใช้จ่ายสูงหากต้องทำใหม่ — องค์ประกอบเชิงความหมายที่ถูกต้อง สถานะของ ARIA ข้อตกลงด้านแป้นพิมพ์ การจัดการโฟกัส — และปล่อยให้ทุกการตัดสินใจด้านภาพเป็นของคุณอย่างเต็มที่และสนุกสนาน CSS ของคุณคือหน้าตาของระบบการออกแบบตั้งแต่วันแรก

เพราะทุกคอมโพเนนต์มีคลาสฮุกที่คงที่และโครงสร้างล้วน ๆ สไตล์ของคุณจึงเป็นของคุณอย่างสะอาดตลอดทุกการอัปเกรด — และการเข้าถึงที่อยู่เบื้องล่างก็ทำงานต่อไปทุกเวอร์ชัน

สิ่งที่ Lily ให้คำมั่น

• เข้าถึงได้โดยค่าเริ่มต้น WCAG 2.2 AAA คือเป้าหมายของทุกคอมโพเนนต์ รูปแบบต่าง ๆ เป็นไปตาม WAI-ARIA Authoring Practices ทุกคอมโพเนนต์ที่โต้ตอบได้ใช้แป้นพิมพ์ได้ตามข้อตกลงที่มีเอกสารกำกับ และแอปตัวอย่างรักษาเส้นฐาน axe-core ที่สะอาด
• รองรับหลายภาษาโดยการออกแบบ ทุกสตริงที่ผู้ใช้เห็น — ป้ายกำกับ ข้อผิดพลาด และประกาศทุกอัน — เป็น prop ที่มีชื่อคงที่ในทุกเฟรมเวิร์ก การแปลจึงไหลลื่นโดยธรรมชาติ RTL และข้อความสองทิศทางสืบทอดจาก dir ของคุณ คอมโพเนนต์ที่รับรู้ภาษาและพื้นที่จะรับภาษาเป็น prop เสมอและระบุอย่างชัดเจน
• หนึ่งแคตตาล็อก แปดเฟรมเวิร์ก คอมโพเนนต์ชุดเดียวกัน 571 ตัว (536 ตัวเป็น Web Components แบบเนทีฟ) พร้อมคลาสฮุกและแนวทางของ prop เดียวกันใน 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 ประเทศ แต่ละตัวมีเอกสารระบุรูปแบบและอัลกอริทึมการตรวจสอบ
• องค์ประกอบพื้นฐานสำหรับงานบรรณาธิการและ scrollytelling ดัดแปลงจาก Reuters Graphics — เลย์เอาต์บทความ สกรอลเลอร์ ไทม์ไลน์ แผนที่แบบไทล์
• ตัวช่วยตัวเลือก — แพ็กเกจเล็ก ๆ ที่ดูแลหนึ่งการโต้ตอบตั้งแต่ต้นจนจบ: การสลับธีม (พร้อมการโหลดสไตล์ชีตขณะรันไทม์) ภาษา ขนาดข้อความ การลดการเคลื่อนไหว การค้นหา ลิงก์หน้า การแชร์ และการป้อนวันที่และเวลา แต่ละตัวเป็นปุ่มไอคอนแบบ headless ที่เปิดป๊อปอัป — ไม่ใช่ <select> แบบเนทีฟ — พร้อมการเก็บค่าถาวรและความปลอดภัยต่อ SSR ในตัว

ธีมสำหรับภาครัฐ พร้อมใช้ทันที

Lily มาพร้อมธีมอ้างอิงแบบอิสระ 57 ธีมที่มุ่งเป้าไปที่คลาสฮุกโดยตรง: NHS England, NHS Scotland และ NHS Wales (แต่ละแห่งมีทั้งรุ่นสำหรับผู้ป่วยและสำหรับผู้ปฏิบัติงาน) GOV.UK, USWDS, จานสีที่ได้แรงบันดาลใจจาก Adobe Spectrum และ Mozilla Protocol และชุดธีมสว่างและมืดอเนกประสงค์ เพียงลิงก์สไตล์ชีตเดียว หน้าตาระดับหน่วยงานรัฐก็เปิดใช้งาน ตัวช่วย theme-picker สลับธีมเหล่านี้ขณะรันไทม์

Lily เทียบกับที่อื่นอย่างไร

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

ใครอยู่เบื้องหลัง

Lily เป็นโครงการโอเพนซอร์สอิสระที่ยังใหม่และยินดีรับความร่วมมือ คำแนะนำ และข้อเสนอแนะ — ดู เกี่ยวกับ สำหรับเรื่องราวและแหล่งแรงบันดาลใจ ทุกอย่าง — ข้อกำหนด การทดสอบ แผนงาน แม้แต่เครื่องมือตรวจสอบ — เปิดเผยอยู่ที่ github.com/LilyDesignSystem.

ช่วยให้ Lily เติบโต

หาก Lily มีประโยชน์ต่อคุณ สิ่งที่มีค่าที่สุดที่คุณทำได้คือ:

• กดดาวและแชร์ กดดาวให้กับ รีโพหลัก และแสดง แคตตาล็อก ให้เพื่อนร่วมงานดู — การรับรู้คือทรัพยากรที่หายากที่สุดของโครงการที่ยังใหม่
• สร้างอะไรสักอย่างแล้วบอกเรา รายงานการใช้งานจริง — อะไรได้ผล อะไรที่ทำให้ราบรื่นกว่านี้ได้ — กำหนดแผนงานได้มากกว่าสิ่งอื่นใด
• ตรวจสอบการเข้าถึง การทดสอบด้วยโปรแกรมอ่านหน้าจอ (VoiceOver, NVDA, JAWS) บน แอปตัวอย่าง มีค่าดั่งทองคำ แจ้งสิ่งที่คุณพบมาได้เลย
• สมทบธีมหรือคำแปล ทั้งสองอย่างเป็นการสมทบครั้งแรกที่ครบในตัวและมีขอบเขตชัดเจน
• แบ่งปันสิ่งที่คุณพบ พร้อมขั้นตอนทำซ้ำแบบน้อยที่สุด ที่รีโพซิทอรี GitHub หรืออีเมลถึง joel@joelparkerhenderson.com.