Using Media Queries

Use a simple short hand for setting responsive media queries, making your code a little more readable.

Quickly create media queries with this mixin. It just handles max and min width for now.

The mixin picks up on the break point values defined in the config:

$bp-tiny:   320px;
$bp-xsmall: 480px;
$bp-small:  640px;
$bp-medium: 800px;
$bp-large:  960px;
$bp-xl:     1140px;

min-width mixin

Therefore, declaring the following is all you need.

@include minbreak($bp-medium) {
 background-color: red;

This will generate:

@media screen and (min-width: 800px) {
 background-color: red;

max-width mixin

The reverse can be achieved with:

@include maxbreak($bp-medium) {
 background-color: red;

Which will produce and max-width media query:

@media screen and (max-width: 800px) {
 background-color: red;

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.