الرموز

التخطيط

نظام تخطيط متجاوب من أربع طبقات وأربع نقاط توقّف. رموز أولية للشبكة والألواح والحاويات، واثنا عشر رمزاً دلالياً تتكيّف من SM إلى XL. الفواصل والهوامش تأتي من نظام المسافات.

البنية أولاً

عرّف الإطار البنيوي عبر رموز page (أعمدة، فواصل، هوامش، حاوية، فجوة) قبل المحتوى. المحتوى الرئيسي لا ينطوي أبداً. نقاط التوقّف تُكتب في @media (لا تعمل المتغيّرات داخل شروط الاستعلام). انقر أي رمز لنسخه.

نقاط التوقّف

أربعة أوضاع تعيد ربط الرموز الدلالية مع اتّساع الشاشة. الأعمدة تنكسر ١٢ ← ٨ ← ٤. جرّبها بتغيير عرض النافذة.

SM320–599

4 أعمدة · الحفاظ على تدفّق المهمة الأساسي على الشاشات الضيّقة.

MD600–1023

8 أعمدة · تخطيط انتقالي بدعم جزئي للألواح.

LG1024–1439

12 أعمدة · التخطيط الأساسي، كل المناطق نشطة.

XL1440+

12 أعمدة · توسّع مضبوط بقيود عرض أقصى.

الشبكة الحيّة4 أعمدة

غيّر عرض النافذة: الأعمدة تنكسر ١٢ ← ٨ ← ٤ والفجوة تتقلّص، عبر نقاط توقّف التخطيط.

رموز الصفحة

العقد البنيوي للصفحة: الشبكة والهوامش وأقصى العرض وفجوات المناطق.

SM	MD	LG	XL
4	8	12	12
16px	24px	32px	32px
16px	24px	32px	32px
320px	960px	1200px	1440px
24px	32px	32px	48px

رموز الألواح

عروض الألواح: التنقّل، المساند، منطقة العمل. منطقة العمل لها الأولوية؛ الألواح الثانوية تنطوي أولاً.

SM	MD	LG	XL
280px	280px	320px	360px
320px	320px	320px	320px
480px	480px	480px	480px
400px	400px	400px	400px
640px	640px	640px	640px

رموز المحتوى

أقصى عرض للمحتوى القابل للقراءة والمقيّد. عرض القراءة مسقوف عند ٦٤٠ فأعلى للحفاظ على طول السطر.

الرمز	SM	MD	LG	XL
	480px	560px	640px	640px
	—	560px	640px	720px

المناطق والانطواء

ست مناطق بترتيب انطواء: الثانوية أولاً، ثم المساندة، ثم الجانبية، ثم التنقّل. المحتوى الرئيسي آخر ما يُضغط، ولا ينطوي أبداً.

علويةأولوية عالية، تبقى مرئية.

تنقّلمتوسطة-عالية، تنطوي إلى شريط أيقونات/طبقة.

جانبيةمنخفضة-متوسطة، تنطوي مبكراً.

المحتوى الرئيسيالأعلى، لا تنطوي أبداً.

مساندةمنخفضة، تنطوي أو تنتقل للأسفل.

طبقة عائمةخارج التدفّق، سياق تكديس منفصل.

المبادئ

عشرة مبادئ حاكمة لقرارات التخطيط.

01البنية

تنظّم الشاشة في علاقات مكانية واضحة؛ عرّف الإطار البنيوي أولاً.

02التسلسل

المناطق ذات أهمية بنيوية مختلفة؛ أعطِ منطقة المهمة الأساسية أقوى ملكية مكانية.

03التدفّق

حركة اتجاهية؛ رتّب المناطق لتدعم تسلسل المهمة المقصود.

04قابلية القراءة

قيّد عرض المحتوى حين تهم جودة القراءة (طول السطر).

05قابلية المسح

أنماط بنيوية متكرّرة ومحاذاة للشبكة لإيجاد الأنماط بسرعة.

06الاستقرار

سلوك متماسك عبر تغيّرات المحتوى والشاشة؛ صمّم للفارغ والتحميل والفيض والضيّق.

07المحاذاة

نظام عبر محاور بنيوية مشتركة؛ حاذِ كل المحتوى لخطوط الشبكة نفسها.

08التقييد

حدود عرض أقصى مقصودة للحاويات والألواح والمحتوى للحفاظ على الوضوح.

09التكيّف

تغيّر بنيوي عبر قواعد نقاط التوقّف، لا إعادة تصميم يدوية لكل شاشة.

10الاتساق

القواعد البنيوية نفسها لنوع الشاشة نفسه عبر المنتج.

إمكانية الوصول

المعيار	المستوى	لماذا ينطبق
1.4.10 · إعادة التدفّق	AA	المحتوى قابل للعرض بلا تمرير أفقي عند ٣٢٠ بكسل؛ لو تجاوز SM ذلك، لا وضع يغطّي ٣٢٠.
1.3.4 · الاتجاه	AA	المحتوى لا يُقفل على اتجاه واحد؛ نقاط التوقّف وانطواء الألواح تدعم الطولي والعرضي.
1.4.8 · العرض البصري	AAA	أقصى طول سطر لمحتوى القراءة؛ reading.max-width يبقى ≈٤٨٠–٧٢٠ (٤٥–٧٥ حرفاً).

BLOCKER

نقطة التوقّف SM تغطّي ٣٢٠ بكسل.

BLOCKER

لا تمرير أفقي عند ٣٢٠ بكسل.

BLOCKER

الاتجاه غير مقفل.

BLOCKER

منطقة المحتوى الرئيسي لا تنطوي أبداً.

WARNING

عرض القراءة ≤ ٧٢٠ بكسل عبر كل نقاط التوقّف.

الشيفرة للمطوّرين

التسليم الأساسي لطبقة التخطيط هو متغيّرات CSS المخصّصة. الرموز الدلالية تُعاد ربطها لكل نقطة توقّف داخل @media، فتتكيّف القيمة نفسها من SM إلى XL. المكوّنات تستهلك الرموز الدلالية فقط.

سلسلة المتغيّرات

المتغيّرات تُبنى على ثلاث طبقات: مدرّج أوّلي، ثم رمز أوّلي، ثم رمز دلالي يُحلّ حسب الوضع. المكوّنات تستهلك الطبقة الدلالية فقط.

عقد CSS

/* Primitive — container max-widths and gutters */
--layout-container-sm: 320px;
--layout-container-lg: 1200px;
--layout-gutter-sm: var(--spacing-space-500); /* 16px */
--layout-gutter-lg: var(--spacing-space-700); /* 32px */

/* Semantic — remapped per breakpoint; components consume THIS.
   Breakpoints are hardcoded in @media: vars can't live in a query condition. */
:root {
  --layout-page-container: var(--layout-container-sm); /* 320px at SM */
  --layout-page-gutter: var(--layout-gutter-sm);       /* 16px */
}
@media (min-width: 1024px) {
  :root {
    --layout-page-container: var(--layout-container-lg); /* 1200px at LG */
    --layout-page-gutter: var(--layout-gutter-lg);       /* 32px */
  }
}

جدول المرجع

الرمز	متغيّر CSS	القيمة	الاستخدام
layout.page.container	--layout-page-container	320 → 1440px	أقصى عرض للصفحة
layout.page.columns	--layout-page-columns	4 → 12	عدد أعمدة الشبكة
layout.page.gutter	--layout-page-gutter	16 → 32px	فجوة الأعمدة
layout.page.margin	--layout-page-margin	16 → 32px	هامش حافة الصفحة
layout.page.gap	--layout-page-gap	24 → 48px	الفجوة بين المناطق
layout.content.reading-max-width	--layout-content-reading-max-width	480 → 640px	سقف طول سطر القراءة
layout.pane.nav-width	--layout-pane-nav-width	280 → 360px	عرض لوح التنقّل

الاستخدام

مثال

.page {
  max-inline-size: var(--layout-page-container);
  padding-inline: var(--layout-page-margin);
  margin-inline: auto;
}
.page-grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-page-columns), 1fr);
  gap: var(--layout-page-gutter);
}
.article {
  max-inline-size: var(--layout-content-reading-max-width);
}
/* No breakpoint logic here: the tokens self-remap under each @media. */

أخطاء شائعة

الخطأ	ما يفسد	الصواب
`max-width: 1200px`	لا يُعاد ربطه عبر نقاط التوقّف	`var(--layout-page-container)`
`@media (min-width: var(--layout-breakpoint-lg))`	CSS غير صالح؛ المتغيّرات لا تعمل في شرط الاستعلام	اكتب قيمة البكسل صراحة: min-width: 1024px
عدد أعمدة ثابت في الشبكة	يكسر الشبكة المتجاوبة	`var(--layout-page-columns)`
عرض قراءة غير مسقوف	طول السطر يطول فيصعب القراءة	`var(--layout-content-reading-max-width)`

كيف تُستهلك

الرموز مصدرها واحد آلي القراءة (tokens.json في المهارة). حزمة @mercato/tokens تولّد منه: متغيّرات CSS (التسليم الأساسي)، وإعداد Tailwind جاهز، وكائن سمة مطبوع بـ TypeScript. أهداف المنصّات الأخرى (Style Dictionary وDTCG وiOS وAndroid وCompose) تتولّد من المصدر نفسه عند الطلب.

الاستيراد

// CSS variables (canonical) — import once at the app root
import "@mercato/tokens/css";

// Tailwind preset
// tailwind.config: { presets: [require("@mercato/tokens/tailwind")] }

// Typed theme object (JS/TS)
import { tokens } from "@mercato/tokens";