Breakpoints
By default, the framework supports some common responsive device resolutions. Using custom media queries allows us to keep our breakpoints consistent and scalable/maintainable.
| CSS Vars | Editable In | Value | Comments | |
|---|---|---|---|---|
@media (--upto-bp1) | settings/responsive.scss | ≤ 414px | First breakpoint, usually targets medium to large handset devices. | |
@media (--from-bp1) | > 415px | |||
@media (--only-bp1) | > 414px ≤ 582px | |||
| | ||||
@media (--upto-bp2) | ≤ 582px | Targets small to medium tablet sized devices. | ||
@media (--from-bp2) | > 583px | |||
@media (--only-bp2) | > 583px ≤ 834px | |||
| | ||||
@media (--upto-bp3) | ≤ 834px | Target large to small laptop sized screens. | ||
@media (--from-bp3) | > 835px | |||
@media (--only-bp3) | > 835px ≤ 1024px | |||
| | ||||
@media (--upto-bp4) | ≤ 1024px | Targets large laptop to small sized desktop screens. | ||
@media (--from-bp4) | > 1025px | |||
@media (--only-bp4) | > 1024px ≤ 1256px | |||
| | ||||
@media (--upto-bp5) | ≤ 1256px | Targets medium to large desktop screens. | ||
@media (--from-bp5) | > 1257px | |||
| | ||||
@media (--upto-max) | ≤ 1476px | Targets extra large desktop screens and small TVs. | ||
@media (--from-max) | > 1477px | |||