Lily چیست؟
یک سامانهٔ طراحی رایگان، متن‌باز و دسترس‌پذیری‌محور که در جایی که کد می‌نویسید با شما همراه می‌شود — و وقتی به آن نیاز ندارید از سر راهتان کنار می‌رود.
نسخهٔ کوتاه
Lily فهرستی از مؤلفه‌های وب است که هر کدام در هشت گونهٔ بدون‌سر (HTML، Svelte، React، Vue، Angular، Blazor، Nunjucks و Web Components) پیاده‌سازی شده‌اند، به‌علاوهٔ مجموعه‌ای از برنامه‌های نمونهٔ کامل که نشان می‌دهند چگونه آن‌ها را سبک‌دهی کنید.
نسخه‌های بدون‌سر با صفر CSS عرضه می‌شوند. آن‌ها HTML معنایی، نقش‌ها و حالت‌های ARIA، پشتیبانی صفحه‌کلید و ویژگی‌هایی سازگار با بین‌المللی‌سازی به شما می‌دهند. طراحی بصری را شما می‌آورید.
اصول طراحی
دسترس‌پذیر
هر مؤلفه از 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 هر زبانی را که شما صحبت می‌کنید صحبت می‌کند.
بدون‌سر
مؤلفه‌های بدون‌سر هیچ 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.
وضعیت: Lily کاری کاملاً نو است و ما از همکاری، راهنمایی و بازخورد استقبال می‌کنیم. چیزها تغییر خواهند کرد و تکامل خواهند یافت.