ما هو Lily؟
نظام تصميم مجاني ومفتوح المصدر يضع إمكانية الوصول أولًا، يلاقيك حيث تكتب الشيفرة، ويبتعد عن طريقك حين لا تحتاج إليه.
النسخة المختصرة
Lily هو فهرس من مكوّنات الويب، يُنفَّذ كل منها بثماني نكهات headless (HTML وSvelte وReact وVue وAngular وBlazor وNunjucks وWeb Components)، إضافةً إلى مجموعة من تطبيقات الأمثلة الكاملة التي توضح كيفية تنسيقها.
لا تحتوي النسخ headless على أي 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 أي لغة تتحدثها.
Headless
ليس في المكوّنات headless أي CSS، ولا كتل <style>، ولا رموز تصميم لم تختَرها. وتكشف اسم فئة واحدًا بصيغة kebab-case على كل عنصر جذر لتستهدفها كما تشاء: CSS دلالي أو Tailwind أو CSS-in-JS، القرار لك.
أمثلة متكاملة
تُظهر تطبيقات الأمثلة كيفية تنسيق المكوّنات للاستخدام الفعلي: أي رموز تصميم تُضبط، وأي تنويعات تُضاف، وكيف تُركَّب الصفحات. وهي تطبيقات كاملة بـ SvelteKit وNext.js وNuxt وBlazor وEleventy، وليست مجرد بيئات تجريبية.
مصادر الإلهام
يستمد Lily أنماطه ولغته من مجموعة واسعة عن قصد من أنظمة التصميم:
- نظام تصميم NHS UK
- نظام تصميم GOV.UK
- نظام تصميم الويب الأمريكي (USWDS)
- نظام تصميم ONSdigital
- Design System AU (الحكومة الأسترالية)
- Mozilla Protocol
- Adobe Spectrum
- Ant Design
- Wonderflow Wanda
- DaisyUI
- shadcn/ui
- مكوّنات رويترز الرسومية
الترخيص
Lily متعدد التراخيص بموجب BSD أو MIT أو Apache-2.0 أو GPL-2.0 أو GPL-3.0. اختر الترخيص الذي يناسب مشروعك. وإن لم يناسبك أي منها فتواصل معنا.
التواصل
قائد المشروع: Joel Parker Henderson — joel@joelparkerhenderson.com.
هل وجدت خللًا، أو لديك فكرة، أو تريد المساهمة بمكوّن؟ افتح مشكلة (issue) أو طلب دمج (pull request) على GitHub.
الحالة: Lily عمل جديد تمامًا، ونرحب بالتعاون والإرشاد والملاحظات. ستتغير الأمور وتتطور.