Breakpoints
The standard Zurb Foundation breakpoints are used with the exception of the medium to large breakpoint which has been customised.
- Small to Medium - 640px
- Medium to Large - 960px
- Large to xLarge - 1280px
- xLarge to xxLarge - 1920px
Partial media query boilerplate SCSS
// FOR ALL
// ONLY FOR LARGE DESKTOP (1281 up)
@media #{$xlarge-up} {
}
// ONLY FOR DESKTOP (961 up)
@media #{$large-up} {
}
// TABLET AND UP (461 up)
@media #{$medium-up} {
}
// MEDIUM ONLY (461 - 960)
@media #{$medium-only} {
}
// ONLY FOR MOBILE (960 and down)
@media #{$medium-down} {
}
// SMARTPHONE ONLY (Up to 460)
@media #{$small-only} {
}Partial settings
@import “foundation/functions";
$medium-range: (40.063em, 60em);
$large-range: (60.063em, 90em);
$screen: "only screen";
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})”;
$topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})”;