انتقل إلى المحتوى
تجريبية

آرابيسك جديد، وهو قيد التطوير المستمر. هذا هو الإصدار 0.9.0. راجع سجل التغييرات.

آرابيسك

نظام تصميم بنته معامل آرابيسك (يُفتح في تبويب جديد) ليكون المعيار لكل منتج نصنعه. مكتوب للاتجاهين، من اليسار إلى اليمين ومن اليمين إلى اليسار على السواء، ومصمم لإنجاز المهام في أقل عدد من الخطوات، مع وضوح كل أثر.

هذه البلاطة هي علامتنا. كل ما حولها ينبع من القاعدة نفسها.

ما الغاية منه

أربعة أمور يجب أن يُحسنها كل منتج نصنعه، مبنية فيه لتكون صحيحة من الأصل.

سهل الوصول، ومقيس

‏WCAG 2.2 AA حدًّا أدنى. يُقاس كل زوج ألوان في كل بناء، في المظهرين، ويفشل البناء إن قصّر أحدها.

من اليمين إلى اليسار منذ البداية

كل عنصر مكتوب للعربية كما للإنجليزية: خصائص منطقية، وأيقونات معكوسة، وخطوط عربية، وأرقام هندية عربية حين تُختار.

أقل عدد من الخطوات

تقول الإجراءات ما تفعله، وتظهر كل عاقبة قبلُ وأثناءً وبعدُ: ما الذي سيتغير أيضًا، وما يُحفظ الآن، وما أُعيد إلى مكانه.

CSS بسيط، وReact

رموز في صورة خصائص مخصّصة، وHTML بسيط بأصناف: بلا إطار عمل، ولا اعتمادية وقت تشغيل. ومكوّنات React تكتب الترميز نفسه.

العناصر، تعمل معًا

بعضها، كما تكون في منتج. جرّبها: إنها الشيء الحقيقي.

مشروع جديد

للفاتورة.

النشاط

  1. اليوم، 09:40

    قُبل الطلب

  2. أمس، 16:05

    تغيّرت الميزانية إلى 1,200 £ شهريًا

  3. 22 أكتوبر

    تم إرسال الطلب

اطّلع على كل العناصر

صفحة واحدة، تُقرأ في الاتجاهين

البطاقة نفسها، بالإنجليزية وبالعربية. لا شيء يُعاد رسمه للكتابة من اليمين إلى اليسار: التخطيط والأيقونات والمنزلق والخطوات تتبع اتجاه النص.

مشروع جديد

للفاتورة.

New project

For the invoice.

بالأرقام

عنصرًا، يعمل كلٌّ منها74
لغتان، في الاتجاهين2
مظهران، كل زوج ألوان فيهما مقيس2
اعتماديات وقت التشغيل0

أسئلة

هل يعمل بالعربية؟

نعم: كل مكوّن مكتوب لاتجاه اليمين إلى اليسار كما لاتجاه اليسار إلى اليمين، وكل مواصفة متاحة بالعربية أيضًا. كيف يعمل الاتجاه من اليمين إلى اليسار

هل أحتاج إلى React؟

لا. تعمل CSS والأدوات الصغيرة في js/ على أي صفحة؛ وتكتب مكوّنات React البنية نفسها.

كيف يُفحص التباين؟

يقيس البناء كل زوج ألوان يعتمد عليه النظام، في المظهرين، ويفشل إن قصّر أيٌّ منها.

هل يمكنني استخدامه في منتجي؟

نعم: الشيفرة مرخّصة بترخيص MIT. أما شعارات آرابيسك ومعامل آرابيسك وعلاماتهما فليست كذلك، فلا تضعها في منتجك.

ابدأ بملف أنماط واحد.

اربط بإصدار منشور، لا يتغير أبدًا، أو ثبّته من GitHub.

أضفه إلى مشروعكتصفّح كل العناصر
npm i github:ArabesqueLabs/design-system#v0.9.0
العودة إلى الأعلى