Layout
Arrange content around the task, then adapt the structure to the space available. A small screen needs a different composition, not a scaled-down desktop.
Anatomy and hierarchy
A product screen has navigation, a task region, supporting context and feedback. Give the task the most space. Keep source and review information attached to dictionary results; moving it into a distant sidebar can make unsupported text look authoritative.
- Navigation: tells people where they are and how to change destination. Use a sidebar on wide screens and an accessible menu on compact screens.
- Task region: holds lookup, learning or review. Place the page heading before its controls in both visual and DOM order.
- Supporting context: sits beside the task when there is room, and follows it in reading order when there is not.
- Feedback: appears next to the affected control. A network error must not replace all previously loaded content.
Responsive specifications
These are the committed web breakpoints in the token CSS. They are CSS pixels, not native-device dp or device categories.
| Token | Minimum width | Recommended decision |
|---|---|---|
| Below sm | 0px | One task column. Stack fields and actions when labels no longer fit. |
| --breakpoint-sm | 640px | Allow two short fields on one row only if their content fits. |
| --breakpoint-md | 768px | Persistent navigation where enough task space remains. |
| --breakpoint-lg | 1024px | Optional supporting pane; preserve readable text measure. |
| --breakpoint-xl | 1280px | Increase margins before stretching prose. |
| --breakpoint-2xl | 1536px | Use extra width for reference context and data, not oversized controls. |
Breakpoints are starting points. Resize with real labels and long entries to find where the composition fails. A component in a narrow dashboard pane should respond to its container even on a large monitor.
Layout explorer
Move the width control to inspect structural changes. Turn on right-to-left to check the reading order and use of logical positioning.
Dictionary search
Search and source details stay together. In compact layouts the navigation becomes a menu; the reading column keeps its full width.
Expanded: navigation and content in separate columns. This is an intentionally scrollable container demonstration; the page itself reflows.
Grid, spacing and reading measure
Use flexbox for a single line of actions; use grid for columns that share alignment. Use a 4px spacing rhythm, with 16px compact page padding and 32px where space allows. Limit long prose to about 65–75 characters per line. Data tables can be wider when the column relationships need it.
.task-layout {
display: grid;
gap: var(--spacing-4);
grid-template-columns: minmax(0, 1fr);
}
.reading-column { max-inline-size: 72ch; }
.supporting-pane { min-inline-size: 0; }
@media (min-width: 1024px) {
.task-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
}A CSS custom property cannot be used directly as a media-query breakpoint. Keep the literal media value aligned with the breakpoint token, or use the corresponding generated Tailwind variant.
Overflow, zoom and touch
- Use
min-width: 0on flexible content so long words and code do not stretch the entire page. Wrap prose; provide deliberate local scrolling for code and data tables. - Make scrollable regions keyboard reachable and name them when their purpose is not clear. Never clip the only way to reach an action.
- Keep primary actions at least 44×44 CSS pixels. Visual icons can be smaller than their hit areas.
- At 400% zoom, reflow ordinary content into one column. Two-dimensional data may scroll, but the page navigation and actions must remain usable.
- Use logical properties such as
padding-inlineandmargin-inline-start. Do not reorder fields with CSS in a way that changes the visible order but leaves keyboard order behind.
Do and avoid
| Do | Avoid |
|---|---|
| Let long labels wrap and grow the row. | Fixed-height rows that cut off translated labels. |
| Keep sources beneath their corresponding result. | One detached source block for several results. |
| Move secondary controls into a menu with a clear label. | Hide important controls at small widths. |
| Keep the same DOM reading order at every breakpoint. | Visual reordering that causes focus to jump across the screen. |
Verification and related guidance
Check 320px, 768px and 1440px widths; repeat at 200% text size and 400% browser zoom. Check keyboard order, long labels, empty results, open overlays and right-to-left content. A screenshot alone does not establish keyboard or zoom behavior.