Screens sizes and responsive

Using MQpacker to group média queries

MQpacker is a tool to regroup media queries. It allow you to write media queries right next or inside of an element declaration and to regroup them and reorder them in a mobile first fashion.

You can activate MQpacker using /* mqp:start */ and /* mqp:end */ comments :


/* mqp:start */
.my-block {
  /*...*/
  @media and (min-width: 680px) {
    /*...*/
  }
  &__elem-A {
    /*...*/
    @media and (min-width: 680px) {
      /*...*/
    }
    @media and (min-width: 1024px) {
      /*...*/
    }
  }
  &__elem-B {
    /*...*/
    @media and (min-width: 320px) {
      /*...*/
    }
  }
}
/* mqp:end */

Will output :


.my-block {
  /*...*/
}
.my-block__elem-A {
  /*...*/
}
.my-block__elem-B {
  /*...*/
}
@media and (min-width: 320px) {
  .my-block__elem-A {
    /*...*/
  }
  .my-block__elem-B {
    /*...*/
  }
}
@media and (min-width: 680px) {
  .my-block {
    /*...*/
  }
  .my-block__elem-A {
    /*...*/
  }
}
@media and (min-width: 1024px) {
  .my-block__elem-A {
    /*...*/
  }
  .my-block__elem-B {
    /*...*/
  }
}

All the médias queries found after a /* mqp:start */ will be regrouped and outputed in place of the /* mqp:end */ comment.

We recommand you to use MQpacker arround every new block/components declarations like in the previous example.
Be careful with existing code base, by changing the order of the media-queries, you will change the cascade and thus, potentially introduce undesired side effects. It is why we declare it using comments instead of running it on all the code base, to avoid regressions on any external or pre-existing CSS code base.

The set-from-screen mixin

use the set-from-screen mixin in with a screen map key to create a media querie


@include set-from-screen(m) {
  /* ... code */
}
// output
@media screen and (min-width: 680px) {
  /*... code*/
}

The modify-from-screens mixin

use the modify-from-screens mixin to create a series of viewport-specific scoped classes

Use the MQpacker comments around multiple responsive modifiers when properties may collide

for example, to create utilities that hide or show an element based on the viewport :


/* mqp: start */
.mu-show {
  @include modify-from-screens(('s', 'm', 'l', 'xl', 'xxl')) {
    display: block !important;
  }
}
.mu-hide {
  @include modify-from-screens(('s', 'm', 'l', 'xl', 'xxl')) {
    display: none !important;
  }
}
/* mqp: end */

Output:


/* from screen s and up (will hide and show at any size) */
.mu-show {
  display: block !important;
}
.mu-hide {
  display: none !important;
}
/* from screen m and up */
@media screen and (min-width: 680px) {
  .mu-show\@from-m {
    display: block !important;
  }
  .mu-hide\@from-m {
    display: none !important;
  }
}
/* from screen l and up */
@media screen and (min-width: 1024px) {
  .mu-show\@from-l {
    display: block !important;
  }
  .mu-hide\@from-l {
    display: none !important;
  }
}
/* from screen xl and up */
@media screen and (min-width: 1280px) {
  .mu-show\@from-xl {
    display: block !important;
  }
  .mu-hide\@from-xl {
    display: none !important;
  }
}
/* from screen xxl and up */
@media screen and (min-width: 1920px) {
  .mu-show\@from-xxl {
    display: block !important;
  }
  .mu-hide\@from-xxl {
    display: none !important;
  }
}

In the output, you can see a backslash in front of the @. It is used to escape a non standard character. You don't need to use the backslash on the html.

Markup usage :


<div class="mu-hide mu-show@from-l">
  I will be hidden at screen from 0px wide up to 1024px wide
</div>

Note that if we had not used mqpacker to group the media queries of both the hide and show utilities, and the hide utility being declared after the show, our element would not have showed up in any cases.

The modify from screen take a map as an argument.

You can either :

1) declare a map before passing it to the mixin


$viewports: ('s', 'm', 'l', 'xl', 'xxl');
@include modify-from-screens($viewports) {...}

2) passes the viewports names wrapped in parenthesis


@include modify-from-screens(('s', 'm', 'l', 'xl', 'xxl')) {...}

3) use the $major-screens variable

(if you want to pass all major screens has arguments)


@include modify-from-screens($major-screens) {...}

The screen variables

use the screen varibales to get the px value of a screen size

value	scss variable	examples of devices
0px and up	`$screen-s`	iphone4
320px and up	`$screen-s-medium`	iphone5, SE
360px and up	`$screen-s-large`	Sony Xperia P, Samsung Galaxy S4, iphone6,7,8
390px and up	`$screen-s-xlarge`	iphone6+,7+,X+, Samsung Galaxy Note
-	-	-
680px and up	`$screen-m`	Microsoft Surface Pro, Apple iPad mini, Samsung Galaxy Tab 7"
769px and up	`$screen-m-medium`	Samsung Nexus 10, Samsung Galaxy Tab 8.9" & 10"
-	-	-
1024px and up	`$screen-l`	Microsoft Surface Pro 3, Apple iPad Pro Ipad (landscape)
1100px and up	`$screen-l-medium`	landscape tablets, laptops
-	-	-
1280px and up	`$screen-xl`	laptops (depending on settings), Samsung Galaxy Tab 10" (landscape), Samsung Galaxy Tab 2 10" (landscape),
1440px and up	`$screen-xl-medium`	laptops (depending on settings), Microsoft Surface Pro 3 (landscape), Apple iPad Pro 12.9" (landscape)
1680px and up	`$screen-xl-large`	laptops (depending on settings)
-	-	-
1920px and up	`screen.xxl`	desktop computers