Responsive Behavior
Include when: Page needs different layouts across breakpoints
Breakpoints
| Name |
Range |
Primary Use |
| Mobile |
< 768px |
Touch, single column |
| Tablet |
768px - 1024px |
Touch/mouse, flexible |
| Desktop |
> 1024px |
Mouse, multi-column |
Mobile (< 768px)
Layout Changes
- {What changes from desktop}
Hidden Elements
- {Elements not shown on mobile}
Mobile-Specific
- {Touch targets, gestures, etc.}
Tablet (768px - 1024px)
Layout Changes
Adaptations
- {Specific tablet behaviors}
Desktop (> 1024px)
Full Layout
- {Desktop-specific features}
Enhancements
- {Hover states, keyboard shortcuts}
Component Breakpoint Behavior
| Component |
Mobile |
Tablet |
Desktop |
{component} |
{behavior} |
{behavior} |
{behavior} |
Navigation Changes
| Breakpoint |
Navigation Style |
| Mobile |
{hamburger / bottom nav / etc.} |
| Tablet |
{style} |
| Desktop |
{full nav / sidebar / etc.} |
