car_mms/RESPONSIVE_CHECKLIST.md

Responsive Design Checklist

Quick reference for making your components responsive.

---

🎯 Quick Wins

1. Replace Fixed Grids

// ❌ 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

// ❌ Before
<h1 className="text-3xl font-bold">

// ✅ After
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold">

3. Responsive Padding

// ❌ Before
<div className="p-6">

// ✅ After
<div className="p-4 md:p-5 lg:p-6">

4. Responsive Spacing

// ❌ 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

// ❌ Before
<div className="flex gap-4">

// ✅ After
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">

---

📱 Component Patterns

Buttons

// 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

<div className="bg-white p-4 sm:p-5 md:p-6 rounded-lg shadow">
  {/* Content */}
</div>

Forms

<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

<img 
  src={url}
  alt="description"
  className="w-full h-auto object-cover rounded-lg"
  loading="lazy"
/>

Modals

<div className="w-full sm:max-w-md md:max-w-lg lg:max-w-xl">
  {/* Modal content */}
</div>

---

🎨 Typography Scale

// 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

// 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

<Grid cols={{ xs: 1, sm: 2, lg: 4 }} gap="md">
  <StatCard />
  <StatCard />
  <StatCard />
  <StatCard />
</Grid>

Two-Column Form

<Grid cols={{ xs: 1, md: 2 }} gap="md">
  <FormField />
  <FormField />
</Grid>

Three-Column Content

<Grid cols={{ xs: 1, sm: 2, lg: 3 }} gap="md">
  <Card />
  <Card />
  <Card />
</Grid>

Sidebar + Content

<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

// Bad
<div className="w-[500px]">

// Good
<div className="w-full max-w-md">

❌ Don't Forget Mobile-First

// 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

// 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

// 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

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
• WCAG Guidelines
• Touch Target Sizes
• Mobile-First Design

---

Print this checklist and keep it handy while coding! 📋