Responsive Breakpoint
A viewport width at which a layout changes, and the assumptions that come with it.
A responsive breakpoint is a viewport size at which layout rules change, expressed as a media query. Breakpoints are the oldest tool in responsive design and remain the right one when the page really does need to be arranged differently at different window sizes.
They encode an assumption that is often false: that viewport width equals available width. Any surface where content is inset — a preview frame, a panel-adjacent region, an embedded widget — breaks that assumption, which is what Container Query exists to fix.
Three practical notes recur.
Verify at the widths people actually use. A default automation viewport is much narrower than a real monitor, and layouts that overflow at wide sizes look perfectly centered at that default. Explicitly setting a wide viewport before a visual check catches a whole class of bug that otherwise reaches the user first.
Test runners have their own default width, and it is rarely the round number you would guess. An element hidden between two breakpoints will be absent from the default canvas, and a query for it fails in a way that looks like a component bug.
Fewer breakpoints is usually better. Maintaining the same spatial arrangement across sizes, where it works, removes a whole dimension from everyone's mental model.
See also13
Component Story
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
Testing & Verification17 connections
Headless Browser
A real browser driven programmatically without a visible window.
Testing & Verification14 connections
Visual Regression Testing
Comparing rendered output against a stored baseline to catch unintended visual change.
Testing & Verification14 connections
Integration Test
A test exercising several components together, through real interfaces rather than doubles.
Testing & Verification17 connections
Unit Test
A fast, isolated test of one unit of behavior with its collaborators replaced.
Testing & Verification25 connections
Test Fixture
The prepared data or state a test runs against.
Testing & Verification16 connections
Test Double
A stand-in for a real dependency during a test — and the ways a stand-in can lie.
Testing & Verification18 connections
Stacking Context
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
Design & Interface21 connections
Pointer Events
The browser's unified model for input from a mouse, a finger, or a pen, delivering one set of events with details such as pressure and contact size, which replaced separate and incompatible mouse and touch event systems.
Web Platform8 connections
Bottom Sheet
A panel that slides up from the bottom of a phone screen to show extra content or choices, often draggable between heights, placed where thumbs can reach it on large phones.
Design & Interface13 connections
Touch Target Size
How large a tappable element needs to be for fingers to hit it reliably, roughly 44 to 48 points, and why the visible icon can be smaller than the area that responds.
Design & Interface18 connections
CSS Grid
The CSS layout mode for rows and columns at once, which brought the designer's layout grid into the browser and lets responsive layouts adapt with no breakpoints at all.
Design & Interface10 connections
Flexbox
The CSS layout mode for arranging items along one axis, distributing space and aligning them without floats or hacks, which finally made vertical centering trivial and powers most component layouts.
Design & Interface10 connections
Linked from14
- Bottom SheetDesign & Interface
A panel that slides up from the bottom of a phone screen to show extra content or choices, often draggable between heights, placed where thumbs can reach it on large phones.
- BreadcrumbDesign & Interface
The short row of links near the top of a page that shows where it sits in a site's hierarchy, such as Home › Shoes › Running, letting people orient themselves and step back up a level in one click.
- Component StoryTesting & Verification
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
- Container QueryDesign & Interface
Styling based on the size of an element's container rather than the viewport.
- CSS GridDesign & Interface
The CSS layout mode for rows and columns at once, which brought the designer's layout grid into the browser and lets responsive layouts adapt with no breakpoints at all.
- Data TableDesign & Interface
Rows and columns of values designed for looking things up and comparing exact figures, which read best with right-aligned numbers, light rules, and headers that stay put, and remain one of the hardest components to make work on a phone.
- FlexboxDesign & Interface
The CSS layout mode for arranging items along one axis, distributing space and aligning them without floats or hacks, which finally made vertical centering trivial and powers most component layouts.
- Grid SystemDesign & Interface
A shared set of columns, gutters, and alignment lines that constrains where content can sit, so unrelated layouts still read as one system.
- Headless BrowserTesting & Verification
A real browser driven programmatically without a visible window.
- Integration TestTesting & Verification
A test exercising several components together, through real interfaces rather than doubles.
- Pointer EventsWeb Platform
The browser's unified model for input from a mouse, a finger, or a pen, delivering one set of events with details such as pressure and contact size, which replaced separate and incompatible mouse and touch event systems.
- Responsive ImagesWeb Platform
Offering the browser several versions of an image so it can download the smallest one that still looks sharp on this screen at this layout size.
- Touch Target SizeDesign & Interface
How large a tappable element needs to be for fingers to hit it reliably, roughly 44 to 48 points, and why the visible icon can be smaller than the area that responds.
- Visual Regression TestingTesting & Verification
Comparing rendered output against a stored baseline to catch unintended visual change.