demo2
This commit is contained in:
305
RESPONSIVE_CHECKLIST.md
Normal file
305
RESPONSIVE_CHECKLIST.md
Normal file
@@ -0,0 +1,305 @@
|
||||
# Responsive Design Checklist
|
||||
|
||||
Quick reference for making your components responsive.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Quick Wins
|
||||
|
||||
### 1. Replace Fixed Grids
|
||||
```typescript
|
||||
// ❌ Before
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
|
||||
// ✅ After
|
||||
<Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4 }} gap="md">
|
||||
```
|
||||
|
||||
### 2. Responsive Text Sizes
|
||||
```typescript
|
||||
// ❌ Before
|
||||
<h1 className="text-3xl font-bold">
|
||||
|
||||
// ✅ After
|
||||
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold">
|
||||
```
|
||||
|
||||
### 3. Responsive Padding
|
||||
```typescript
|
||||
// ❌ Before
|
||||
<div className="p-6">
|
||||
|
||||
// ✅ After
|
||||
<div className="p-4 md:p-5 lg:p-6">
|
||||
```
|
||||
|
||||
### 4. Responsive Spacing
|
||||
```typescript
|
||||
// ❌ Before
|
||||
<div className="space-y-6">
|
||||
|
||||
// ✅ After
|
||||
<div className="space-y-4 md:space-y-5 lg:space-y-6">
|
||||
```
|
||||
|
||||
### 5. Stack on Mobile, Inline on Desktop
|
||||
```typescript
|
||||
// ❌ Before
|
||||
<div className="flex gap-4">
|
||||
|
||||
// ✅ After
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 Component Patterns
|
||||
|
||||
### Buttons
|
||||
```typescript
|
||||
// Full width on mobile, auto on desktop
|
||||
<Button className="w-full sm:w-auto">
|
||||
حفظ
|
||||
</Button>
|
||||
|
||||
// Responsive button group
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<Button className="w-full sm:w-auto">إلغاء</Button>
|
||||
<Button className="w-full sm:w-auto">حفظ</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Cards
|
||||
```typescript
|
||||
<div className="bg-white p-4 sm:p-5 md:p-6 rounded-lg shadow">
|
||||
{/* Content */}
|
||||
</div>
|
||||
```
|
||||
|
||||
### Forms
|
||||
```typescript
|
||||
<form className="space-y-4 md:space-y-6">
|
||||
<Grid cols={{ xs: 1, md: 2 }} gap="md">
|
||||
<FormField label="الاسم" name="name" />
|
||||
<FormField label="البريد" name="email" />
|
||||
</Grid>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Images
|
||||
```typescript
|
||||
<img
|
||||
src={url}
|
||||
alt="description"
|
||||
className="w-full h-auto object-cover rounded-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
```
|
||||
|
||||
### Modals
|
||||
```typescript
|
||||
<div className="w-full sm:max-w-md md:max-w-lg lg:max-w-xl">
|
||||
{/* Modal content */}
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Typography Scale
|
||||
|
||||
```typescript
|
||||
// Headings
|
||||
h1: "text-xl sm:text-2xl md:text-3xl lg:text-4xl"
|
||||
h2: "text-lg sm:text-xl md:text-2xl lg:text-3xl"
|
||||
h3: "text-base sm:text-lg md:text-xl lg:text-2xl"
|
||||
h4: "text-sm sm:text-base md:text-lg"
|
||||
|
||||
// Body
|
||||
large: "text-base sm:text-lg"
|
||||
normal: "text-sm sm:text-base"
|
||||
small: "text-xs sm:text-sm"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📏 Spacing Scale
|
||||
|
||||
```typescript
|
||||
// Padding
|
||||
xs: "p-2 sm:p-3"
|
||||
sm: "p-3 sm:p-4"
|
||||
md: "p-4 sm:p-5 md:p-6"
|
||||
lg: "p-5 sm:p-6 md:p-7 lg:p-8"
|
||||
|
||||
// Gap
|
||||
xs: "gap-2 sm:gap-2.5 md:gap-3"
|
||||
sm: "gap-3 sm:gap-4"
|
||||
md: "gap-4 sm:gap-5 md:gap-6"
|
||||
lg: "gap-6 sm:gap-7 md:gap-8"
|
||||
|
||||
// Space-y
|
||||
xs: "space-y-2 sm:space-y-3"
|
||||
sm: "space-y-3 sm:space-y-4"
|
||||
md: "space-y-4 sm:space-y-5 md:space-y-6"
|
||||
lg: "space-y-6 sm:space-y-7 md:space-y-8"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Common Layouts
|
||||
|
||||
### Dashboard Stats Grid
|
||||
```typescript
|
||||
<Grid cols={{ xs: 1, sm: 2, lg: 4 }} gap="md">
|
||||
<StatCard />
|
||||
<StatCard />
|
||||
<StatCard />
|
||||
<StatCard />
|
||||
</Grid>
|
||||
```
|
||||
|
||||
### Two-Column Form
|
||||
```typescript
|
||||
<Grid cols={{ xs: 1, md: 2 }} gap="md">
|
||||
<FormField />
|
||||
<FormField />
|
||||
</Grid>
|
||||
```
|
||||
|
||||
### Three-Column Content
|
||||
```typescript
|
||||
<Grid cols={{ xs: 1, sm: 2, lg: 3 }} gap="md">
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
</Grid>
|
||||
```
|
||||
|
||||
### Sidebar + Content
|
||||
```typescript
|
||||
<Grid cols={{ xs: 1, lg: 12 }} gap="md">
|
||||
<div className="lg:col-span-3">
|
||||
{/* Sidebar */}
|
||||
</div>
|
||||
<div className="lg:col-span-9">
|
||||
{/* Main content */}
|
||||
</div>
|
||||
</Grid>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Testing Checklist
|
||||
|
||||
### Visual Testing
|
||||
- [ ] Test at 375px (iPhone)
|
||||
- [ ] Test at 768px (iPad)
|
||||
- [ ] Test at 1024px (Laptop)
|
||||
- [ ] Test at 1920px (Desktop)
|
||||
- [ ] No horizontal scrolling
|
||||
- [ ] All text is readable
|
||||
- [ ] Images scale properly
|
||||
- [ ] No overlapping elements
|
||||
|
||||
### Interaction Testing
|
||||
- [ ] All buttons are tappable (44x44px min)
|
||||
- [ ] Forms work on mobile
|
||||
- [ ] Dropdowns don't overflow
|
||||
- [ ] Modals fit on screen
|
||||
- [ ] Navigation menu works
|
||||
- [ ] Links are easy to tap
|
||||
|
||||
### Accessibility Testing
|
||||
- [ ] Tab through all interactive elements
|
||||
- [ ] Escape closes menus/modals
|
||||
- [ ] Focus indicators visible
|
||||
- [ ] Screen reader announces changes
|
||||
- [ ] Color contrast meets WCAG AA
|
||||
- [ ] Text can be zoomed to 200%
|
||||
|
||||
---
|
||||
|
||||
## 🚫 Common Mistakes to Avoid
|
||||
|
||||
### ❌ Don't Use Fixed Widths
|
||||
```typescript
|
||||
// Bad
|
||||
<div className="w-[500px]">
|
||||
|
||||
// Good
|
||||
<div className="w-full max-w-md">
|
||||
```
|
||||
|
||||
### ❌ Don't Forget Mobile-First
|
||||
```typescript
|
||||
// Bad - Desktop first
|
||||
<div className="text-lg md:text-base">
|
||||
|
||||
// Good - Mobile first
|
||||
<div className="text-base md:text-lg">
|
||||
```
|
||||
|
||||
### ❌ Don't Use Absolute Positioning Without Responsive Adjustments
|
||||
```typescript
|
||||
// Bad
|
||||
<div className="absolute top-4 right-4">
|
||||
|
||||
// Good
|
||||
<div className="absolute top-2 right-2 sm:top-4 sm:right-4">
|
||||
```
|
||||
|
||||
### ❌ Don't Forget Touch Targets
|
||||
```typescript
|
||||
// Bad
|
||||
<button className="p-1 text-xs">
|
||||
|
||||
// Good
|
||||
<button className="min-h-[44px] px-4 py-2 text-sm">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Breakpoint Reference
|
||||
|
||||
```
|
||||
xs: 320px → 639px (Mobile)
|
||||
sm: 640px → 767px (Large Mobile)
|
||||
md: 768px → 1023px (Tablet)
|
||||
lg: 1024px → 1279px (Laptop)
|
||||
xl: 1280px → 1535px (Desktop)
|
||||
2xl: 1536px → 1919px (Large Desktop)
|
||||
3xl: 1920px+ (Ultra-wide)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Useful Hooks
|
||||
|
||||
```typescript
|
||||
import { useIsMobile, useIsTablet, useIsDesktop } from '~/hooks/useMediaQuery';
|
||||
|
||||
function MyComponent() {
|
||||
const isMobile = useIsMobile(); // < 768px
|
||||
const isTablet = useIsTablet(); // 768px - 1023px
|
||||
const isDesktop = useIsDesktop(); // >= 1024px
|
||||
|
||||
if (isMobile) {
|
||||
return <MobileView />;
|
||||
}
|
||||
|
||||
return <DesktopView />;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 Resources
|
||||
|
||||
- [Tailwind Responsive Design](https://tailwindcss.com/docs/responsive-design)
|
||||
- [WCAG Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
|
||||
- [Touch Target Sizes](https://web.dev/accessible-tap-targets/)
|
||||
- [Mobile-First Design](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Mobile_first)
|
||||
|
||||
---
|
||||
|
||||
**Print this checklist and keep it handy while coding! 📋**
|
||||
Reference in New Issue
Block a user