Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*---------------------------------------------------------------
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})"} }
}
// 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;
'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);
'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, '');
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.