Breakpoints

Adapt layouts across devices with mobile-first breakpoints.

Breakpoint Values

The Natura11y ships with only four breakpoint sizes, as shown in the following table.

Breakpoint Modifiers

Notice the Modifier column in the table above. Breakpoint modifiers are available for many of our component and utility classes. They are useful for applying styles at a specific breakpoint (or viewport size). Breakpoint modifiers are always affixed to the end of the class. They include a double-dash and two-letter abbreviation representing a specific breakpoint. Here are just a few examples of compinent and utility classes with breakpoint modifiers.