Media Queries

Using a mixin makes media queries simple and easy.

The most common breakpoints are provided as named breakpoints.

You can override the default widths in your config file.

Basic Breakpoints

  • mercury: 1600px - widescreen
  • venus: 1600px - widescreen
  • earth: 1400px - large laptop
  • mars: 1200px - small laptop
  • jupiter: 1024px - tablet landscape
  • saturn: 768px - tablet portrait
  • uranus: 667px - iphone6 landscape
  • neptune: 568px - iphone5 landscape
  • pluto: 375px - iphone6 portrait

Additional Breakpoints

  • iphone6pLandscape: 736px - iphone6plus landscape
  • iphone6pPortrait: 414px - iphone6plus portrait
  • iphone5Portrait: 350px - iphone5 portrait

These breakpoints include the most common device widths.

HTML

Sass

You can use a named breakpoint or a custom breakpoint. If you choose to use a named breakpoint you should not include a modifier.

If you use a custom breakpoint you can specify a modifier. This should be 'min-width' or 'max-width'. If you do not include a modifier elr-breakpoint will use 'max-width' by default.

If you want to create complex media queries with the named breakpoints just use the keywords as variable names. eg. 'saturn' becomes $saturn.