# Breakpoints

Typically designs will be provided covering the 5 targeted screen sizes, these are xsmall: 320px, small: 411px, medium: 768px, large: 1024px, xlarge: 1440px.

The SCSS toolkit provides a mixin that acts as a breakpoint manager and replaces the need for writing your own media queries. This covers all of the screen sizes that designs target other than xsmall as this particular screen size can be handled with styling outside of a media query.

@include breakpoint($from: small) {
  // => @media (min-width: 411px) { ... }
  // Do something..
}

@include breakpoint($from: medium) {
  // => @media (min-width: 768px) { ... }
  // Do something..
}

@include breakpoint($from: large) {
  // => @media (min-width: 1024px) { ... }
  // Do something..
}

@include breakpoint($from: xlarge) {
  // => @media (min-width: 1440px) { ... }
  // Do something..
}

# Min and Max width Media Queries

The breakpoint manager allows you to specify both min-width using ($from: [breakpoint]) and max-width using ($until: [breakpoint]). However, there is currently a bug in Chrome that means min-width and max-width breakpoints don't line up properly when using the browsers zoom, which can break your layouts. Due to this it is highly recommended that you use $from(min-width) wherever possible, and to only use $until(max-width) when necessary in maintaining legacy code.

# Custom breakpoints

In rare cases you may need to use breakpoint that is not in the specification, in these cases you can give the breakpoint mixin a custom value.

@include breakpoint($from: 576px) {
  // => @media (min-width: 576px) { ... }
  // Do something..
}

# Targeting IE11

There is also a unique breakpoint available for specifically targeting IE11.

@include breakpoint($and: $target-ie11) {
  // => @media (-ms-high-contrast: none), (-ms-high-contrast: active) { ... }
  // Do something..
}

@include breakpoint($from: medium, $and: $target-ie11) {
  // @media (min-width: 768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) { ... }
  // Do something..
}