Photo: Lachlan Dempsey
Breakpoint
Introduction
Easily adapt layouts for various viewports with Natura11y’s responsive breakpoints.
Breakpoint Values
Natura11y includes five predefined breakpoint sizes, as shown in the table below.
| Name | Modifier | Value |
|---|---|---|
| Small | --sm | 576px |
| Medium | --md | 768px |
| Large | --lg | 992px |
| Extra Large | --xl | 1200px |
| Extra Extra Large | --xxl | 1440px |
Breakpoint Modifiers
The Modifier column in the table above shows the breakpoint modifiers. These modifiers can be added to many component and utility classes to apply styles at a breakpoint and above.
Breakpoint modifiers are always added to the end of the class name, using a double dash and the breakpoint key (e.g., .theme-dark--lg). Below are some examples of how to use breakpoint modifiers.
HTML
<!-- A grid that changes to two columns at the medium breakpoint --><div class="grid grid--column-2--md"> ...</div>
<!-- Theme color changes at the large breakpoint --><div class="theme-dark--lg"> ...</div>
