04

Layout Foundation

Responsive Breakpoints

Five named breakpoints define how the BrainStorm platform adapts from phone to ultra-wide. All layout decisions reference these thresholds — no ad-hoc pixel values.

Breakpoint scale

TokenValueLabelTypical device
--bp-mobile 480px Mobile Phone portrait
--bp-tablet 768px Tablet Tablet portrait / phone landscape
--bp-desktop 1024px Desktop Small desktop / tablet landscape
--bp-wide 1280px Wide Standard desktop (default)
--bp-ultra 1600px Ultra Large / ultra-wide monitors

Layout behavior by breakpoint

ComponentMobile (≤480)Tablet (481–768)Desktop (769–1024)Wide+ (1025+)
Sidebar nav Off-screen, hamburger toggle Off-screen, hamburger toggle Collapsed (70px) Expanded (270px)
Content max-width 100% − 24px padding 100% − 32px padding 100% − 48px padding 1200px centered
Grid columns 1 column 1 column 2 columns 2–4 columns
KPI strip Stacked (1 per row) 2 per row, wrap 3–4 per row Up to 5 per row
Data tables Horizontal scroll Horizontal scroll Full width Full width
Modals Full-screen sheet Centered, max-width 480px Centered, max-width 560px Centered, max-width 560px
BrainStorm AI bar Full-width, simplified Full-width, max-width 680px max-width 680px max-width 680px
Charts 100% width, shorter (200px) 100% width Side-by-side where specified Side-by-side where specified

Breakpoint visualization

480
768
1024
1280
1600+
Mobile Tablet Desktop Wide Ultra

Responsive do & don't

Do

  • Use named breakpoint tokens, not arbitrary pixel values
  • Collapse sidebar nav on tablet and below
  • Stack grids to 1 column on mobile
  • Use horizontal scroll for data tables on small screens
  • Convert modals to full-screen sheets on mobile
  • Include a print stylesheet that hides nav and interactive elements

Don't

  • Use ad-hoc breakpoints (e.g., 850px, 1100px)
  • Hide content on mobile — reflow it instead
  • Use position:fixed for the BrainStorm AI bar at any breakpoint
  • Reduce font sizes below --type-small (12px) on mobile
  • Disable hover interactions without a tap alternative
  • Assume desktop-first — design mobile-first, enhance upward
Implementation: BrainStorm is primarily an enterprise desktop application, so --bp-wide (1280px) is the default design target. Mobile responsiveness is required for the learner-facing portal and the admin overview screens. Use the @media queries defined in the stylesheet — do not create new breakpoints.