Photo by Lachlan Dempsey on Unsplash
Adapt layouts across devices with mobile-first breakpoints.
The Natura11y ships with only four breakpoint sizes, as shown in the following table.
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.