سیستم شبکه و مدولار

1) چرا مش

• شتاب طراحی و توسعه (زبان مشترک: «12 ستون، ناودان 24»)،
• کاهش بار شناختی (حتی ریتم، خطوط پایدار)،
• قابلیت حمل اجزای بین صفحات را افزایش می دهد
• اجازه می دهد تا شما را به ساخت یک کتابخانه مدولار بدون «microlaying».

2) عناصر مش اصلی

کانتینر - حداکثر عرض محتوا، منطقه محور.
ستون ها - مناطق عمودی برای قرار دادن ماژول ها.
Gutter - فضای افقی بین ستون ها.
حاشیه - زمینه های خارجی در سمت چپ/راست ظرف.
ردیف/آهنگ - راهنمای افقی (در شبکه CSS - خطوط/آهنگ).
Baseline - شبکه تایپوگرافی عمودی.

توصیه می شود ریتم عمودی: 8-pt (گاهی اوقات 4-pt برای تفاوت های ظریف)، واحد اندازه و تورفتگی چند برابر 4/8 است.

3) نقاط شکست و ظروف

• ظرف رستر (تعمیر. حداکثر عرض) در صفحه نمایش بزرگ، مایع - در تلفن همراه.
• Gutter می تواند به راحتی به نقاط شکست بزرگ افزایش یابد.
• ستون ها - 4/6/8/12 به عنوان «مجموعه اصلی».

4) مدولار و تراکم

ماژول - یک بلوک از محتوا که 1..N ستون و چند برابر ارتفاع پایه را اشغال می کند.

• راحتی (داشبورد، خواندن): فونت های بزرگتر، indents 16-24.
• جمع و جور (جداول، طرفدار حالت): فونت + 0/ − 1 پیکسل، تورفتگی عمودی − 4/ − 8، ارتفاع ردیف ثابت (مضربی از 8).

قطعات باید دو ایستگاه از پیش تنظیم حداقل تراکم داشته باشد.

5) تایپوگرافی و شبکه پایه

ارتفاع خط اصلی را انتخاب کنید (به عنوان مثال، 24 پیکسل) و ارتفاع عناصر را هماهنگ کنید (دکمه ها 40/48/56 px چند برابر از پایه هستند).
عنوان ها ریتم های عمودی را متصل می کنند: بالا/پایین تورفتگی چند برابر 8 است.
تراز آیکون به ارتفاع متن.

6) قالب های طرح

6. 1 کارت ها

شبکه: موزاییک (ثابت. عرض کارت) یا ستون (کارت = ستون N).

حداقل ارتفاع محتوا برای جلوگیری از «پریدن» در هنگام بارگیری ؛ اسکلت درون کارت

بالشتک داخلی: 16/20/24 بسته به نقطه شکست.

6. 2 جداول

ظرف عرض کامل ؛ اولین ستون/کلاه را هنگام پیمایش به صورت افقی منجمد کنید.
سلول ها پایه هستند ؛ ستونهای عددی با ارقام/اعشار تراز می شوند.
در XS - «طرح بندی انباشته» به جای پیمایش افقی اگر ستون های زیادی وجود داشته باشد.

6. 3 فرم ها

تک ستون در XS/SM، دو یا سه ستون در MD + (با در نظر گرفتن منطق زبانه ها/بخش ها).
فیلد + برچسب + کمک متن مناسب به یک ماژول مشترک (ارتفاع چند ضلعی از 8).

6. 4 داشبورد

شبکه با آهنگ های ثابت و ابرها (مناطق) برای ثبات.
ابزارک ها دارای حداقل و حداکثر عرض در ستون هستند. ارتفاع ها مضربی از پایه هستند.
هنگام ارسال مجدد - تعداد ستون ها تغییر می کند، ویجت ها را به صورت خودسرانه تقسیم نکنید.

7) سازگاری، طرح خودکار و رفتار

محتوا در مقابل شبکه: شبکه به محتوا به جای شکستن آن تنظیم می شود.

• استفاده از محدودیت (چپ/راست/مرکز) و طرح خودکار برای کارت/لیست.
• گزینه های جزء پشتیبانی برای XS/SM/MD/LG (paddings تغییر، منظور اسلات).

• در سطح بخش - شبکه CSS (مناطق، ستون ها، ردیف ها).
• داخل اجزاء - فلکس (محورها، تعادل فضاها).

8) CSS Grid/Flex - کارگاه آموزشی

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) شاخص ها و نشانه ها

گرفتن مقیاس در سیستم طراحی.

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• تورفتگی داخلی اجزاء از «فضا» است.
• زمینه های بیرونی ظروف از «ناودان »/« حاشیه» است.
• ارتفاع عناصر مضربی از 8 (40/48/56) است.

10) اجزای مدولار

• می دانید که چند ستون در هر نقطه شکست طول می کشد ؛
• حداقل/حداکثر ابعاد ؛
• به پیکسل های «جادویی» وابسته نیستند - فقط نشانه ها ؛
• شبکه داخلی (عنوان، محتوا، پاورقی) را در پایه نگه دارید.

11) تصاویر و بخش های رسانه ای

نسبت ابعاد ثابت (به عنوان مثال،. 16/9, 4/3, 1/1) برای پیش نمایش و کارت.

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

در XS، فقط برای تبلیغ از خونریزی کامل (تصویر در اطراف لبه ها) استفاده کنید، بقیه مطالب از ظرف پیروی می کنند.
متن تصویر - فقط در لغزش/پوشش، کنتراست ≥ AA.

12) RTL و محلی سازی

جهت شبکه آینه: 'dir =' rtl 'و': dir (rtl) '-rules برای تورفتگی/آیکون.
سفارش ستون و ستون های یخ زده در جداول - آینه کردن را در نظر بگیرید.
طول خطوط و انتقال می تواند ارتفاع ماژول ها را تغییر دهد - سهام را بگذارید.

13) ویژگی های iGaming

مناطق تبلیغاتی و آگهی ها: یک شبکه جداگانه با ماژول های بزرگ ؛ متن همیشه در صفحه است، کنتراست AAA برای اطلاعیه های بحرانی (18 +، محدودیت ها، خطرات).
رهبران/رتبه بندی: جداول با ستون اول ثابت و یک هدر چسبنده، اعداد جدولی (اعداد جدولی)، ارتفاع ردیف چند برابر 8 است.
داشبورد بازیکنان/عملیات: ویدجت ها (جلسات، سپرده ها، RTP، سپرده های خالص) 3-6 ستون را در یک شبکه 12 اشغال می کنند ؛ بازسازی آبشار در MD/SM.

کارت های مسابقات: شبکه کارت 3 × N (LG)، 2 × N (MD)، 1 × N (SM/XS) ؛ CTA در یک مکان دائمی

14) دسترسی و تمرکز

حلقه های تمرکز نباید ریتم را شکست: اضافه کردن طرح کلی-افست یا یک شبه عنصر داخلی.
حداقل اندازه کلیک: 44 × 44 (تلفن همراه )/32 × 32 (دسکتاپ).
معنی را فقط با قرار دادن رمزگذاری نکنید. برچسب های متن و ویژگی های aria را ذخیره کنید.

15) عملکرد

عمق شبکه های تودرتو را کاهش دهید: بخش اصلی شبکه 1 + انعطاف پذیری در داخل.
اجتناب از سایه های سنگین/ماسک بر روی صدها کارت ؛ از سبک های مسطح در لیست ها استفاده کنید.
بارگذاری تنبل از محتوای رسانه ؛ نسبت ثابت جلوگیری از CLS.

16) ضد گلوله

سازگاری «Grid to taste» → در هر صفحه فرو می ریزد.
Gutter به صورت خودسرانه با بخش متفاوت است.
تراکم متناقض (هر دو جمع و جور و راحتی در یک صفحه).
اجزای وابسته به عرض سحر و جادو (بدون ستون/نشانه).
جداول با پیمایش افقی در تلفن همراه بدون طرح جایگزین.
متن در تصویر بدون قالب و کنترل کنتراست.

17) چک لیست QA

ساختار شرکت

• ستون/ظرف/مارجین مربوط به نقطه شکست است.
• Gutter در داخل صفحه پایدار است.
• ارتفاع و تورفتگی ها مضربی از 8 هستند.

اجزای سازنده

• عرض ستون (XS.. XL) و حداقل/حداکثر تعریف شده است.
• شبکه های داخلی با پایه هماهنگ شده اند.

جداول/فرم ها

• چسبنده کلاه/ستون اول ؛ حالت انباشته در XS.
• زمینه های فرم چند برابر از پایه هستند ؛ متن برچسب/کمک نمی کند «پرش».

A11y

• سبک های تمرکز ریتم را شکستن نیست ؛ مناطق گروهی حداقل ≥.

عملکرد

• بدون CLS به دلیل بلوک های رسانه ای ؛ بارگذاری تنبل فعال است.

18) نشانه ها و مستندات در سیستم طراحی

• مقادیر «ظرف»، «ستون»، «ناودان»، «فضا»، پایه ؛
• نمونه هایی از طرح بندی (کارت/جداول/فرم/داشبورد) ؛
• ایستگاه از پیش تنظیم تراکم (Comfort/Compact) و اثر آنها بر اجزای سازنده ؛
• قطعه کد برای سبک/طرح بندی CSS Grid/Flex و Figma.

خلاصه ای کوتاه

Grid یک قرارداد بین طراحی و توسعه است. ضبط نقاط توقف، ظروف، سخنرانان و ریتم 8-pt، نشانه های طراحی و قالب های طرح، ارائه گزینه های تراکم، سازگاری و در دسترس بودن. سپس صفحات به طور قابل پیش بینی مقیاس می شوند، اجزاء دوباره استفاده می شوند و دستور سریع تر و پایدار تر است.