Skip to content

Instantly share code, notes, and snippets.

@geelen

geelen/metaquery_boilerplate.html

Last active September 19, 2015 15:10
Show Gist options
  • Save geelen/8858962 to your computer and use it in GitHub Desktop.
Save geelen/8858962 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
metaquery_boilerplate.html
<!doctype html>
<html lang="en" class="breakpoint-medium">
<head>
<meta charset="utf-8">
<title>Metaquery Boilerplate</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="breakpoint" content="small" media="(max-width: 480px)">
<meta name="breakpoint" content="medium" media="(min-width: 481px) and (768px)">
<meta name="breakpoint" content="large" media="(min-width: 769px)">
<!--[if gt IE 9]><!--><script type="text/javascript" charset="utf-8">
!function(a,b){var c={breakpoints:{},_namedEvents:{},_eventMatchCache:{},_globalEvents:[],onBreakpointChange:function(){var a=Array.prototype.slice.call(arguments),b=a.pop(),d=a.pop();"undefined"==typeof d?c._globalEvents.push(b):(c._namedEvents[d]=[]).push(b),k()}},d=function(c){/in/.test(b.readyState)?a.setTimeout(function(){d(c)},9):c()},e=function(a,c,d){b.addEventListener?a.addEventListener(c,d):a.attachEvent("on"+c,d)},f=function(a,b){return-1!==a.className.split(" ").indexOf(b)},g=function(a,b){var c=a.className.split(" "),d=c.indexOf(b);f(a,b)&&(c.splice(d,1),a.className=c.join(" "))},h=function(a,b){f(a,b)||(a.className=""!==a.className?a.className+" "+b:b)},i=function(a,c){var d="breakpoint-"+c,e=b.documentElement;a?h(e,d):g(e,d)},j=function(a,c){if(a)for(var d=b.getElementsByTagName("img"),e=0;e<d.length;e++){var f=d[e],g=f.getAttribute("data-mq-src");g&&(f.src=g.replace("[breakpoint]",c))}},k=function(){for(var b in c.breakpoints){var d=c.breakpoints[b],e=a.matchMedia(d).matches;if(c._namedEvents[b]&&c._eventMatchCache[b]!==e)for(var f=0;f<c._namedEvents[b].length;f++){var g=c._namedEvents[b][f];c._eventMatchCache[b]=e,"function"==typeof g&&g(e)}if(e)for(var h=0;h<c._globalEvents.length;h++){var k=c._globalEvents[h];"function"==typeof k&&k()}i(e,b),j(e,b)}},l=function(){for(var a=b.getElementsByTagName("meta"),d=0;d<a.length;d++)if("breakpoint"===a[d].name){var e=a[d].getAttribute("content"),f=a[d].getAttribute("media");c.breakpoints[e]=f}},m=function(){l(),k()},n=function(){l(),e(a,"resize",k),k()};a.metaQuery=c,m(),d(n)}(this,this.document);
</script><!--<![endif]-->
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<!-- AMAZING WEB EXPERIENCE GOES HERE -->
</body>
</html>
@ricnunes
Copy link

Awesome stuff you got here. Just one side note to the typo, that had me going crazy until I noticed it:

 <meta name="breakpoint" content="medium" media="(min-width: 481px) and (max-width: 768px)">

instead of

 <meta name="breakpoint" content="medium" media="(min-width: 481px) and (768px)">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment