responsive-design

# Responsive Design Skill

Patterns for building responsive user interfaces that work across all device sizes.

## Mobile-First Approach

Design for mobile first, then enhance for larger screens.

```css
/* Mobile first (default) */
.container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    flex-direction: row;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}
```

## Breakpoint System

### Standard Breakpoints

```typescript
const breakpoints = {
  sm: '640px',   // Small phones
  md: '768px',   // Tablets
  lg: '1024px',  // Small laptops
  xl: '1280px',  // Desktops
  '2xl': '1536px' // Large screens
};
```

### Tailwind CSS Usage

```html
<!-- Mobile: stack, Tablet: 2 columns, Desktop: 3 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card />
  <Card />
  <Card />
</div>

<!-- Hide on mobile, show on tablet+ -->
<nav class="hidden md:block">
  <DesktopNavigation />
</nav>

<!-- Show on mobile, hide on tablet+ -->
<button class="md:hidden">
  <MenuIcon />
</button>
```

## Responsive Patterns

### Responsive Grid

```typescript
// CSS Grid with auto-fit
function ResponsiveGrid({ children, minWidth = '300px' }) {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(auto-fit, minmax(${minWidth}, 1fr))`,
        gap: '1rem',
      }}
    >
      {children}
    </div>
  );
}
```

### Responsive Typography

```css
/* Fluid typography */
.heading {
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.2;
}

/* Responsive scale */
:root {
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
}

@media (min-width: 768px) {
  :root {
    --text-base: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
  }
}
```

### Responsive Navigation

```typescript
function Navigation() {
  const [isOpen, setIsOpen] =