Media Queries

We keep media queries fairly simple and let the percentage-based grid do the heavy lifting across various screen sizes.

Working with Media Queries and CSS

In CSS, media queries are easily written with a specific syntax. We only use one major breakpoint for the grid to shift layouts for screens above 768px wide. The rest of the media queries are used for visibility classes. You can view the following snippet to show you each of the media queries used in Suit.

/* Used to hide styles from older browsers and apply styles to all screen sizes. */
@media only screen { }


/* Apply styles to screens with a max-width 320px */
@media only screen and (max-width: 20em) { }


/* Apply styles to screens with a min-width of 321px */
@media only screen and (min-width: 20.063em) { }


/* Apply styles to screens with min-width 321px and a max-width 640px */
@media only screen and (min-width: 20.063em) and (max-width: 40em) { }


/* Apply styles to screens with a min-width of 641px */
@media only screen and (min-width: 40.063em) { }


/* Apply styles to screens with a min-width 641px and a max-width 1024px */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { }
	

/* Apply styles to screens with a min-width of 1025px */
@media only screen and (min-width: 64.063em) { }


/* Apply styles to screens with a min-width of 1025px and a max-width of 1440px */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { }


/* Apply styles to screens with a min-width of 1441px */
@media only screen and (min-width: 90.063em) { }


/* Apply styles to screens with a min-width of 1441px and a max-width of 1920px */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { }


/* Apply styles to screens with a min-width of 1921px */
@media only screen and (min-width: 120.063em) { }

Sass

When using Suit on the project level, the developer may choose to use Sass to write their CSS. In that case, The following Sass variables will make it easier to write mobile-first styles that work directly with Suit.

// Functions


@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}


@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}


// Media Query Ranges
$small-range: (0, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);


// Media Queries
$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";


$small-up: "#{$screen} and (min-width: #{lower-bound($small-range)})";
$small-only: "#{$screen} and (min-width: #{lower-bound($small-range)}) and (max-width: #{upper-bound($small-range)})";


$medium-up: "#{$screen} and (min-width: #{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width: #{lower-bound($medium-range)}) and (max-width: #{upper-bound($medium-range)})";


$large-up: "#{$screen} and (min-width: #{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width: #{lower-bound($large-range)}) and (max-width: #{upper-bound($large-range)})";


$xlarge-up: "#{$screen} and (min-width: #{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width: #{lower-bound($xlarge-range)}) and (max-width: #{upper-bound($xlarge-range)})";


$xxlarge-up: "#{$screen} and (min-width: #{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width: #{lower-bound($xxlarge-range)}) and (max-width: #{upper-bound($xxlarge-range)})";


$devices: "#{$screen} and (min-device-width : #{lower-bound($small-range)}) and (max-device-width : #{upper-bound($medium-range)})";
$retina: "#{$screen} and (-webkit-min-device-pixel-ratio: 2), #{$screen} and (min--moz-device-pixel-ratio: 2), #{$screen} and (-o-min-device-pixel-ratio: 2/1), #{$screen} and (min-device-pixel-ratio: 2), #{$screen} and (min-resolution: 192dpi), #{$screen} and (min-resolution: 2dppx)";