Breakpoint System
The responsive breakpoint foundation of Bolt.
Overview
-
xxsmall:
320px
-
xsmall:
400px
-
small:
600px
-
medium:
800px
-
large:
1000px
-
xlarge:
1200px
-
xxlarge:
1400px
-
xxxlarge:
1600px
-
xxxxlarge:
1920px
-
iPhone Portrait: 320px
-
Galaxy Nexus Portrait: 360px
-
iPhone 6 Portrait: 375px
-
iPhone 6 Plus Portrait: 414px
-
Galaxy Note 3 Portrait: 540px
-
iPhone Landscape: 568px
-
Google Nexus 7 Portrait: 604px
-
Galaxy Nexus Landscape: 640px
-
iPhone 6 Landscape: 667px
-
iPhone 6 Plus Landscape: 738px
-
iPad Portrait: 768px
-
Galaxy Note 3 Landscape: 960px
-
Google Nexus 7 Landscape: 966px
-
iPad Landscape: 1024px
-
11" MacBook Air: 1366px
-
13" MacBook Air: 1440px
-
21.5" iMac: 1980px
SCSS mixin
.c-component-name {
// Setting a min (mobile first)
@include bolt-mq(xsmall) {
background-color: red;
}
// Setting a max (desktop first)
@include bolt-mq($until: xsmall) {
background-color: blue;
}
// Setting a range (adaptive)
@include bolt-mq($from: medium, $until: xlarge) {
background-color: yellow;
}
// Setting orientation or other media queries
@include bolt-mq($from: xlarge, $until: xxxlarge, $and: '(orientation: portrait)') {
background-color: green;
}
}