responsive-design

Responsive Design Guidelines

Core Principles

• Write semantic HTML to improve accessibility and SEO
• Use CSS for styling, avoiding inline styles
• Ensure responsive design using media queries and flexible layouts
• Prioritize accessibility by using ARIA roles and attributes
• Design mobile-first, then enhance for larger screens

Mobile-First Approach

Strategy

• Start with styles for the smallest viewport
• Add complexity through progressive enhancement
• Base styles work without media queries
• Media queries add features for larger screens

Benefits

• Forces prioritization of essential content
• Improves performance on mobile devices
• Ensures core functionality works everywhere
• Reduces CSS complexity and specificity issues

/* Base styles for mobile */
.container {
  padding: 1rem;
}

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

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

Flexible Layouts

Flexbox

• Use for one-dimensional layouts (row or column)
• Leverage flex-wrap for responsive wrapping
• Use gap for consistent spacing
• Combine with media queries for layout changes

CSS Grid

• Use for two-dimensional layouts
• Leverage auto-fit and auto-fill for responsive grids
• Use minmax() for flexible track sizing
• Combine fr units with fixed minimums

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

Container Queries

• Style components based on container size, not viewport
• Use for truly reusable components
• Define containers with container-type

Responsive Typography

Fluid Typography

• Use clamp() for responsive font sizes
• Set minimum, preferred, and maximum values
• Avoid text that's too small on mobile or too large on desktop

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

Units

• Use rem for scalable typography
• Base rem on user's browser settings
• Use em for component-relative sizing
• Avoid fixed px values for font sizes