Sass: Media Queries

To adjust the current breakpoints, edit under /settings/_options.scss. We highly recommend you keep them as is, but no project is the same, and new breakpoints will be needed.

// Max Tablet Device Width
$mq-tablet-landscape: em(1280px);

// MQ Variables
$mq-mini:           480px;
$mq-small:          600px;
$mq-medium:         768px;
$mq-large:          960px;
$mq-xlarge:         1220px;
$mq-xxlarge:        1440px;
$mq-xxxlarge:       1640px;

// Media Query - min-width
$mq-min-mini:       em($mq-mini);
$mq-min-small:      em($mq-small);
$mq-min-medium:     em($mq-medium);
$mq-min-large:      em($mq-large);
$mq-min-xlarge:     em($mq-xlarge);
$mq-min-xxlarge:    em($mq-xxlarge);
$mq-min-xxxlarge:   em($mq-xxxlarge);

// Media Query - max-width
$mq-max-tiny:       em($mq-mini - 1px);
$mq-max-mini:       em($mq-small - 1px);
$mq-max-small:      em($mq-medium - 1px);
$mq-max-medium:     em($mq-large - 1px);
$mq-max-large:      em($mq-xlarge - 1px);
$mq-max-xlarge:     em($mq-xxlarge - 1px);
$mq-max-xxlarge:    em($mq-xxxlarge - 1px);

// Media Query List Map
$mq: (
  'mini'          : ( min-width: $mq-min-mini ),
  'small'         : ( min-width: $mq-min-small ),
  'medium'        : ( min-width: $mq-min-medium ),
  'large'         : ( min-width: $mq-min-large ),
  'xlarge'        : ( min-width: $mq-min-xlarge ),
  'xxlarge'       : ( min-width: $mq-min-xxlarge ),
  'xxxlarge'      : ( min-width: $mq-min-xxxlarge ),

  'max-tiny'      : ( max-width: $mq-max-tiny ),
  'max-mini'      : ( max-width: $mq-max-mini ),
  'max-small'     : ( max-width: $mq-max-small ),
  'max-medium'    : ( max-width: $mq-max-medium ),
  'max-large'     : ( max-width: $mq-max-large ),
  'max-xlarge'    : ( max-width: $mq-max-xlarge ),
  'max-xxlarge'   : ( max-width: $mq-max-xxlarge ),

  'print'         : ( print ),
  'tab-port'      : ( screen and (min-device-width: $mq-min-medium) and (max-device-width: $mq-max-medium) and (orientation: portrait) ),
  'tab-land'      : ( screen and (min-device-width: $mq-min-medium) and (max-device-width: $mq-tablet-landscape) and (orientation: landscape) )
);

To use a media query:

@include mq(medium) {
  // styles that get added to a medium breakpoint
}
@include mq(large) {
  // styles that get added to a large breakpoint
}
@include mq(max-medium) {
  // styles that get added from large breakpoint down
}

// In this example, we are starting off with a red font color and a font-size of 10px.
// Once we hit the medium breakpoint, the font-size changes to 15px.
// When we view this style in print mode, the color is changed to black.
.style {
  color: red;
  font-size: em(10);
  @include mq(medium) {
    font-size: em(15);
  }
  @include mq(print) {
    color: #000;
  }
}

To add a new media query breakpoint:

// Inside $mq list map, define any additional breakpoints at the end.
$mq: (
  // existing media queries
  'custom-mq'       : ( (min-width: 500px) and (max-width: 600px) )
);

Media Query - Sublime Snippet - Guide on adding snippets to Sublime.

<snippet>
  <content><![CDATA[
@include mq(${1}) {
  ${2}
}
]]></content>
  <tabTrigger>mq</tabTrigger>
</snippet>

Simply type mq followed by Tab. This will produce the snippet necessary. Follow up with couple more Tabs to fill in the correct settings.

Custom Media Query Values

At times you just need a breakpoint value without having to add it to the list map. The reason we have a list of breakpoints is to keep our development concise and not to overuse breakpoint values. However, there are times that you will need a specific breakpoint to make it work.

To overcome that, you now can use pixel values inside the media query mixin.

.class-two {
  color: red;
  @include mq(650px) {
    // your styles
    // min-width media query
  }
}
.class-one {
  color: blue;
  @include mq(650px, max) {
    // your styles
    // max-width media query
  }
}

By adding max to your mixin, it will produce a max-width media query. Please not that it will subtract one pixel, so from that 650px, it will be 649px and down that your styles will be produced.

All of 40D development is mobile-first, which means we practice it for custom media queries as well.