# مشخصات درس‌نامه: فاصله‌گذاری و چیدمان (Spacing, Grid & Layout Systems)
- **شناسه در سیلابس:** `L5.5`
- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
- **نوع محتوا:** 📘 درس‌نامه متنی
- **زمان تقریبی مطالعه:** ۱۲ دقیقه
- **پیش‌نیازهای مستقیم:** `L5.4` (تایپوگرافی و پالت رنگی)

---

## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
- [ ] **درک کند (Understand):** قدرت جادویی «فضای منفی یا فضای سفید (Whitespace)» در خلق حس لوکس، خوانایی بالا و تمرکز ذهنی کاربر را درک کند.
- [ ] **به‌کار ببندد (Apply):** استاندارد جهانی **سیستم گرید ۸ پیکسلی (8pt Grid System)** را در تنظیم پدینگ‌ها، مارجین‌ها و فواصل المان‌ها پیاده‌سازی کند.
- [ ] **تحلیل/ارزیابی کند (Evaluate):** زمان استفاده از چیدمان تک‌بعدی فلکس‌باکس (Flexbox) در برابر چیدمان دوبعدی گرید (CSS Grid) را تفکیک و انتخاب کند.
- [ ] **به‌کار ببندد (Apply):** اصول استاندارد کانتینرها و فواصل سکشن‌ها را بر اساس راهنماهای **Design.md (https://getdesign.md/design-md)** در کالبد پروژه محوری (پورتفولیوی پویا) مستند سازد.

---

## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)

### آنچه باید پوشش داده شود (In-Scope):
1. **جادوی فضای سفید (Whitespace): تنفس محتوا:**
   * تصور اشتباه مبتدیان: «فضای خالی یعنی هدر رفتن فضای مانیتور، پس تا می‌توانیم المان‌ها را به هم بچسبانیم!»
   * واقعیت طراحی پریمیوم: فضای سفید تفاوت میان یک سایت شلخته ارزان‌قیمت با یک محصول تمیز و گران‌بها است.
2. **سیستم گرید ۸ پیکسلی (The 8pt Grid Standard):**
   * چرا کل ابعاد، فاصله‌ها و آیکون‌ها در وب بر مضارب عدد ۸ (و در موارد ریز ۴) تنظیم می‌شوند:
     * ۴ پیکسل (فواصل فوق فشرده نظیر آیکون کنار متن)
     * ۸ پیکسل (`p-2` در تیلویند)
     * ۱۶ پیکسل (`p-4` - فاصله استاندارد داخل کارت‌ها)
     * ۲۴ پیکسل (`p-6` - فاصله بین المان‌های داخلی)
     * ۳۲ پیکسل (`gap-8` - فاصله بین کارت‌های گرید)
     * ۶۴ پیکسل (`py-16` - فاصله عمودی بین سکشن‌های مختلف صفحه)
3. **موتورهای چیدمان: چه زمان Flexbox و چه زمان CSS Grid؟**
   * **Flexbox (تک‌بعدی - سطر یا ستون):** عالی برای نوار ناوبری (منو سمت راست، دکمه سمت چپ)، ردیف دکمه‌ها، چیپ‌های مهارت و المان‌های هم‌ردیف.
   * **CSS Grid (دوبعدی - سطرها و ستون‌های ماتریسی):** ساختار بی‌نظیر برای گرید کارت‌های پروژه‌ها (۱ ستون در موبایل $\rightarrow$ ۲ ستون در تبلت $\rightarrow$ ۳ ستون در دسکتاپ).
4. **استانداردهای چیدمان در Design.md (https://getdesign.md/design-md):**
   * مهار حداکثر عرض صفحه با کانتینرهای استاندارد (`max-w-6xl` یا `max-w-7xl` همراه با `mx-auto`) تا محتوا در مانیتورهای عریض از هم نپاشد.
   * قانون طلایی سلسله‌مراتب فواصل:  
     *فاصله بین سکشن‌ها > فاصله بین کارت‌ها > فاصله درون کارت‌ها.*
5. **چیدمان دو محیط پروژه محوری (پورتفولیو):**
   * چیدمان صفحه اصلی عمومی: کانتینر وسط‌چین با حاشیه‌های تنفس‌دار در اطراف.
   * چیدمان پیشخوان ادمین: ستون سایدبار ناوبری ثابت در کنار محتوای اسکرول‌شونده فرم‌ها.
6. **کال‌اوت‌های Quera:**
   * `<details class="violet">`: چرا سیستم گرید ۸ پیکسلی به طور طبیعی در سیستم کلاس‌های Tailwind CSS تعبیه شده است؟
   * `<details class="red">`: تله «چسبیدن به لبه‌ها»؛ هرگز اجازه ندهید محتوا بدون پدینگ به حاشیه‌های کناری صفحه‌نمایش یا دیواره کارت‌ها بچسبد.

### آنچه نباید وارد آن شویم (Out-of-Scope):
- مباحث مدیاکوئری‌ها و واکنش‌گرایی اختصاصی موبایل (درس بعدی ۵.۶).
- کدهای جاوااسکریپتی دستکاری DOM (فصل‌های آینده).

---

## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
| :--- | :--- | :--- |
| Whitespace / Negative Space | فضای منفی / فضای سفید | فضای خالی و بدون المان بین اجزای صفحه که باعث آرامش چشم و تمرکز می‌شود |
| 8pt Grid System | سیستم گرید ۸ پیکسلی | استاندارد صنعتی چیدمان که تمام فواصل و ابعاد را بر مضرب عدد ۸ تنظیم می‌کند |
| Flexbox | جعبه انعطاف‌پذیر فلکس | مدل چیدمان تک‌بعدی برای توزیع فضا و تراز کردن عناصر در یک سطر یا ستون |
| CSS Grid | گرید سی‌اس‌اس | مدل چیدمان دوبعدی برای ایجاد ماتریس‌های پیچیده سطری و ستونی با چیدمان ریسپانسیو |
| Container / Max-Width | کانتینر / سقف عرض | کادری محدودکننده که از کشیده شدن بی‌رویه محتوا در نمایشگرهای بسیار بزرگ جلوگیری می‌کند |

---

## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:

1. **تصویر کاور درس:** `images/cover.png`
   * **موضوع:** کاور مدرن با تم تیره و خط‌کش‌های شیشه‌ای دیجیتال نئونی که گرید ۸ پیکسلی و فواصل منظم المان‌ها را روی بوم وب نشان می‌دهد.
2. **مقایسه چیدمان فشرده و شلوغ با چیدمان تنفس‌دار:** `images/whitespace-comparison.png`
   * **موضوع:** تصویر دونیمه‌ای: سمت چپ طراحی درهم‌رفته و ارزان در برابر سمت راست طراحی دارای فضای منفی لوکس و چشم‌نواز.
3. **خط‌کش مقیاس سیستم ۸ پیکسلی:** `images/eight-point-grid-ruler.png`
   * **موضوع:** اینفوگرافیک گام‌های مقیاس: ۴، ۸، ۱۶، ۲۴، ۳۲، ۴۸ و ۶۴ پیکسل همراه با معادل کلاس‌های Tailwind متناظر.
4. **فلکس‌باکس در برابر گرید در عمل:** `images/flexbox-vs-grid-usecase.png`
   * **موضوع:** دیاگرام کاربردی: هدر تک‌بعدی با Flexbox در برابر گرید ۳ ستونه کارت‌های پروژه با CSS Grid.
5. **معماری کانتینر و پدینگ‌ها در Design.md:** `images/design-md-layout-anatomy.png`
   * **موضوع:** اسکلت شماتیک لایه‌بندی صفحه پورتفولیو با نمایش عرض `max-w-6xl` و پدینگ‌های واکنش‌گرای حاشیه.

---

## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)

1. **تیتر اصلی:** `# فاصله‌گذاری و چیدمان: معماری سکوت و فضای سفید در وب`
2. **مقدمه:** چرا فاصله میان دکمه‌ها و المان‌ها، تفاوت یک سایت حرفه‌ای با یک آشفتگی بصری است؟
3. **جدول کاور درس**
4. **جادوی فضای سفید (Negative Space):** پایان دادن به ترس از فضای خالی.
5. **سیستم گرید ۸ پیکسلی: زبان مشترک چیدمان مهندسی:**
   * چرا عدد ۸؟
   * مقیاس‌های کاربردی از ۴ تا ۶۴ پیکسل.
6. **باکس نکته Quera (`<details class="violet">`):** هماهنگی مادرزادی کلاس‌های فواصل در Tailwind CSS با گرید ۸ پیکسلی.
7. **کدام موتور چیدمان؟ Flexbox یا CSS Grid:**
   * ناوبری و دکمه‌ها در قلمرو فلکس‌باکس.
   * ماتریس کارت‌های پروژه‌ها در قلمرو گرید.
8. **اصول چیدمان کانتینرها در Design.md (getdesign.md/design-md):**
   * مهار عرض با کانتینرهای استاندارد (`max-w-6xl mx-auto`).
   * قانون سلسله‌مراتب فواصل در سکشن‌ها.
9. **باکس هشدار Quera (`<details class="red">`):** پرهیز از فواصل تصادفی و چسبیدن محتوا به دیواره‌های صفحه.
10. **جمع‌بندی درس‌نامه:** تثبیت چیدمان پورتفولیو و آمادگی برای تطبیق آن با ابعاد مختلف دستگاه‌ها در طراحی واکنش‌گرا.

---

## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- [ ] ارزش فضای منفی و سفید به عنوان شاخص طراحی پریمیوم به درستی تبیین شده باشد.
- [ ] سیستم گرید ۸ پیکسلی به همراه مقادیر دقیق و معادل‌های مدرن آموزش داده شود.
- [ ] مرز تفکیک کاربرد Flexbox و CSS Grid همراه با نمودار روشن گردد.
- [ ] استانداردهای کانتینر و راهنماهای Design.md در طراحی پورتفولیو لحاظ شوند.