27 KiB
27 KiB
Responsive Behavior Diagram
Visual guide to understand how your application adapts across different screen sizes.
📱 Layout Behavior by Screen Size
┌─────────────────────────────────────────────────────────────────────┐
│ MOBILE (320px - 767px) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ☰ لوحة التحكم أحمد [خروج] │ │
│ │ Header (z-index: 50) │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Content Area (Full Width) │ │
│ │ - Single column grid │ │
│ │ - Stacked cards │ │
│ │ - Full-width buttons │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ When hamburger (☰) clicked: │
│ ┌──────────────────────┐ │
│ │ [Overlay: 50% black] │ ┌────────────────────────┐ │
│ │ │ │ نظام الصيانة [×] │ │
│ │ │ ├────────────────────────┤ │
│ │ │ │ 📊 لوحة التحكم │ │
│ │ │ │ 👥 العملاء │ │
│ │ │ │ 🚗 المركبات │ │
│ │ │ │ 🔧 زيارات الصيانة │ │
│ │ │ │ 💰 المصروفات │ │
│ │ │ │ 📈 التقارير المالية │ │
│ │ │ │ 👤 إدارة المستخدمين │ │
│ │ │ │ ⚙️ إعدادات النظام │ │
│ │ │ └────────────────────────┘ │
│ │ (z-index: 45) │ Sidebar (z-index: 40) │
│ └──────────────────────┘ Width: 320px (max 85vw) │
│ Slides in from right │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ TABLET (768px - 1023px) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ☰ نظام الصيانة أحمد محمد [خروج] │ │
│ │ Header (z-index: 50) │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Content Area (Full Width) │ │
│ │ - 2-3 column grids │ │
│ │ - Side-by-side cards │ │
│ │ - Inline buttons │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ Behavior: Same as mobile (overlay menu) │
│ Reason: Prevents sidebar from taking too much space │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ DESKTOP (1024px - 1279px) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┬──────────────────────────────────────────────────┐ │
│ │ نظام │ مرحباً، أحمد محمد [خروج] │ │
│ │ الصيانة │ مدير عام │ │
│ │ [<] │ Header (z-index: 50) │ │
│ ├──────────┴──────────────────────────────────────────────────┤ │
│ │ 📊 لوحة │ │ │
│ │ التحكم│ │ │
│ │ │ Content Area │ │
│ │ 👥 العملاء│ - 3-4 column grids │ │
│ │ │ - Multi-column layouts │ │
│ │ 🚗 المركبات│ - Optimized spacing │ │
│ │ │ │ │
│ │ 🔧 زيارات │ │ │
│ │ الصيانة│ │ │
│ │ │ │ │
│ │ 💰 المصروفات│ │ │
│ │ │ │ │
│ │ 📈 التقارير│ │ │
│ │ المالية│ │ │
│ │ │ │ │
│ │ 👤 إدارة │ │ │
│ │ المستخدمين│ │ │
│ │ │ │ │
│ │ ⚙️ إعدادات│ │ │
│ │ النظام │ │ │
│ │ │ │ │
│ └──────────┴──────────────────────────────────────────────────┘ │
│ Sidebar: 256px (expanded) │
│ Click [<] to collapse to 64px │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ DESKTOP COLLAPSED (1024px+, Sidebar Collapsed) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──┬────────────────────────────────────────────────────────────┐ │
│ │🏢│ مرحباً، أحمد محمد [خروج] │ │
│ │ │ مدير عام │ │
│ │[>]│ Header (z-index: 50) │ │
│ ├──┴────────────────────────────────────────────────────────────┤ │
│ │📊│ │ │
│ │ │ │ │
│ │👥│ Content Area (More Space) │ │
│ │ │ - 4-6 column grids possible │ │
│ │🚗│ - Maximum content width │ │
│ │ │ - Optimal for data tables │ │
│ │🔧│ │ │
│ │ │ │ │
│ │💰│ │ │
│ │ │ │ │
│ │📈│ │ │
│ │ │ │ │
│ │👤│ │ │
│ │ │ │ │
│ │⚙️│ │ │
│ │ │ │ │
│ └──┴────────────────────────────────────────────────────────────┘ │
│ Sidebar: 64px (collapsed, icons only) │
│ Hover over icons shows tooltip │
│ Click [>] to expand back to 256px │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ ULTRA-WIDE (1920px+) │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┬──────────────────────────────────────────────────┐ │
│ │ نظام │ مرحباً، أحمد محمد بن علي [خروج] │ │
│ │ الصيانة │ مدير عام - المستوى 1 │ │
│ │ [<] │ Header (z-index: 50) │ │
│ ├──────────┴──────────────────────────────────────────────────┤ │
│ │ 📊 لوحة │ │ │
│ │ التحكم│ │ │
│ │ │ Content Area (Max Width Container) │ │
│ │ 👥 العملاء│ - Centered with max-width │ │
│ │ │ - 4-6 column grids │ │
│ │ 🚗 المركبات│ - Prevents content from being too wide │ │
│ │ │ - Optimal reading width │ │
│ │ 🔧 زيارات │ │ │
│ │ الصيانة│ │ │
│ │ │ │ │
│ │ 💰 المصروفات│ │ │
│ │ │ │ │
│ │ 📈 التقارير│ │ │
│ │ المالية│ │ │
│ │ │ │ │
│ │ 👤 إدارة │ │ │
│ │ المستخدمين│ │ │
│ │ │ │ │
│ │ ⚙️ إعدادات│ │ │
│ │ النظام │ │ │
│ │ │ │ │
│ └──────────┴──────────────────────────────────────────────────┘ │
│ Sidebar: 256px (expanded) │
│ Content: Centered with comfortable max-width │
│ No layout breaks or overflow │
└─────────────────────────────────────────────────────────────────────┘
🎯 Grid Behavior Examples
Dashboard Stats Cards
Mobile (xs):
┌─────────────────┐
│ Card 1 │
├─────────────────┤
│ Card 2 │
├─────────────────┤
│ Card 3 │
├─────────────────┤
│ Card 4 │
└─────────────────┘
cols={{ xs: 1 }}
Tablet (sm):
┌─────────┬─────────┐
│ Card 1 │ Card 2 │
├─────────┼─────────┤
│ Card 3 │ Card 4 │
└─────────┴─────────┘
cols={{ sm: 2 }}
Desktop (lg):
┌────┬────┬────┬────┐
│ C1 │ C2 │ C3 │ C4 │
└────┴────┴────┴────┘
cols={{ lg: 4 }}
Usage:
<Grid cols={{ xs: 1, sm: 2, lg: 4 }} gap="md">
<StatCard />
<StatCard />
<StatCard />
<StatCard />
</Grid>
Form Layout
Mobile (xs):
┌─────────────────┐
│ Name │
├─────────────────┤
│ Email │
├─────────────────┤
│ Phone │
├─────────────────┤
│ Address │
└─────────────────┘
Desktop (md):
┌─────────┬─────────┐
│ Name │ Email │
├─────────┼─────────┤
│ Phone │ Address │
└─────────┴─────────┘
Usage:
<Grid cols={{ xs: 1, md: 2 }} gap="md">
<FormField label="الاسم" />
<FormField label="البريد" />
<FormField label="الهاتف" />
<FormField label="العنوان" />
</Grid>
🎨 Z-Index Layering
┌─────────────────────────────────────────┐
│ Toast Notifications (z-index: 70) │ ← Highest
├─────────────────────────────────────────┤
│ Modals (z-index: 60) │
├─────────────────────────────────────────┤
│ Header (z-index: 50) │
├─────────────────────────────────────────┤
│ Overlay (z-index: 45) │
├─────────────────────────────────────────┤
│ Sidebar (z-index: 40) │
├─────────────────────────────────────────┤
│ Content (z-index: 0) │ ← Base
└─────────────────────────────────────────┘
This ensures:
✅ Modals appear above everything
✅ Header stays on top during scroll
✅ Overlay appears between sidebar and content
✅ No z-index conflicts
📱 Touch Target Sizes
Minimum Touch Target: 44x44px (WCAG Guidelines)
❌ Too Small:
┌──────┐
│ [×] │ 30x30px - Hard to tap
└──────┘
✅ Good:
┌──────────┐
│ [×] │ 44x44px - Easy to tap
└──────────┘
✅ Better:
┌────────────┐
│ [×] │ 48x48px - Very comfortable
└────────────┘
Implementation:
<button className="min-h-[44px] min-w-[44px] p-2">
<Icon />
</button>
🔄 Sidebar Transition States
Desktop Sidebar Toggle Animation:
Expanded (256px) Collapsing Collapsed (64px)
┌──────────────┐ ┌────────┐ ┌──┐
│ نظام الصيانة │ → │ نظام │ → │🏢│
│ [<] │ │ [<] │ │[>]│
├──────────────┤ ├────────┤ ├──┤
│ 📊 لوحة التحكم│ │ 📊 لوحة│ │📊│
│ 👥 العملاء │ │ 👥 العم│ │👥│
│ 🚗 المركبات │ │ 🚗 المر│ │🚗│
└──────────────┘ └────────┘ └──┘
300ms transition with ease-out easing
GPU-accelerated (transform: translateX)
Mobile Menu Animation:
Closed Opening Open
┌──────────┐ ┌──────────────┐
│[Overlay] │ │ [Overlay] │
│ │ │ │
│ ┌───┤ │ ┌───────────┤
│ │نظام│ │ │ نظام │
│ │[×]│ │ │ الصيانة [×]│
│ ├───┤ │ ├───────────┤
│ │📊 │ │ │📊 لوحة │
│ │👥 │ │ │👥 العملاء │
│ └───┘ │ └───────────┘
Slides in from right with overlay fade-in
300ms transition with ease-out easing
🎯 Responsive Padding Scale
Component Padding by Screen Size:
Mobile (xs): p-4 (16px)
┌────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓ Content ▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓ │
└────────────────┘
Tablet (md): p-5 (20px)
┌──────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓ Content ▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└──────────────────┘
Desktop (lg): p-6 (24px)
┌────────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓ Content ▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└────────────────────┘
Large (xl): p-8 (32px)
┌──────────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓ Content ▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└──────────────────────┘
Usage:
<div className="p-4 sm:p-5 md:p-6 lg:p-8">
📐 Typography Scale
Heading 1:
Mobile: text-xl (20px) ████████
Tablet: text-2xl (24px) ██████████
Desktop: text-3xl (30px) ████████████
Heading 2:
Mobile: text-lg (18px) ██████
Tablet: text-xl (20px) ████████
Desktop: text-2xl (24px) ██████████
Body:
Mobile: text-sm (14px) ████
Tablet: text-base (16px) █████
Desktop: text-base (16px) █████
Small:
Mobile: text-xs (12px) ███
Tablet: text-sm (14px) ████
Desktop: text-sm (14px) ████
🎨 Color & Contrast
Background Colors:
┌─────────────────────────────────┐
│ bg-gray-50 (Very light gray) │ ← Page background
├─────────────────────────────────┤
│ bg-white (White) │ ← Cards, sidebar
├─────────────────────────────────┤
│ bg-blue-50 (Light blue) │ ← Active states
└─────────────────────────────────┘
Text Colors:
┌─────────────────────────────────┐
│ text-gray-900 (Almost black) │ ← Primary text (4.5:1)
├─────────────────────────────────┤
│ text-gray-600 (Medium gray) │ ← Secondary text (4.5:1)
├─────────────────────────────────┤
│ text-gray-500 (Light gray) │ ← Tertiary text (4.5:1)
└─────────────────────────────────┘
All combinations meet WCAG AA standards (4.5:1 contrast ratio)
🚀 Performance Optimizations
Sidebar Animation:
✅ Uses transform (GPU-accelerated)
✅ Uses transition-transform
❌ Avoids animating width directly
Before (Slow):
.sidebar {
width: 256px;
transition: width 300ms; ← CPU-intensive
}
After (Fast):
.sidebar {
width: 256px;
transform: translateX(0);
transition: transform 300ms; ← GPU-accelerated
}
Result: Smooth 60fps animations
📱 Breakpoint Decision Tree
Is viewport width < 768px?
├─ YES → Mobile Layout
│ ├─ Hamburger menu
│ ├─ Single column grids
│ ├─ Stacked buttons
│ └─ Compact header
│
└─ NO → Is viewport width < 1024px?
├─ YES → Tablet Layout
│ ├─ Hamburger menu (like mobile)
│ ├─ 2-3 column grids
│ ├─ Inline buttons
│ └─ Medium header
│
└─ NO → Desktop Layout
├─ Persistent sidebar
├─ 3-4+ column grids
├─ Full header
└─ Collapsible sidebar option
Use these diagrams as reference while implementing responsive design! 📐