Reflow

The nsw.reflow mixin applies styles at the WCAG Reflow benchmark of 320 CSS pixels. This helps components remain usable when a page is viewed in constrained viewports, including common 400% zoom test states.

WCAG 2.1 Success Criterion 1.4.10: Reflow requires content to be presented without loss of information or functionality, and without two-dimensional scrolling, at a width equivalent to 320 CSS pixels. The W3C understanding document explains that 320 CSS pixels is equivalent to a 1280 CSS pixel wide viewport at 400% zoom.

How it relates to breakpoints

Reflow support sits on top of the standard responsive breakpoint system. It is separate from the standard $nsw-breakpoints scale used by grid, offset and visibility utilities.

The standard breakpoint scale remains:

The xs breakpoint remains the base breakpoint from 0. The Reflow helper is an additional constraint layer that can override or refine component styles at 320px and below when the normal xs treatment is not enough.

Because reflow is separate from $nsw-breakpoints, it does not generate public grid, offset, display or visibility utilities such as .nsw-col-reflow-*, .nsw-offset-reflow-*, .nsw-show-reflow or .nsw-hide-reflow.

Using the helper

Import the tools barrel and include nsw.reflow inside the component that needs a specific compact treatment.

By default, this compiles to a max-width media query using the reflow threshold:

The threshold is exposed as a Sass setting:

Without Sass

If you use the compiled NSW Design System CSS, any Reflow styles shipped with a NSW component are already included. You do not need Sass to receive those shipped component styles.

Not every component will need, or currently include, a Reflow adjustment. Test the component at 400% browser zoom or an equivalent 320 CSS pixel viewport, then add targeted CSS only where the component has a real layout or usability issue.

If you are writing custom CSS without Sass, use the compiled media query directly:

20rem is the compiled equivalent of the 320 CSS pixel Reflow threshold. Use it for targeted component adjustments only, not as a replacement for the standard breakpoint scale.

Use nsw.reflow for component-specific changes that make the component work at the WCAG reflow benchmark. For example, reducing dense spacing, simplifying persistent controls, resizing icons, changing wrapping behaviour, or adjusting a sticky component that takes too much space at 400% zoom.

When to use it

Use the Reflow helper when a component has a real layout or usability problem at the WCAG Reflow benchmark and the standard xs styles are too broad. Reflow styles should be targeted and minimal.

• Use standard grid and breakpoint utilities for normal responsive layouts.
• Use nsw.reflow only for the WCAG Reflow benchmark of 320 CSS pixels.
• Keep reflow styles close to the component they adjust.
• Check that content remains available and functional without requiring page-level horizontal scrolling.
• Retest the component at 400% browser zoom or an equivalent 320 CSS pixel viewport.

Exceptions

Some content needs two-dimensional layout for meaning or operation, such as data tables, maps, diagrams, video or interfaces where a toolbar must remain in view. These cases still need careful handling so the rest of the page can reflow and any horizontal scrolling is limited to the specific content that needs it.