phazurlabs Responsive Block Patterns — Cross-Breakpoint Design Intelligence
Mental model
Responsive design is not resizing. It is deciding, per component, which of four things happens as space runs out: it reflows, it stacks, it transforms into a different component, or it disappears.
- Container queries beat media queries for anything reusable. A card should respond to its container, not the viewport, or it breaks the moment you put it in a sidebar.
- Fluid before stepped.
clamp()handles the continuum; breakpoints handle the genuine transformations. Six breakpoints usually means someone was using them to doclamp()'s job. - Design the transformation, not the two end states. A table becoming a card list is a decision about what to drop; specifying only "table" and "cards" leaves that decision to whoever implements it.
- Touch targets do not scale down. 44px is 44px at every breakpoint.
Constants
--bp-sm: 640px; /* large phone */
--bp-md: 768px; /* tablet portrait */
--bp-lg: 1024px; /* tablet landscape, small laptop */
--bp-xl: 1280px; /* desktop */
--bp-2xl:1536px; /* wide desktop */
The clamp() master formula: clamp(min, preferred + relative, max), where
preferred is in rem and relative is in vw.
Index
| Need | Reference |
|---|---|
| What a given component does at each breakpoint | breakpoint-transformation-catalog.md |
| Adaptive card, morphing nav, table-to-cards | container-query-patterns.md |
| Container query syntax and units | container-query-patterns.md |
| Fluid type scale, fluid space scale | fluid-scaling-system.md |
The clamp() formula and when it beats breakpoints |
fluid-scaling-system.md |
| Responsive typography, images, tables, nav as code | responsive-component-patterns.md |
| Column progressions, collapsing sidebar, holy grail | responsive-layout-recipes.md |
Reference architecture
| File | Covers | Lines |
|---|---|---|
references/responsive-component-patterns.md |
component-level responsive code | 1878 |
references/container-query-patterns.md |
container query recipes | 1728 |
references/responsive-layout-recipes.md |
whole-layout recipes | 1524 |
references/fluid-scaling-system.md |
clamp(), fluid scales | 842 |
references/breakpoint-transformation-catalog.md |
60+ components x breakpoint | 707 |
What every reference file contains
- The transformation type — reflow, stack, transform, or hide
- The breakpoint or container size that triggers it, and why that value
- Complete CSS, container-query-first where it applies
- What is deliberately dropped at the smallest size
- Touch target and thumb-reach implications
Routing
For what each component does at each breakpoint — 60+ components across
navigation, content, input and layout with their transformation type: read
references/breakpoint-transformation-catalog.md.
For container queries — fundamentals plus adaptive cards, morphing
navigation, table-to-card transformation and the rest: read
references/container-query-patterns.md.
For fluid scaling — the clamp() master formula, complete fluid type and
space scales, and fluid padding: read references/fluid-scaling-system.md.
For component-level responsive code — responsive typography, images, tables,
navigation and the other patterns as production CSS: read
references/responsive-component-patterns.md.
For whole-layout recipes — column progressions, collapsing sidebars, holy
grail and the rest: read references/responsive-layout-recipes.md.
For odds and ends — the patterns that had no home in the files above when this skill was converted to a router: read references/responsive-supplementary.md.
Cross-References
- layout-block-intelligence, component-patterns-code, mobile-ux-design, page-composition-engine
- platform-visual-standards (iOS 26, Material 3 breakpoint conventions)
- form-design-encyclopedia (responsive form patterns)
- navigation-pattern-encyclopedia (responsive nav transformations)
- typography-pairing-recipes (fluid type scales)
- data-visualization-mastery (responsive chart patterns)