Breakpoint Values
- src
- base
- _breakpoint-values.scss
Description
Sandbox has three responsive breakpoints out of the box, as shown in the following table. If you're customizing sandbox, these breakpoints can be changed by plugging your desired values into the related sass variables and running a build.
The range in pixels is based on an unchanged browser font size of 16 pixels.
| Breakpoint | Range | Range in Pixels | Suffix |
|---|---|---|---|
| small | ≤ 48rem | ≤ 768px | sm |
| medium | ≥ 48.0625rem && ≤ 64rem | ≥ 769px && ≤ 1024px | md |
| large | ≥ 64.0625rem | ≥ 1025px | lg |
Note that breakpoint specific classes will only apply during their specified breakpoint. This behavior differs from other frameworks that use a "this breakpoint and up" methodology.