Responsive Strategy¶

This document defines the responsive design strategy for the Open EV Data UI. Visual tokens referenced here are defined in DESIGN_SYSTEM.md. Component-level specs are in UI_COMPONENTS.md.

Related Documents¶

Table of Contents¶

• Responsive Philosophy
• Breakpoints
• Layout Strategy per Viewport
• Grid System
• Component Adaptations
• Typography Scaling
• Touch Interactions
• Performance Considerations

Responsive Philosophy¶

1. Mobile-first CSS: base styles target mobile; larger viewports layer on via min-width media queries
2. Content-driven breakpoints: standard breakpoints with component-specific overrides when content demands it
3. Progressive enhancement: mobile gets a fully functional core experience; desktop gets enhanced visualizations
4. Avoid hiding information: content is reorganized, never removed — optional fields that don't exist in the data are simply not rendered (see Data-Driven Rendering)
5. Touch-native on mobile: larger touch targets, bottom navigation bar

Breakpoints¶

Defined in src/shared/styles/breakpoints.css:

[!IMPORTANT] CSS custom properties cannot be used in media queries. Use the raw pixel values in @media declarations. The breakpoints.css file serves as documentation.

Media Query Pattern (Mobile-First)¶

/* Mobile first — base styles are mobile */
@media (min-width: 640px)  { /* sm */ }
@media (min-width: 768px)  { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1440px) { /* 2xl */ }

Layout Strategy per Viewport¶

Mobile (< 640px)¶

Reference: M01, M02, M03

Tablet (640px – 1023px)¶

Desktop (1024px – 1439px)¶

Reference: A01, A02, A03

Wide Desktop (≥ 1440px)¶

Grid System¶

.cardGrid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .cardGrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cardGrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .cardGrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1440px) { .cardGrid { grid-template-columns: repeat(5, 1fr); } }

Container Widths¶

Component Adaptations¶

Header¶

FilterPanel¶

VehicleCard¶

CompareTable¶

Vehicle Detail¶

Navigation¶

Typography Scaling¶

Use clamp() for fluid scaling:

:root {
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --text-4xl: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

Spacing Adjustments¶

Touch Interactions¶

[!TIP] All touch targets must have a minimum size of 44px × 44px per WCAG guidelines.

Performance Considerations¶