Skip to content

Instantly share code, notes, and snippets.

@MoOx
Created May 30, 2012 05:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MoOx/2833853 to your computer and use it in GitHub Desktop.
Save MoOx/2833853 to your computer and use it in GitHub Desktop.
predefined sass media queries
//
// Predefined Media Queries Mixins
//
// @require sass-3.2 (you need eventually to do "sudo gem install sass --pre")
//
// @author Maxime Thirouin <maxime.thirouin@gmail.com>
//
// @link https://gist.github.com/2028061
// @link http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
/*
Depending on you main target, you should choose your main approximate gap: mobile, tablet or desktop ?
When you've choose it, You will probably create your main stylesheet code based on this layout.
After that, depending on how many layout you want to covert, choose the media queries you need,
& if they do not exists, you can use the mixin media-min, media-gap, media-max, to create your owns.
Eg. 1: Your main target is desktop & you support old browser: you main layout will be 960+:
- code your stylesheet for this layout, & use media-mobile() & media-tablet() to adapt your website
Eg. 2: You just prefer "mobile first" approch & does not take care for old browser (or use something
like Respond.js...):
- classic: code for mobile (540-?) & use media-tablet() & media-desktop()
- simple: code for mobile (540-?) & use media-tablet-n-up() (+ eventually media-desktop-n-up() & media-huge())
- precision: code for mobile (540-?) & use media-tablet-small(), media-tablet-large() & media-desktop()
;
- Your main target is desktop & you support old browser: you main layout will be 960+
*/
// portrait 240px 320px 480px 540px 600px 768px 800px 960px 1280px
// landscape 320px 480px 800px 960px 1024px 1280px
// here a 4 "gaps" defined
// from these gaps, we can produce lots of layouts combination
// I use weird variables names combining size + size & I hope "m-s" (medium pretty small) is not too weird
// small: old phone to portrait smartphone
$media-width-xxs: 240px !default; // old phone
$media-width-xs: 320px !default; // portrait smartphone
$media-width-s: 480px !default; // landscape smartphone or large portrait smartphone
$media-width-s-l: 540px !default; // huge portrait smartphone
// medium: big/landscape smartphone, to portrait tablet
$media-width-m-s: 600px !default; // small tablet
$media-width-m: 768px !default; // tablet
$media-width-m-l: 800px !default; // large tablet / landscape big smartphone
// large: landscape tablet, small desktop
$media-width-l: 960px !default; // average desktop / landscape huge smartphone
$media-width-l-l: 1024px !default; // landscape tablet
// xl: big tablet/ nice desktop to jumbotron :)
$media-width-xl: 1280px !default; // desktop / landscape large tablet
$media-width-xxl: 1382px !default; // large desktop
$media-width-xxxl: 1824px !default; // huge desktop
//
// Media Width
// you can use directly media-min since the default "side" is the width
//
@mixin media-min-width($min-width)
{
@include media-min($min-width)
{
@content
}
}
@mixin media-max-width($max-width)
{
@include media-max($max-width)
{
@content
}
}
@mixin media-gap-width($min-width, $max-width)
{
@include media-gap($min-width, $max-width)
{
@content
}
}
//
// 3 layouts: media-mobile, media-tablet, media-desktop
// 4 layouts: media-mobile, media-tablet-small, media-tablet-large, media-desktop
// 6 layouts: media-mobile-small, media-mobile-medium, media-mobile-large, media-tablet-small, media-tablet-large, media-desktop
//
@mixin media-mobile { @include media-max($media-width-s-l - 1px) { @content } }
@mixin media-mobile-small { @include media-max($media-width-xxs) { @content } }
@mixin media-mobile-medium { @include media-gap($media-width-xxs + 1px, $media-width-s - 1px) { @content } }
@mixin media-mobile-large { @include media-gap($media-width-s, $media-width-s-l) { @content } }
@mixin media-tablet { @include media-gap($media-width-s-l, $media-width-l - 1px) { @content } }
@mixin media-tablet-small { @include media-gap($media-width-s-l, $media-width-m - 1px) { @content } }
@mixin media-tablet-large { @include media-gap($media-width-m, $media-width-l - 1px) { @content } }
@mixin media-desktop { @include media-min($media-width-l) { @content } }
@mixin media-huge { @include media-min($media-width-xxxl) { @content } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment