Breakpoints
Overview of the default breakpoint settings and how to use them.
Usage
Settings for the default breakpoints can be found in stylesheets/settings/_settings.media-queries.scss.
| Breakpoint | Width | Example device |
|---|---|---|
| None | 0px | Wearables, very small phones |
| xxs | 320px | Smart phones |
| xs | 480px | Large phones, phone in landscape |
| sm | 640px | Small tablets |
| md | 768px | Larger tablets |
| lg | 960px | Small desktop, tablets in landscape |
| xl | 1180px | Medium desktop, tablets in landscape |
| xxl | 1400px | Large desktop, widescreens |
Mixins
Each breakpoint has its own mixin.
@include md { .... }
@include xl { .... }
// gets compiled to
@media screen and (min-width: 768px) { .... }
@media screen and (min-width: 1180px) { .... }For more complicated media queries use the mq mixin from sass-mq plugin which is installed
@include mq($from: map-get($mq-breakpoints, 'xxs'), $until: map-get($mq-breakpoints, 'md') { .... }
// gets compiled to
@media (min-width: 320px) and (max-width: 768px) { .... }Javascript: Breakpoint module
The Breakpoint module is built in by default and emits an custom event bpupdate that components can listen for to react to changes in breakpoints.