484 lines
27 KiB
Markdown
484 lines
27 KiB
Markdown
# 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! 📐**
|