Photo by Lachlan Dempsey
Breakpoint
Introduction
Adapt layouts across devices or specific containers with Natura11y's responsive breakpoints.
Breakpoint Values
The Natura11y ships with only five breakpoint sizes, as shown in the following table.
| Name | Modifier | Value |
|---|---|---|
| Small |
| 400px |
| Medium |
| 768px |
| Large |
| 1024px |
| Extra Large |
| 1280px |
| Extra Extra Large |
| 1536px |
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.
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.
<!-- A grid that goes two columns at the medium breakpoint -->
<div className="grid grid--column-2--md 👈" href="#1">
...
</div>
<!-- Theme color change at the large breakpoint -->
<div className="theme-dark--lg 👈">
...
</div>