Base
0-639px
Single column first
Start with one primary reading path. Content stacks, controls stay thumb-reachable, and density stays intentionally low.
Responsive Breakpoints
Widths where the layout breaks, not where a device category begins.
This reference treats breakpoints as design pressure points. Start with a single-column mobile baseline, add a second column at 640px, promote a sidebar at 1024px, and let cards manage their own internal reflow with container queries.
0
Shift 01
640-1023px
Two columns when room appears
At 640px the layout earns a second column. Scannable cards sit beside narrative content without fragmenting the reading flow.
Shift 02
1024px+
Three columns with a sidebar
At 1024px the sidebar becomes persistent. Navigation and notes detach from the main flow only once they stop competing with content.
Mobile-first
The smallest layout is the baseline, not the fallback. Every larger breakpoint adds clarity or efficiency instead of patching a desktop-first design.
Media queries
Page-level structure changes at 640px and 1024px because those are the first widths where new columns improve comprehension.
Container queries
Cards reflow based on their own width. A module can become denser inside a wide column without waiting for the whole viewport to cross a threshold.
Fluid sizing
Type, spacing, and panel proportions scale with available space so the interface breathes between breakpoints instead of snapping abruptly.
Base
Single column first
0-639px
Start with one primary reading path. Content stacks, controls stay thumb-reachable, and density stays intentionally low.
Shift 01
Two columns when room appears
640-1023px
At 640px the layout earns a second column. Scannable cards sit beside narrative content without fragmenting the reading flow.
Shift 02
Three columns with a sidebar
1024px+
At 1024px the sidebar becomes persistent. Navigation and notes detach from the main flow only once they stop competing with content.
Macro layout
One clear reading path first.
The page keeps a single primary column on small screens so heading, copy, and actions stay linear. At tablet width the resource cards gain a second column. Only at desktop width does the sidebar peel off into its own rail.
640px
Two-column content band
Enough width exists to compare modules side by side without shrinking the line length into a dense block.
1024px
Sidebar becomes persistent
Secondary navigation and implementation notes become continuously visible once they stop stealing space from the main content.
Fluid
Spacing scales between steps
Typography and panel padding use clamps and proportional spacing so the interface expands smoothly rather than in hard jumps.
Card-level layout shifts
This card stays stacked in a narrow column, then splits preview and metrics when its own container gets wide enough.
Readability86%
Container query rule
@container (min-width: 28rem)Density increases locally
Support information moves beside the main content only when that module has enough horizontal room to keep hierarchy intact.
Density64%
Container query rule
@container (min-width: 28rem)Reusable in any grid
The same component behaves well in one, two, or three columns because the reflow decision belongs to the card, not the page.
Reuse92%
Container query rule
@container (min-width: 28rem)Card behavior
Container queries keep components honest.
A reusable card should respond to the width it actually receives. This prevents one viewport breakpoint from forcing the same internal layout on cards placed in very different columns, sidebars, or nested panels.
Viewport query: change the page grid at
640px and 1024px.Container query: split card preview and metadata when the card itself reaches
28rem.Accessibility
Clear hierarchy, clear focus, clear motion.
Sections use real headings and landmarks, not only visual blocks.
Interactive chips and sidebar links have visible hover and focus-visible states.
Color contrast stays high enough for dark-surface reading without overloading the accent color.
Main UX decisions
Breakpoints are tied to layout pressure, not device names.
The labels explain what changes structurally at each width so the system remains useful as screen categories evolve.
The sidebar is deferred until desktop width.
Moving secondary navigation into a fixed rail earlier would compress the reading line and over-prioritize chrome on tablet widths.
Container queries handle local complexity.
Viewport breakpoints decide macro layout; container queries decide whether each card can safely increase density.
Tradeoffs
Two systems mean more rules to maintain.
Using both media and container queries adds complexity, but it prevents viewport-only breakpoints from creating brittle components.
A delayed sidebar sacrifices early persistence.
Navigation is less always-visible on tablet, but the content gets a cleaner reading measure and more stable card widths.