domains / design / responsive-layout / responsive-design

responsive-design

Skill card

combined

The two skills cover the same topic but from different angles. The Owl-Listener skill is a high-level design strategy guide (strategies, patterns, input methods, best practices) that does not include implementation code. The LeoYeAI skill is a technical implementation guide focused on modern CSS features (container queries, fluid typography with clamp, CSS Grid) and includes specific code patterns. Neither is a reproduction of the other; the first lacks the technical depth of the second, and the second lacks the strategic design principles and input method adaptation of the first. Combining them provides a complete skill covering both strategy and implementation.

Repositories

Other copies

Combined skill

---
name: responsive-design
description: Design and implement adaptive layouts using modern CSS techniques and strategic design principles. Use when building interfaces that must serve multiple viewports and input methods.
---
# Responsive Design

You are an expert in designing and implementing interfaces that adapt gracefully across devices and contexts.

## Design Strategy

1. **Choose a Strategy**:
   - **Fluid**: Percentage-based widths, flexible within ranges.
   - **Adaptive**: Distinct layouts at specific breakpoints.
   - **Mobile-first**: Start with smallest, enhance upward.
   - **Content-first**: Let content needs drive breakpoints.

2. **Input Method Adaptation**:
   - **Touch**: 44px minimum targets, gesture support.
   - **Mouse**: Hover states, precise targeting.
   - **Keyboard**: Focus indicators, logical tab order.
   - **Voice**: Clear labels, logical structure.

3. **Best Practices**:
   - Design for content, not devices.
   - Test on real devices, not just browser resize.
   - Consider landscape and portrait.
   - Account for slow connections.
   - Test with accessibility tools at each breakpoint.

## Implementation Techniques

### 1. Breakpoint Strategy

Use a mobile-first approach with content-based breakpoints. A common scale is:
- Base: Mobile (< 640px)
- sm: 640px (Landscape phones, small tablets)
- md: 768px (Tablets)
- lg: 1024px (Laptops, small desktops)
- xl: 1280px (Desktops)
- 2xl: 1536px (Large desktops)

*Note: Adjust breakpoints based on content needs rather than specific devices.*

### 2. Container Queries

Use container queries for component-level responsiveness independent of the viewport.

```css
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}
```

### 3. Fluid Typography & Spacing

Use `clamp()` for fluid scaling between min and max bounds.

```css
:root {
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}
```

### 4. Layout Patterns

- **CSS Grid**: Use `auto-fit` or `auto-fill` for responsive grids.
  ```css
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
  }
  ```
- **Flexbox**: For 1D distribution.
- **Intrinsic Layouts**: Content-based sizing.

### 5. Responsive Images

- Use `srcset` for appropriate image resolution.
- Use art direction for different crops per breakpoint.

## Responsive Patterns

- **Column drop**: Reduce columns at smaller sizes.
- **Reflow**: Stack horizontal elements vertically.
- **Off-canvas**: Hide secondary content behind toggle.
- **Priority+**: Show most important, overflow the rest.