Responsive Breakpoints | mysimulator.uk

Define breakpoint tiers, behaviors, and grid adjustments to ensure consistent design across devices.

Mobile first: single column; nav collapses to hamburger; hero stacks.

Tablet: 2-col grids; medium gutters; sticky nav where possible.

Desktop: 12-col grid; wider gutters; persistent sidebars where applicable.

XL: increase max-width to 1280–1440px; avoid ultra-wide lines.

Use 12-column grid at md+; gutters 16px (sm), 20px (md), 24px (lg+). Page max-width: 1200–1280px on lg, 1360–1440px on xl. Maintain outer padding: 16px (sm), 24px (md), 32px (lg+).

live demo · related simulation● LIVE

Serve responsive images (srcset), enforce aspect ratios, and cap hero section sizes.

Accessibility & Touch: Ensure a usable experience for all users, particularly those using touch devices.

Touch targets ≥44px; keep focus styles visible at all breakpoints. Avoid hover-only affordances on mobile; provide tap equivalents.

Frequently asked questions

How should CSS and JSON tokens be used for breakpoint definitions?

CSS/JSON tokens for breakpoints should be exposed, utilizing media query helpers like `@media (min-width: var(--bp-md))`. Furthermore, layout grids within Figma should be set up specifically for each breakpoint tier.

What is the purpose of documenting component behavior across different design tiers?

Documenting component behavior per tier ensures consistency and facilitates collaboration by clearly outlining how elements adapt and function at various screen sizes, promoting a unified user experience.

When was this document last updated and what is its relation to the design system?

This document was last updated in 2024 and serves as part of the overall Design System documentation, providing guidelines for responsive layout implementation.

▶ Try it live

Everything above runs in your browser — open Hash Function Avalanche Visualizer and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.

▶ Open Hash Function Avalanche Visualizer simulation