Prompt file imported from sunnydodti/portfolio-react (.github/prompts/responsive-design.prompt.md). Copyright stays with the author.

Responsive Design Implementation

Name: responsive-design
Author: sunnydodti

I need to implement responsive design following our mobile-first approach and ensuring perfect layout across all devices.

Responsive Strategy:

Mobile-First: Design starts with mobile (320px+) and scales up
Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
Single Viewport: No vertical scrolling on desktop views
Flexible Layouts: Adapt to various screen sizes gracefully

Layout Behaviors by Breakpoint:

Mobile (<768px):

Full-width layout
Collapsed sidebar with hamburger menu
Stacked content sections
Touch-friendly interactive elements (44px minimum)
Bottom navigation for quick access
Single-column layouts

Tablet (768-1023px):

Collapsible sidebar with overlay
Two-column layouts where appropriate
Larger touch targets
Optimized spacing for tablet interaction
Landscape and portrait orientations

Desktop (1024px+):

Fixed sidebar navigation (240px width)
Multi-column layouts
Hover states and interactions
Single viewport (all content visible without scrolling)
Optimal spacing for mouse interaction

Implementation Requirements:

Grid Systems:

CSS Grid for complex layouts
Flexbox for component alignment
Responsive grid columns (1-col mobile, 2-col tablet, 3-4 col desktop)
Proper gap and spacing management

Component Responsiveness:

Navigation: Sidebar → Hamburger menu → Bottom nav
Cards: Full-width → 2-up → 3-up layouts
Typography: Scaled font sizes per breakpoint
Images: Responsive sizing and optimization
Forms: Stack → Side-by-side layouts

CSS Media Query Implementation:

/* Mobile-first utility classes */
.responsive-grid {
  @apply grid grid-cols-1 gap-4;
  @apply md:grid-cols-2 md:gap-6;
  @apply lg:grid-cols-3 lg:gap-8;
  @apply xl:grid-cols-4;
}

Testing Requirements:

Test all breakpoints thoroughly
Verify touch interactions on mobile/tablet
Validate keyboard navigation across devices
Check content reflow and readability
Ensure no horizontal scrolling
Validate single viewport rule on desktop

Accessibility Considerations:

Maintain proper heading hierarchy across layouts
Ensure touch targets meet minimum size requirements
Preserve keyboard navigation flow
Keep focus indicators visible at all breakpoints
Maintain color contrast at all sizes

Performance Considerations:

Mobile-optimized images and assets
Progressive enhancement for larger screens
Efficient CSS delivery
Touch gesture optimization
Minimal layout shifts

Please implement responsive design that provides optimal user experience across all devices while maintaining our design system and accessibility standards.

# Responsive Design Implementation I need to implement responsive design following our mobile-first approach and ensuring perfect layout across all devices. **Responsive Strategy**: - **Mobile-First**: Design starts with mobile (320px+) and scales up - **Breakpoints**: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px) - **Single Viewport**: No vertical scrolling on desktop views - **Flexible Layouts**: Adapt to various screen sizes gracefully **Layout Behaviors by Breakpoint**: **Mobile (<768px)**: - Full-width layout - Collapsed sidebar with hamburger menu - Stacked content sections - Touch-friendly interactive elements (44px minimum) - Bottom navigation for quick access - Single-column layouts **Tablet (768-1023px)**: - Collapsible sidebar with overlay - Two-column layouts where appropriate - Larger touch targets - Optimized spacing for tablet interaction - Landscape and portrait orientations **Desktop (1024px+)**: - Fixed sidebar navigation (240px width) - Multi-column layouts - Hover states and interactions - Single viewport (all content visible without scrolling) - Optimal spacing for mouse interaction **Implementation Requirements**: **Grid Systems**: - CSS Grid for complex layouts - Flexbox for component alignment - Responsive grid columns (1-col mobile, 2-col tablet, 3-4 col desktop) - Proper gap and spacing management **Component Responsiveness**: - Navigation: Sidebar → Hamburger menu → Bottom nav - Cards: Full-width → 2-up → 3-up layouts - Typography: Scaled font sizes per breakpoint - Images: Responsive sizing and optimization - Forms: Stack → Side-by-side layouts **CSS Media Query Implementation**: ```css /* Mobile-first utility classes */ .responsive-grid { @apply grid grid-cols-1 gap-4; @apply md:grid-cols-2 md:gap-6; @apply lg:grid-cols-3 lg:gap-8; @apply xl:grid-cols-4; } ``` **Testing Requirements**: - Test all breakpoints thoroughly - Verify touch interactions on mobile/tablet - Validate keyboard navigation across devices - Check content reflow and readability - Ensure no horizontal scrolling - Validate single viewport rule on desktop **Accessibility Considerations**: - Maintain proper heading hierarchy across layouts - Ensure touch targets meet minimum size requirements - Preserve keyboard navigation flow - Keep focus indicators visible at all breakpoints - Maintain color contrast at all sizes **Performance Considerations**: - Mobile-optimized images and assets - Progressive enhancement for larger screens - Efficient CSS delivery - Touch gesture optimization - Minimal layout shifts Please implement responsive design that provides optimal user experience across all devices while maintaining our design system and accessibility standards.

{ "prompt": "# Responsive Design Implementation\n\nI need to implement responsive design following our mobile-first approach and ensuring perfect layout across all devices.\n\n**Responsive Strategy**:\n\n- **Mobile-First**: Design starts with mobile (320px+) and scales up\n- **Breakpoints**: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)\n- **Single Viewport**: No vertical scrolling on desktop views\n- **Flexible Layouts**: Adapt to various screen sizes gracefully\n\n**Layout Behaviors by Breakpoint**:\n\n**Mobile (<768px)**:\n\n- Full-width layout\n- Collapsed sidebar with hamburger menu\n- Stacked content sections\n- Touch-friendly interactive elements (44px minimum)\n- Bottom navigation for quick access\n- Single-column layouts\n\n**Tablet (768-1023px)**:\n\n- Collapsible sidebar with overlay\n- Two-column layouts where appropriate\n- Larger touch targets\n- Optimized spacing for tablet interaction\n- Landscape and portrait orientations\n\n**Desktop (1024px+)**:\n\n- Fixed sidebar navigation (240px width)\n- Multi-column layouts\n- Hover states and interactions\n- Single viewport (all content visible without scrolling)\n- Optimal spacing for mouse interaction\n\n**Implementation Requirements**:\n\n**Grid Systems**:\n\n- CSS Grid for complex layouts\n- Flexbox for component alignment\n- Responsive grid columns (1-col mobile, 2-col tablet, 3-4 col desktop)\n- Proper gap and spacing management\n\n**Component Responsiveness**:\n\n- Navigation: Sidebar → Hamburger menu → Bottom nav\n- Cards: Full-width → 2-up → 3-up layouts\n- Typography: Scaled font sizes per breakpoint\n- Images: Responsive sizing and optimization\n- Forms: Stack → Side-by-side layouts\n\n**CSS Media Query Implementation**:\n\n```css\n/* Mobile-first utility classes */\n.responsive-grid {\n @apply grid grid-cols-1 gap-4;\n @apply md:grid-cols-2 md:gap-6;\n @apply lg:grid-cols-3 lg:gap-8;\n @apply xl:grid-cols-4;\n}\n```\n\n**Testing Requirements**:\n\n- Test all breakpoints thoroughly\n- Verify touch interactions on mobile/tablet\n- Validate keyboard navigation across devices\n- Check content reflow and readability\n- Ensure no horizontal scrolling\n- Validate single viewport rule on desktop\n\n**Accessibility Considerations**:\n\n- Maintain proper heading hierarchy across layouts\n- Ensure touch targets meet minimum size requirements\n- Preserve keyboard navigation flow\n- Keep focus indicators visible at all breakpoints\n- Maintain color contrast at all sizes\n\n**Performance Considerations**:\n\n- Mobile-optimized images and assets\n- Progressive enhancement for larger screens\n- Efficient CSS delivery\n- Touch gesture optimization\n- Minimal layout shifts\n\nPlease implement responsive design that provides optimal user experience across all devices while maintaining our design system and accessibility standards.", "variables": [], "notes": "I need to implement responsive design following our mobile-first approach and ensuring perfect layout across all devices. Mode: agent.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/sunnydodti/portfolio-react", "path": ".github/prompts/responsive-design.prompt.md", "ref": "8bf977a86df89afeaeeb9272cbba86d32fc5e9ec", "url": "https://github.com/sunnydodti/portfolio-react/blob/8bf977a86df89afeaeeb9272cbba86d32fc5e9ec/.github/prompts/responsive-design.prompt.md", "key": "sunnydodti/portfolio-react/.github/prompts/responsive-design.prompt.md" } } }

responsive-design

About

Responsive Design Implementation

Use it

Manifest

Reviews