_mediaQueries.scss

/*---------------------------------------------------------------
	Media Queries
ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ
	Mixins
˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/

//Default values
$MEDIUM_MIN: 740px !default;
$LARGE_MIN: 1134px !default;
$XLARGE_MIN: 1440px !default;
$MEDIA: 'screen' !default;
$JS_BREAKPOINTS: false !default;
$JS_BREAKPOINTS_OVERLAY: false !default;

// Max breakpoint values
$SMALL_MAX: strip-units($MEDIUM_MIN)-1+'px';
$MEDIUM_MAX: strip-units($LARGE_MIN)-1+'px';
$LARGE_MAX: strip-units($XLARGE_MIN)-1+'px';
$MEDIA: 'screen' !default;

$MEDIA_SMALL_ONLY: "#{$MEDIA} and (max-width: #{$SMALL_MAX})";
$MEDIA_MEDIUM: "#{$MEDIA} and (min-width: #{$MEDIUM_MIN})";
$MEDIA_MEDIUM_ONLY: "#{$MEDIA} and (min-width: #{$MEDIUM_MIN}) and (max-width: #{$MEDIUM_MAX})";
$MEDIA_LARGE: "#{$MEDIA} and (min-width: #{$LARGE_MIN})";
$MEDIA_LARGE_ONLY: "#{$MEDIA} and (min-width: #{$LARGE_MIN}) and (max-width: #{$LARGE_MAX})";
$MEDIA_XLARGE: "#{$MEDIA} and (min-width: #{$XLARGE_MIN})";
$MEDIA_PRINT: "print";

@mixin smallOnly() {
	@media #{$MEDIA_SMALL_ONLY} {
		@content;
	}
};
@mixin medium() {
    @if $ie8 {
        @content;
    } @else {
        @media #{$MEDIA_MEDIUM} {
            @content;
        }
    }
};
@mixin mediumOnly() {
    @if $ie8 {
        @content;
    } @else {
        @media #{$MEDIA_MEDIUM_ONLY} {
            @content;
        }
    }
};
@mixin large() {
	@media #{$MEDIA_LARGE} {
		@content;
	}
};
@mixin largeOnly() {
	@media #{$MEDIA_LARGE_ONLY} {
		@content;
	}
};
@mixin xlarge() {
	@media #{$MEDIA_XLARGE} {
		@content;
	}
};
@mixin ie8() {
    @if $ie8 {
        @content;
    }
};

@mixin print() {
	@media #{$MEDIA_PRINT} {
		@content;
	}
};

$MEDIA_CONTENT_MAX: "#{$MEDIA} and (min-width: #{$CONTENT_MAX})";
@mixin contentMax() { 
	@media #{$MEDIA_CONTENT_MAX} {
		@content;
	}
};

$MEDIA_BODY_MAX: "#{$MEDIA} and (min-width: #{$BODY_MAX})";
@mixin bodyMax() { 
	@media #{$MEDIA_BODY_MAX} {
		@content;
	}
};

$MEDIA_SMALL_WRAP: "#{$MEDIA} and (min-width: #{$SMALL_WRAP_MAX}) and (max-width: #{$SMALL_MAX})";
@mixin smallWrapMax() { 
	@media #{$MEDIA_SMALL_WRAP} {
		@content;
	}
};

/*---------------------------------------------------------------
	Helper classes
˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/

//TODO: Make more selector efficient
.hide-for-small-only { @include smallOnly {display:none} }
.hide-for-medium-only { @include mediumOnly {display:none} }
.hide-for-large-only { @include largeOnly {display:none} }
.hide-for-medium, .show-for-small-only { @include medium {display:none !important} }
.hide-for-large { @include large {display:none} }
.hide-for-xlarge { @include xlarge {display:none} }

.hide-for-print { @include print {display:none}}

.show-for-medium-only { display:none; @include mediumOnly {display:inherit } }
.show-for-large-only { display:none; @include largeOnly {display:inherit} }
.show-for-xlarge-only, .show-for-xlarge { display:none; @include xlarge {display:inherit} }

.show-for-medium { display:none; @include medium {display:inherit } }
.show-for-large { display:none; @include large {display:inherit} }

.show-for-print-only { display:none; @include print { display:inherit; }}


@if $JS_BREAKPOINTS  == true {
	/*---------------------------------------------------------------
		Named breakpoints (for Javascript)
	˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
	@include smallOnly { head{font-family:'small'}}
	@include medium { head{font-family:'medium'}}
	@include large { head{font-family:'large'}}
	@include xlarge { head{font-family:'xlarge'}}
	@include bodyMax { head{font-family:'bodymax'}}

	/*---------------------------------------------------------------
		Breakpoint widths (for Javascript)
	˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
	title {font-family: '{_small_:_#{$SMALL_MAX}_,_medium_:_#{$MEDIUM_MIN}_,_large_:_#{$LARGE_MIN}_,_xlarge_:_#{$XLARGE_MIN}_,_bodymax_:_#{$BODY_MAX}_,_contentmax_:_#{$CONTENT_MAX}_}';}

}


@if $JS_BREAKPOINTS_OVERLAY == true {
	/*---------------------------------------------------------------
		Debug breakpoints
	˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
	body:before {
	position:fixed;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	padding:0 4px 3px 4px;
	font-size:10px;
	color:green;
	// background:#000;
	// background:rgba(0,0,0,.3);
	// text-shadow:0 1px 1px rgba(0,0,0,.5);
	z-index:$Z_BREAKPOINT_OVERLAY;
	display:inline-block;
	border-radius:0 0 3px 0;
	}

	@include smallOnly { body:before {content:"small (0px to #{$MEDIUM_MIN})"} }
	@include medium { body:before {content:"medium (#{$MEDIUM_MIN} to #{$LARGE_MIN})"} }
	@include large { body:before {content:"large (#{$LARGE_MIN} to #{$XLARGE_MIN})"} }
	@include xlarge { body:before {content:"xlarge (#{$XLARGE_MIN} to #{$BODY_MAX})"} }
	@include bodyMax { body:before {content:"bodyMax (>#{$BODY_MAX})"} }
}

_variables.scss

// Media Queries
$MEDIA: 'screen';
$JS_BREAKPOINTS: true;
$JS_BREAKPOINTS_OVERLAY: false;

// Breakpoints
$MEDIUM_MIN: 740px;
$LARGE_MIN: 860px;
$XLARGE_MIN: 1080px;

// Layout metrics
$CONTENT_MAX: $XLARGE_MIN - 40px;
$BODY_MAX: 1600px;
$GUTTER: 8px;
$GUTTER_MEDIUM: 16px;
$GRID_COLS: 10;
$SMALL_WRAP_MAX: 440px;
$HEADER_MED_OFFSET: 40px;

initBreakpoints.js

'use strict';/* global app */
(function(w,u){

	/*---------------------------------------
		Get Breakpoint sizes
	˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
	var breakpoints = JSON.parse(u.getCSSdata('title').replace(/_/g,'"'));
	for (var bp in breakpoints) {
		breakpoints[bp] = parseInt(breakpoints[bp],10);
	}
	app.breakpoints = breakpoints;
	app.getBreakpoint = checkBreakpoint;

	/*---------------------------------------
		Get Current Breakpoint
	˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
	function checkBreakpoint() {
        // Get current breakpoint name
	    var currentBreakpoint = u.getCSSdata('head');
	    // If breakpoint has changed
	    if (app.breakpoint !== currentBreakpoint) {
            // Store reference
	        app.breakpoint = currentBreakpoint;
	    }

	    return currentBreakpoint;
	}

	w.addEventListener('resize', checkBreakpoint);
	w.addEventListener('orientationchange', checkBreakpoint);
	checkBreakpoint();

})(window, app.utils);

utils.getCSSdata.js

'use strict';
/* global app */
// https://gist.github.com/replete/6333653
app.utils = app.utils || {};
app.utils.getCSSdata = function(tag) {
	var el = document.getElementsByTagName(tag)[0],
		bp = window.getComputedStyle ? getComputedStyle(el,'').getPropertyValue('font-family') : el.currentStyle.fontFamily;

	return bp.replace(/"|'|`/g, '');
};