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>
Container Queries
Since version 2.0, Natura11y breakpoints utilize container queries, thus replacing media queries for all breakpoints.
Breakpoints now query a containing element (known as containment context) rather than the overall viewport size. The default containment context is placed on the <html> element (by targeting :root in the CSS).
Because the <html> element is the top-most element in the DOM, Natura11y's CSS queries it's width instead of the viewport's with. In this way, the default breakpoint behavior is just as it was with the classic media query.
Context containers
What if you want breakpoints to adapt to the size of the container they are placed in?
Naturally provides this utility class: .natura11y-context. It has the same containment context as the the <html> element. This means Natura11y's breakpoints can adapt to the size of a containing element rather than the screen dimendions.
Place the .natura11y-context utility class on any parent element you would like to query the dimensions of. In the example below, Our grid will be come two columns when the parent container's width reaches the medium breakpoint size (the window size is not relevant).
Consider this practical example. Let's say you have a .grid selector with two buttons inside. You'd like it to have two columns, but only when the containment block is large enough.
<!-- 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>