نص القراءة
الزخارف الهندسية الإسلامية بنى متقنة تقوم على قواعد بسيطة متكررة. ونحن نبني البرمجيات بالطريقة نفسها: وحدات صغيرة متقنة، وواجهات واضحة، ونظام متماسك.
أدوار لا درجات: كل اسم يقول ما وُجد اللون من أجله. وكل زوج من الألوان يعتمد عليه النظام يُقاس عند البناء.
--al-color-bgالصفحة--al-color-surfaceالبطاقات والألواح والحقول--al-color-surface-sunkالآبار والتمرير والمعلومات--al-color-textنص المتن--al-color-text-mutedالنص الثانوي--al-color-lineالخطوط الرفيعة--al-color-controlحدود عناصر التحكم--al-color-accentالإجراءات والتركيز والنجاح--al-color-on-accentالنص على لون التمييز--al-color-dangerالأخطاء والحذف--al-color-warningيحتاج انتباهًا--al-color-infoمعلومات--al-color-inverseالإشعارات العابرة والتلميحات--al-color-chart-1الرسم، السلسلة الأولى--al-color-chart-2الرسم، السلسلة الثانية--al-color-chart-3الرسم، السلسلة الثالثة--al-color-chart-4الرسم، السلسلة الرابعةثماني درجات زاهية للتمييز والتأكيد: الوسوم والتمييزات والصور الرمزية. كل حبر مقروء بوضوح على خلفيته.
data-tint="teal"data-tint="green"data-tint="yellow"data-tint="orange"data-tint="pink"data-tint="purple"data-tint="blue"data-tint="cyan"خط Jost للواجهة والعناوين، وNewsreader للقراءة. وتُعرض العربية بخطوط IBM Plex Sans Arabic وKufam وAmiri: بحجم أكبر قليلًا، وارتفاع أسطر أوسع، وبلا تباعد بين الحروف.
displayولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية3xlولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية2xlولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجيةxlولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجيةlgولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجيةmdولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجيةbaseولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجيةsmولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجيةxsولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجيةنص القراءة
الزخارف الهندسية الإسلامية بنى متقنة تقوم على قواعد بسيطة متكررة. ونحن نبني البرمجيات بالطريقة نفسها: وحدات صغيرة متقنة، وواجهات واضحة، ونظام متماسك.
أرقام داخل جملة
التكلفة £12 شهريًا لكل شخص، أو $1,440 سنويًا لعشرة أشخاص.
خطوة من 4 بكسل لكل ما هو مكاني. الزوايا حادة (2 بكسل)؛ والعمق يأتي من الحدود ودرجات الأسطح، لا من الظلال أبدًا.
--al-space-1--al-space-2--al-space-3--al-space-4--al-space-5--al-space-6--al-space-8--al-space-12--al-space-16سريعة، ولا تكون إلا استجابة لفعل: 150 جزءًا من الثانية للاستجابة، و250 للطيّ والمظاهر. ومع تقليل الحركة، يتغيّر كل شيء فورًا.
أيقونات خطية على شبكة من 24 وحدة. وما يشير منها في اتجاه القراءة ينعكس في الكتابة من اليمين إلى اليسار.
فقرات وقوائم واقتباس وشيفرة ومفاتيح وتظليل، داخل .al-prose: خط القراءة، وطول السطر، والمسافات بينها.
نص متصل بخط عريض، مائل، مع رابط، inline code، ومفتاح، Ctrl + S، وتظليل. وخط صغير.
اقتباس داخل النص المتصل، يليه مصدره.
ينفّذ إجراءً ما. زر رئيسي واحد في كل عرض؛ والتسمية تحدد الإجراء وموضوعه.
إجراءات مترابطة متصلة في صف أو عمود، بينها حدّ واحد. ويبقى كل منها زرًا قائمًا بذاته.
رابط قائم بذاته: تحته خط بلون التمييز، ومعه سهم إلى خطوة تالية، أو أيقونة إلى موقع آخر.
طريق للعودة، يسبق عنوان الصفحة: رابط رجوع للخطوة السابقة، ومسار تنقل يوضح موضع الصفحة.
تسمية واضحة، وتلميح اختياري، والحقل؛ والحقول الاختيارية توضح ذلك.
سنستخدم هذا فقط للرد عليك.
اكتب 5000 أو 5k أو ٥٬٠٠٠.
خطأ: أدخل مرجعًا يتكون من حرفين يليهما 6 أرقام، مثل AB123456
تقول الأيقونة ما يُكتب فيه؛ ويبقى العنوان هو ما يسمّيه.
تغيّر، ولم يُحفظ
قائمة اختيار لقائمة ثابتة؛ وحقل مركب يتيح للأشخاص كتابة خيارهم الخاص أيضًا.
سيتم إنشاء مجموعة جديدة عند الحفظ.
للإجابات الأطول. ومع تحديد الحد، يوضح المتبقي كتابةً، ويتيح مواصلة الكتابة متجاوزًا الحد.
تكفي جملة أو جملتان.
ثلاثة حقول للتواريخ المعروفة مسبقًا. أما التاريخ القريب من اليوم فاستخدم له منتقي التاريخ.
تاريخ قريب من اليوم، يُكتب أو يُختار من تقويم بلغة الصفحة: في العربية بأسماء الأشهر والأيام العربية، وأسبوع يبدأ يوم السبت، والأرقام المختارة، وشبكة تبدأ من اليمين.
على سبيل المثال، 2026-11-30
حقل مع أيقونته، وزر مسح عند وجود نص. ومفتاح Escape يمسحه أيضًا.
مربع اختيار للمجموعة كلها، مختلط حين يُختار بعضها دون بعض.
خيارات مستقلة في مجموعة حقول مع تسمية توضيحية؛ الصف بالكامل قابل للنقر.
خيار واحد من بين عدة خيارات، مع تحديد افتراضي مناسب متى أمكن.
إعداد يُطبق فور تبديله: دون الحاجة إلى حفظ.
من خيارين إلى خمسة خيارات قصيرة ومرئية: للاختيار في نموذج أو لتبديل العرض.
قيمة على مقياس، والقيمة نفسها بجانبه، بأرقام الصفحة ومع وحدتها.
حتى 2,000 £.
من واحد إلى خمسة، أزرار اختيار مرسومة بنجمة العلامة، لكل منها اسم بالكلمات: «4 من 5».
تقييمك، كما يُعرض.
عند إرسال نموذج يحتوي على أخطاء: تظهر كل الأخطاء في الأعلى، وكل خطأ رابط لحقله. ويستقبل التركيز، ويبدأ عنوان الصفحة بكلمة «خطأ:».
ما هو ثانوي يُطوى، مع إظهار القيمة المختارة بالداخل بجانب اسمه.
إعدادات لا يحتاجها أغلب الأشخاص.
البطاقة تحوي عنصرًا واحدًا يُتفاعل معه، وإجراءاته في أسفلها؛ واللوح خط فاصل فوق مجموعة؛ والإحصائية رقم مع تسميته.
نص توضيحي · تم التحديث اليوم
تجمع البطاقة شيئًا واحدًا: ملخصه وما يمكنك فعله به.
موصى بها
يثبّت الشريط كلمة واحدة على بطاقة واحدة؛ ويحمل التذييل إجراءاتها.
خط فاصل فوق مجموعة: فمعظم المجموعات لا تحتاج إلى صندوق.
شيفرة تُقرأ أو تُنسخ، من اليسار إلى اليمين في اللغتين، والأسطر المهمة فيها مُعلَّمة. والأمر سطر واحد يُلصق.
<link rel="stylesheet" href="dist/arabesque.css">
<header class="al-site-header">…</header>
<script type="module">
import { initSiteHeaders } from "./js/site-header.js";
initSiteHeaders();
</script>import { ArabesqueProvider, SiteHeader } from "@arabesquelabs/design-system/react";
export const Top = () => (
<ArabesqueProvider lang="ar" sprite="/dist/icons.svg">
<SiteHeader links={links} />
</ArabesqueProvider>
);.al-code__pre {
direction: ltr;
text-align: start;
}npm run buildعمود من التبويبات، لكلٍّ اسم وسطر عنه، بجانب ما يعرضه المختار منها.
.al-toc a {
padding-inline-start: var(--al-space-3);
border-inline-start: 2px solid var(--al-color-line);
}يصل Tab إلى كل عنصر تحكم؛ وتتنقل الأسهم داخل التبويبات والقوائم والتواريخ؛ ويغلق Escape ما فُتح.
من يستخدمه، بشعاراتهم بلون واحد، بقدر ما يتسع الصف. ولا شريط متحرك أبدًا.
ما قاله أحدهم، بكلماته، ثم من هو.
عمّ يتحدث
ما قاله، بكلماته: مختصرًا، دون إعادة صياغة أبدًا، ومعروضًا بإذنه.
كلمات شخص ثانٍ، بجانب الأول.
كلمة الصفحة الأخيرة: سطر واحد، ثم ما يُفعل.
ابدأ من القالب، أو خذ الأجزاء التي تحتاجها فقط.
حقائق حول شيء ما، لكل منها إجراؤه الخاص: لمراجعة الإجابات ولأي سجل.
لمقارنة القيم: الأرقام تصطف بدقة، والإجمالي يبرز بوضوح، والملاحظات الجانبية تتراجع. والجداول العريضة تمرر في نطاقها الخاص.
| العنصر | الكمية | السعر | الإجمالي |
|---|---|---|---|
| العنصر الأول | 2 | £12.00 | £24.00 |
| العنصر الثاني | 1 | £120.00 | £120.00 |
| العنصر الثالث | 4 | £2.50 | £10.00 |
| الإجمالي | £154.00 | ||
| منها ضريبة القيمة المضافة، بنسبة 20% | £25.67 |
حالة موجزة بجانب عنصر ما، بكلمات واضحة.
اللون للهوية والتأكيد، في ثماني درجات زاهية؛ ولا يُستخدم للحالة أبدًا.
التمييزات تلفت الانتباه إلى الكلمات المفتاحية, الأسماء و الأفكار، في أي من الدرجات الثماني.
أجزاء مهمة أطول، مع حالة كل جزء كتابةً؛ وتُنجز بأي ترتيب.
ما جرى، كل حدث في وقته، على امتداد خط: تاريخ سجلّ أو موجز نشاط.
قُبل الطلب
تغيّرت الميزانية إلى 1,200 £ شهريًا
علّق سام أوكافور
هل يمكن أن نبدأ قبل أسبوع؟
تم إرسال الطلب
أشياء من نوع واحد، كل منها في صف: إشعارات، ونتائج، وملفات. والصف الذي يفتح شيئًا رابطٌ من حافة إلى حافة.
شريط من الصفحة: خط رفيع يفصله عمّا قبله، وعنوانه ومقدمته.
01 من نحن
أربع مراحل، نكررها بقدر ما يلزم لنصل إلى الصواب.
إعدادات لا يحتاجها أغلب الأشخاص.
تسلسل مرقّم: مراحل إنجاز أمر ما. للتسلسلات الحقيقية فقط.
1
نبدأ بالمشكلة الحقيقية لا بالحل المفترض. نأخذ وقتنا لفهم القيود قبل كتابة سطر من الشيفرة.
2
البنية قبل البكسلات. نرسم شكل النظام وبياناته وتدفقاته وحالاته الحدّية، ليقوم البناء على أساس.
3
خطوات صغيرة ومدروسة بدلًا من الإصدارات الضخمة دفعة واحدة. برمجيات تعمل، تُراجَع وتُختبر في كل خطوة.
4
نادرًا ما تكون النسخة الأولى هي الصحيحة. نعود إليها ونبسّطها ونصقلها حتى تصمد التفاصيل.
رسالة ضمن الصفحة، في أربعة أنواع، لكل منها أيقونة وعنوان. وملاحظة الأثر الجانبي توضح ما سيتغير أيضًا قبل حدوثه.
تم
حُفظت تغييراتك.
صيانة مجدولة
يوم الأحد، من 2 صباحًا حتى 4 صباحًا، قد يكون الحفظ بطيئًا.
تم حفظ التغييرات
يمكن للجميع ممن لديهم صلاحية الوصول رؤيتها الآن.
تحقق من بياناتك
قد تكون بعض بياناتك غير محدثة.
تعذر تحميل هذه الصفحة
انقطع الاتصال. تحقق من اتصالك بالإنترنت، ثم حاول مجددًا.
تغيير هذا يؤدي أيضًا إلى تحديث عنصرين مرتبطين.
تحت الترويسة: المنتج، أو جزء منه، جديد أو قيد التغيير، والملاحظات مرحب بها.
صار لكتل الشيفرة تلوين للصياغة. اطّلع على الجديد
ما حدث للتو باختصار، مع خيار التراجع متى كان ذلك متاحًا.
قرار يتطلب الانتباه الآن. لا يفقد أبدًا ما تم إدخاله، ولا يطلب التأكيد إلا لما لا يمكن التراجع عنه. ويتحول إلى لوح سفلي في الشاشات الصغيرة.
تسمية موجزة لأيقونة أو علامة، عند التمرير والتركيز. وليست ضرورية أبدًا للوظيفة الأساسية.
حالة بكلمة، تسبقها نقطة بلونها. الكلمة هي المعنى؛ والنقطة تكرّره.
الخادم الأول متصل
مزيد عن شيء ما، حين يُطلب: يفتحه زر بجانبه. ويغلقه Escape أو نقرة خارجه.
الرمز الضريبي
يخبر صاحب العمل بمقدار الضريبة التي يقتطعها من راتبك. وتجده في كشف راتبك.
زاوية التلامس
الزاوية التي تلتقي فيها خطوط النمط بحافة البلاطة: 67.5°.
توضيح سبب خلو المكان، مع الإجراء التالي. ليس طريقًا مسدودًا أبدًا.
لا توجد عناصر بعد
أضف عنصرًا للبدء. يمكنك استيراد عدة عناصر في وقت واحد أيضًا.
إظهار التقدم حيث يتم العمل: هيكل فارغ، أو مؤشر دوار، أو شريط قياس متى أمكن حسابه.
جارٍ تحميل العناصر
نهاية مسار إرسال إجراء ما: تم الإنجاز، مع الرقم المرجعي، ثم الخطوات التالية.
رقمك المرجعي AL-4K7Q-92
هل تم الاحتفاظ بالتغيير، وماذا تأثر به، وما الأرقام التي يعاد حسابها. جرب ذلك.
تغيير المبلغ يؤدي أيضًا إلى تحديث عنصرين مرتبطين.
جارٍ الحساب من جديد…
على مدى 12 شهرًا: £6,600
تغيير عُرض فورًا ثم رفضه الخادم: أُعيد إلى موضعه السابق مع بيان السبب وإمكانية إعادة المحاولة.
بمجرد تحديد العناصر: كم عددها، وما يمكن تنفيذه عليها جميعًا، وطريقة لإلغاء التحديد.
مفتاح التعديل الخاص بنظام التشغيل: ⌘ على أجهزة Apple وCtrl في غيرها. المفاتيح الفردية لا تعمل أثناء الكتابة أبدًا.
القيم بمرور الوقت أو عبر الفئات، مجمعة مع خط مستهدف اختياري.
أجزاء الكل في شريط واحد مع دليل إيضاحي.
كل قيمة مقارنة بالمستهدف، مع توضيح الفارق كتابةً.
العلامة بجانب الشعار النصي، مبنية من حزمة الشعار. بلون واحد؛ ولا يُعاد رسمها أبدًا.
تبليط 4.8.8 لبلاطة العلامة، بزاوية تلامس 67.5°، مرسومًا بالقاعدة: نسيجًا خلف شريط، أو عبر القسم الافتتاحي مع بلاطته المحورية (كما في أعلى هذه الصفحة).
خط هادئ واحد عبر القسم، وبلاطة محورية واحدة بلون التمييز، مع تعليقها. ويرسم نفسه مرة واحدة.
بلاطة واحدة، ونظام كامل.
هذه البلاطة هي علامتنا. كل ما حولها ينبع من القاعدة نفسها.
كيف يُصنع النمط، في ثلاث خطوات، تُقرأ كل منها بلغة البرمجيات.
1 غطِّ المستوى بأشكال بسيطة.
في البرمجيات: الوحدات.
2 من منتصف كل ضلع، ارسم خطين بزاوية ثابتة.
في البرمجيات: الواجهات.
3 أزِل السقالة. يبقى النمط قائمًا.
في البرمجيات: النظام.
الأسئلة التي يطرحها الناس قبل أن يبدؤوا، كلٌّ مطويّ تحت سؤاله، وكل جواب قصير، مع رابط للمزيد.
نعم: كل مكوّن مكتوب لاتجاه اليمين إلى اليسار كما لاتجاه اليسار إلى اليمين، وكل مواصفة متاحة بالعربية أيضًا. كيف يعمل الاتجاه من اليمين إلى اليسار
لا. تعمل CSS والأدوات الصغيرة في js/ على أي صفحة؛ وتكتب مكوّنات React البنية نفسها.
يقيس البناء كل زوج ألوان يعتمد عليه النظام، في المظهرين، ويفشل إن قصّر أيٌّ منها.
لكل ما يُرسل أو يصعب التراجع عنه: اسأل؛ وافحص الأخطاء عند الإرسال مع ملخص الأخطاء؛ ومكّن الأشخاص من مراجعة إجاباتهم؛ ثم أكّد مع توضيح الخطوة التالية. جرّب إرساله فارغًا.