responsive-helper

Responsive Helper Skill

This skill helps you create responsive designs that work beautifully across all devices. I'll guide you through responsive patterns, breakpoint strategies, and modern techniques like container queries and fluid typography.

What I Can Help With

Breakpoint Design

• Define appropriate breakpoints
• Mobile-first vs desktop-first strategies
• Custom breakpoint systems
• Content-based breakpoints

Fluid Typography

• Responsive font sizing with clamp()
• Modular scale systems
• Viewport-based sizing
• Accessible responsive text

Container Queries

• Component-responsive layouts
• Container-based breakpoints
• Intrinsic responsive design
• Container query units

Responsive Patterns

• Grid systems
• Navigation patterns
• Image handling
• Table responsiveness
• Form layouts

Standard Breakpoint System

Common Device Breakpoints

/* Mobile-first approach (recommended) */
/* Base styles: Mobile (< 640px) */

@media (min-width: 640px) {
  /* Small tablet / Large phone (sm) */
}

@media (min-width: 768px) {
  /* Tablet (md) */
}

@media (min-width: 1024px) {
  /* Desktop (lg) */
}

@media (min-width: 1280px) {
  /* Large desktop (xl) */
}

@media (min-width: 1536px) {
  /* Extra large desktop (2xl) */
}

Custom Property Breakpoints

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Can't use in media queries directly, but useful for JavaScript */

Mobile-First vs Desktop-First

Mobile-First (Recommended)

/* Base: Mobile styles (< 640px) */
.container {
  padding: 1rem;
  font-size: 1rem;
}

.grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Add complexity as screen grows */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    font-size: 1.125rem;
  }

  .grid {
    flex-direction: row;
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    font-size: 1.25rem;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}