feat: add chapter 05-design-and-ux specs

chapters/05-design-and-ux/04-lesson-spacing-and-layout/spec.md

@@ -0,0 +1,106 @@
+# مشخصات درس‌نامه: فاصله‌گذاری و چیدمان (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 در طراحی پورتفولیو لحاظ شوند.