Frontend Responsive Design Standards
Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.
When to use this skill
- When creating or modifying layouts that need to work on mobile, tablet, and desktop
- When implementing mobile-first design patterns starting with mobile layout
- When writing media queries or breakpoint-specific styles
- When using flexible units (rem, em, %) instead of fixed pixels for scalability
- When implementing fluid layouts with percentage-based widths or flexbox/grid
- When ensuring touch targets meet minimum size requirements (44x44px) for mobile
- When optimizing images and assets for different screen sizes and mobile networks
- When testing UI across multiple device sizes and breakpoints
- When maintaining readable typography across all screen sizes
- When prioritizing content display on smaller screens through layout decisions
- When using responsive design utilities in CSS frameworks (Tailwind, Bootstrap responsive classes)
This Skill provides Codex with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.
Mobile-First Development - Mandatory
Always start with mobile layout, then enhance for larger screens.
Bad (desktop-first):
.container {
width: 1200px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.container {
width: 100%;
grid-template-columns: 1fr;
}
}
Good (mobile-first):
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
max-width: 1200px;
grid-template-columns: repeat(4, 1fr);
}
}
Why mobile-first:
- Forces content prioritization
- Better performance on mobile (no overriding)
- Progressive enhancement over graceful degradation
Standard Breakpoints
Identify and use project breakpoints consistently:
Common breakpoint systems:
Tailwind:
sm: 640px (small tablets)
md: 768px (tablets)
lg: 1024px (laptops)
xl: 1280px (desktops)
2xl: 1536px (large desktops)
Bootstrap:
sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px
Check existing codebase for breakpoint definitions before creating new ones.
Usage (Tailwind):
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
Usage (CSS):
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
Never use arbitrary breakpoints like 850px or 1150px unless explicitly required.
Fluid Layouts
Use flexible containers that adapt to screen size:
Bad (fixed widths):
.container { width: 1200px; }
.sidebar { width: 300px; }
.content { width: 900px; }
Good (fluid):
.container {
width: 100%;
max-width: 1200px;
padding: 0 1rem;
}
.layout {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.layout {
grid-template-columns: 300px 1fr;
}
}
Patterns for fluid layouts:
- Flexbox:
flex: 1, flex-grow, flex-shrink
- Grid:
1fr, minmax(), auto-fit, auto-fill
- Percentage widths:
width: 100%, max-width: 1200px
- Container queries (modern):
@container (min-width: 400px)
Relative Units Over Fixed Pixels
Use rem/em for scalability and accessibility:
Bad:
font-size: 16px;
padding: 20px;
margin: 10px;
border-radius: 8px;
Good:
font-size: 1rem;
padding: 1.25rem;
margin: 0.625rem;
border-radius: 0.5rem;
When to use each unit:
rem: Font sizes, spacing, layout dimensions (scales with root font size)em: Component-relative sizing (scales with parent font size)%: Widths, heights relative to parentpx: Borders (1px), shadows, very small valuesvw/vh: Full viewport dimensions, hero sectionsch: Text-based widths (e.g., max-width: 65ch for readable line length)
Framework utilities handle this automatically:
<div className="text-base p-5 m-2.5 rounded-lg">
Touch-Friendly Design
Minimum touch target size: 44x44px (iOS) / 48x48px (Android)
Bad:
.icon-button {
width: 24px;
height: 24px;
}
Good:
.icon-button {
width: 24px;
height: 24px;
padding: 12px;
min-width: 44px;
min-height: 44px;
}
Touch target checklist:
Readable Typography
Maintain readable font sizes without zoom:
Bad:
body { font-size: 12px; }
.small-text { font-size: 10px; }
Good:
body { font-size: 1rem; }
.small-text { font-size: 0.875rem; }
Typography guidelines:
- Body text: 16px (1rem) minimum
- Small text: 14px (0.875rem) minimum
- Line height: 1.5 for body, 1.2 for headings
- Line length: 45-75 characters (use
max-width: 65ch)
- Contrast: WCAG AA minimum (4.5:1 for normal text)
Responsive typography:
h1 {
font-size: 2rem;
}
