Breakpoint • Natura11y

There is a newer version of Naturally.

High-angle photography of beach shore

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.

Natura11y Scripts

NameModifierValue
Small

--sm

400px

Medium

--md

768px

Large

--lg

1024px

Extra Large

--xl

1280px

Extra Extra Large

--xxl

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>
    
Figure 1