| name | responsive-styling |
| description | Automatically generate mobile-first responsive CSS/SCSS when creating component styles or mentioning responsive design. Implements standard breakpoints (768px, 1024px), ensures WCAG AA color contrast, creates touch-friendly interfaces (44px minimum targets), adds proper focus indicators, supports reduced motion, scales typography responsively, and provides detailed technical specifications with exact values. |
Responsive Styling Skill
Purpose
Generate mobile-first, responsive CSS/SCSS that works across all devices and follows accessibility best practices.
Philosophy
Responsive design is accessibility. Mobile-first is user-first.
Core Beliefs
- Mobile First is Performance First: Start with constraints, enhance progressively
- Accessibility is Non-Negotiable: WCAG AA compliance is the baseline, not a bonus
- Exact Specifications Build Confidence: Calculate exact contrast ratios, don't estimate
- Touch-Friendly by Default: 44px minimum targets prevent user frustration
Why Mobile-First Responsive Styling Matters
- User Experience: Most users access sites on mobile devices
- Performance: Smaller initial payload, enhance for larger screens
- Accessibility: Ensures usability for all users and devices
- Professional Quality: Shows attention to detail and best practices
When This Skill Activates
This skill automatically activates when:
- User asks to "make it responsive"
- User mentions breakpoints, mobile, tablet, or desktop
- Creating styles for a component
- User asks about media queries
- Responsive design is needed for implementation
- WordPress block patterns need editor styling
Decision Framework
Before generating responsive styles, determine:
What's the Component Type?
- Layout container ā Focus on width, padding, grid/flex
- Content block ā Focus on typography, spacing, images
- Interactive element (button, form) ā Focus on touch targets, states, transitions
- Navigation ā Focus on mobile menu, breakpoint behavior
- Media (images, video) ā Focus on aspect ratios, object-fit
What Are the Breakpoints?
Standard mobile-first breakpoints:
- Base styles (320px+) - Mobile default
- Tablet (768px+) -
@media (min-width: 768px)
- Desktop (1024px+) -
@media (min-width: 1024px)
- Large desktop (1440px+) - Optional for max-width constraints
When to add breakpoints:
- ā
Layout changes significantly (columns stack/unstack)
- ā
Typography scales (mobile 16px ā desktop 18px)
- ā
Touch targets adjust (mobile 44px ā desktop 40px)
- ā Minor pixel adjustments (avoid breakpoint bloat)
What Accessibility Requirements?
WCAG 2.1 Level AA compliance:
- ā
Color contrast: 4.5:1 for normal text, 3:1 for large text (calculate exactly)
- ā
Touch targets: ā„ 44x44px on mobile, ā„ 40x40px on desktop
- ā
Focus indicators: 2px outline minimum, distinct from hover
- ā
Motion sensitivity:
@media (prefers-reduced-motion: reduce)
What States Are Needed?
Interactive states (buttons, links):
:hover - Mouse pointer over element
:focus - Keyboard navigation focus
:focus-visible - Keyboard focus (not mouse click)
:active - During click/tap
:disabled - Inactive state
Priority: Focus states more important than hover (accessibility)
What Typography Scale?
Mobile-first sizing:
- Body text: Start 16px (never below, readability)
- Headings: Use
clamp() for fluid scaling
- Example:
font-size: clamp(1.5rem, 5vw, 2.5rem);
- Line height: 1.5 for body, 1.2-1.3 for headings
- Font weights: Use actual weights, not relative (400, 600, 700)
What Spacing System?
Consistent spacing scale (choose one):
- 8px grid: 8px, 16px, 24px, 32px, 40px, 48px, 64px
- rem-based: 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem
Apply consistently:
- Margins, padding, gaps use same scale
- Avoid arbitrary values (17px, 23px)
Decision Tree
User requests responsive styles
ā
Determine component type
ā
Define mobile-first base styles (320px+)
ā
Calculate contrast ratios (WCAG AA)
ā
Add tablet breakpoint (768px+) if layout changes
ā
Add desktop breakpoint (1024px+) if needed
ā
Add all interactive states (focus > hover)
ā
Add reduced motion support
ā
Output mobile-first SCSS with exact values
Core Principles
1. Mobile-First Approach
Always write base styles for mobile, then enhance for larger screens:
.component {
font-size: 1rem;
padding: 1rem;
@media (min-width: 768px) {
font-size: 1.125rem;
padding: 2rem;
}
@media (min-width: 1024px) {
font-size: 1.25rem;
padding: 3rem;
}
}
.component {
font-size: 1.25rem;
@media (max-width: 1024px) {
font-size: 1.125rem;
}
@media (max-width: 768px) {
font-size: 1rem;
}
}
2. Standard Breakpoints
Use consistent breakpoints:
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;
$breakpoint-mobile-large: 480px;
$breakpoint-tablet-large: 960px;
$breakpoint-desktop-large: 1280px;
3. Responsive Typography
Scale typography appropriately:
.heading-1 {
font-size: 2rem;
line-height: 1.2;
font-weight: 700;
margin-bottom: 1rem;
@media (min-width: 768px) {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
font-size: 3rem;
margin-bottom: 2rem;
}
}
.body-text {
font-size: 1rem;
line-height: 1.6;
@media (min-width: 768px) {
font-size: 1.125rem;
line-height: 1.7;
}
@media (min-width: 1024px) {
font-size: 1.25rem;
line-height: 1.8;
}
}
4. Responsive Spacing
Use fluid spacing that scales:
.section {
padding: 2rem 1rem;
margin-bottom: 2rem;
@media (min-width: 768px) {
padding: 3rem 2rem;
margin-bottom: 3rem;
}
@media (min-width: 1024px) {
padding: 4rem 3rem;
margin-bottom: 4rem;
}
}
.section-fluid {
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 3rem);
margin-bottom: clamp(2rem, 4vw, 4rem);
}
5. Responsive Layouts
Stacked to Columns
.card-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
@media (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
}
Flexbox Responsive
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
gap: 2rem;
}
.flex-item {
flex: 1 1 100%;
@media (min-width: 768px) {
flex: 1 1 calc(50% - 1rem);
}
@media (min-width: 1024px) {
flex: 1 1 calc(33.333% - 1.333rem);
}
}
}
WordPress-Specific Patterns
Full-Width Sections
.wp-block-cover {
width: calc(100vw - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
max-width: none;
margin-left: calc(-1 * var(--wp--style--root--padding-left));
margin-right: calc(-1 * var(--wp--style--root--padding-right));
}
Responsive Block Patterns
.wp-block-group.pattern-name {
padding: 2rem 1rem;
.wp-block-group__inner-container {
max-width: 100%;
margin: 0 auto;
@media (min-width: 768px) {
max-width: 750px;
}
@media (min-width: 1024px) {
max-width: 1200px;
}
}
}
Drupal-Specific Patterns
Paragraph Responsive Styles
.paragraph--type--name {
padding: 2rem 1rem;
.paragraph__content {
max-width: 100%;
margin: 0 auto;
@media (min-width: 768px) {
padding: 3rem 2rem;
max-width: 750px;
}
@media (min-width: 1024px) {
padding: 4rem 3rem;
max-width: 1200px;
}
}
}
Field Responsive Display
.field--name-field-items {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
@media (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
WordPress Block Editor Styles
IMPORTANT: WordPress block patterns require TWO separate stylesheets:
1. Front-End Stylesheet
Standard styles that apply to published pages. No special wrapper needed.
2. Editor Stylesheet
Styles for the WordPress block editor (admin). Must wrap all selectors with .editor-styles-wrapper.
Example:
Front-end (_hero-cta.scss):
.hero-cta-pattern {
padding: 2rem 1rem;
background: #0073aa;
color: #ffffff;
@media (min-width: 768px) {
padding: 3rem 2rem;
}
}
Editor (_hero-cta-editor.scss):
.editor-styles-wrapper {
.hero-cta-pattern {
padding: 2rem 1rem;
background: #0073aa;
color: #ffffff;
@media (min-width: 768px) {
padding: 3rem 2rem;
}
}
}
Why this is necessary:
- WordPress block editor uses
.editor-styles-wrapper as a scoping mechanism
- Without this wrapper, styles won't apply in the admin editor
- Pattern appears unstyled when inserted, confusing users
Responsive Images
Basic Responsive Image
img {
max-width: 100%;
height: auto;
display: block;
}
Responsive Background Images
.hero-background {
background-size: cover;
background-position: center;
min-height: 300px;
@media (min-width: 768px) {
min-height: 400px;
}
@media (min-width: 1024px) {
min-height: 600px;
}
}
Art Direction
.responsive-image {
aspect-ratio: 4/5;
object-fit: cover;
@media (min-width: 768px) {
aspect-ratio: 1/1;
}
@media (min-width: 1024px) {
aspect-ratio: 16/9;
}
}
Touch-Friendly Design
Minimum Touch Targets
button,
a,
input,
select {
min-height: 44px;
min-width: 44px;
@media (max-width: 375px) {
min-height: 48px;
min-width: 48px;
}
}
Spacing for Touch
.touch-menu {
li {
margin-bottom: 0.5rem;
a {
padding: 0.75rem 1rem;
display: block;
}
}
@media (min-width: 1024px) {
li {
margin-bottom: 0.25rem;
a {
padding: 0.5rem 1rem;
}
}
}
}
Accessibility in Responsive Design
Focus Indicators
a, button, input, select {
&:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
}
@media (max-width: 767px) {
&:focus {
outline-width: 3px;
}
}
}
Text Readability
.content {
max-width: 100%;
@media (min-width: 768px) {
max-width: 65ch;
}
}
Reduced Motion
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Common Responsive Patterns
Hide/Show Elements
.mobile-only {
display: block;
@media (min-width: 768px) {
display: none;
}
}
.desktop-only {
display: none;
@media (min-width: 768px) {
display: block;
}
}
.tablet-up {
display: none;
@media (min-width: 768px) {
display: block;
}
}
Responsive Navigation
.main-nav {
@media (max-width: 767px) {
.menu-toggle {
display: block;
}
.menu-items {
display: none;
&.is-open {
display: block;
position: fixed;
top: 60px;
left: 0;
right: 0;
background: white;
padding: 1rem;
}
}
}
@media (min-width: 768px) {
.menu-toggle {
display: none;
}
.menu-items {
display: flex;
gap: 2rem;
}
}
}
Responsive Typography System
:root {
--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--font-size-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
--font-size-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
--font-size-h3: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
}
body {
font-size: var(--font-size-base);
}
h1 {
font-size: var(--font-size-h1);
}
h2 {
font-size: var(--font-size-h2);
}
h3 {
font-size: var(--font-size-h3);
}
Testing Checklist
When generating responsive styles, ensure:
Output Format
When generating responsive styles, provide:
.component {
}
@media (min-width: 768px) {
.component {
}
}
@media (min-width: 1024px) {
.component {
}
}
@media (prefers-reduced-motion: reduce) {
}
Common Mistakes to Avoid
ā Desktop-first (using max-width)
ā Magic numbers (random breakpoints)
ā Forgetting touch targets
ā Fixed pixel widths that don't scale
ā Tiny text on mobile (<16px)
ā Horizontal scrolling
ā Ignoring landscape mobile
ā Breaking at intermediate sizes
ā
Mobile-first (using min-width)
ā
Consistent breakpoints
ā
44px minimum touch targets
ā
Flexible widths with max-width
ā
16px minimum text
ā
Contained content
ā
Test at 320px, 768px, 1024px
ā
Test at all widths