Breakpoint • Natura11y
Jump to main contentJump to website footer
High-angle photography of beach shore

Photo by 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.

Natura11y Breakpoints

NameModifierValue
Small--sm576px
Medium--md768px
Large--lg992px
Extra Large--xl1200px
Extra Extra Large--xxl1440px

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 specific breakpoints.

Breakpoint modifiers are always added to the end of the class name, using a double dash and a two-letter abbreviation for the breakpoint (e.g., .theme-dark--lg). Below are some examples of how to use breakpoint modifiers.


        <!-- A grid that changes to two columns at the medium breakpoint -->
        <div className="grid grid--column-2--md">
            ...
        </div>
        
        <!-- Theme color changes at the large breakpoint -->
        <div className="theme-dark--lg">
            ...
        </div>
Figure 1