Responsive Layout and Content Density

Purpose

Make responsive behavior a reusable component contract rather than a late page-level CSS patch.

When to Use

• Features run in desktop, tablet, mobile, embedded, split-pane, or variable containers.
• Tables, forms, navigation, or dashboards collapse poorly.

Do

• Define visible, collapsible, and movable content by task context and content breakpoint.
• Prefer intrinsic sizing, grid, flex, min(), max(), clamp(), and container queries before fixed viewport breakpoints.
• Validate reflow at narrow widths and 200-400% zoom, plus sticky, overflow, dialog, table, and virtual-keyboard behavior.

Do Not