الـ CSS

الهدف

بنهاية الدرس تبني تخطيط (layout) بـ Flexbox و Grid، تكتب تصميم متجاوب (responsive design) بـ Tailwind من الـ mobile لـ desktop، وعندك card grid كامل يتكيّف مع حجم الشاشة.

ليش هذا الحين؟

ترى layout هو أكثر شي يوقف الـ founders — يقعدون ساعات يحاولون يحطون شي في النص. Flexbox و Grid يحلّون 90% من المشاكل، و Tailwind يخلي كتابة تنسيقات (CSS) أسرع وأنظف من أي طريقة ثانية. و responsive مو اختياري — أكثر من 60% من زوار أي site يجون من الموبايل.

الفكرة

Flexbox = layout أحادي البعد. يشتغل على محور واحد — إما أفقي أو عمودي. مثالي للـ nav bars وصفوف الـ cards وتوزيع العناصر في خط.

Flex Row:  [item1] [item2] [item3]  ← أفقي
Flex Col:  [item1]
           [item2]
           [item3]  ← عمودي

CSS Grid = layout ثنائي البعد. يشتغل على صفوف وأعمدة في نفس الوقت. مثالي لبنية الصفحة الكاملة وعرض الـ cards.

Grid:
[header                    ]
[sidebar ] [main content   ]
[footer                    ]

متى تستخدم أي واحد فيهم؟

• Nav bar، صف cards، header: Flexbox
• بنية الصفحة، card grid، magazine layout: Grid
• مو لازم تختار — وايد من الـ layouts تجمع الاثنين

Tailwind = utility-first CSS. بدل ما تكتب CSS منفصل، تحط classes مباشرة على الـ HTML. أسرع بوايد، وما تحتاج تبدّل بين ملفات.

// CSS عادي
// button.css:  .btn { background: blue; padding: 8px 16px; border-radius: 6px; }
// JSX:         <button className="btn">Click</button>

// Tailwind
<button className="bg-blue-500 px-4 py-2 rounded">Click</button>

Responsive Design = mobile-first. تبدأ بتصميم الموبايل (أصغر شاشة) وتضيف نقاط التحول (breakpoints) للشاشات الأكبر.

Tailwind breakpoints:

• Default (بدون prefix): < 640px → موبايل
• sm: → ≥ 640px
• md: → ≥ 768px (تابلت)
• lg: → ≥ 1024px (desktop)
• xl: → ≥ 1280px