Adapt layouts across devices or specific containers with Natura11y's responsive breakpoints.
The Natura11y ships with only five breakpoint sizes, as shown in the following table.
|Extra Extra Large|
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.
Breakpoint modifiers are always affixed to the end of the class. They include a double-dash and two-letter abbreviation representing a specific breakpoint (e.g.
.theme-dark--lg). Below are just a few examples of component and utility classes with breakpoint modifiers.