Skip to content

Instantly share code, notes, and snippets.

@geelen

geelen/metaquery_boilerplate.html

Last active September 19, 2015 15:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save geelen/8858962 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save geelen/8858962 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. geelen revised this gist Feb 10, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion metaquery_boilerplate.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,6 +16,6 @@
    <link rel="stylesheet" href="styles/main.css">
    </head>
    <body>

    <!-- AMAZING WEB EXPERIENCE GOES HERE -->
    </body>
    </html>
  2. geelen revised this gist Feb 10, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions metaquery_boilerplate.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,9 +9,9 @@
    <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)">
    <script type="text/javascript" charset="utf-8">
    <!--[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>
    </script><!--<![endif]-->

    <link rel="stylesheet" href="styles/main.css">
    </head>
  3. geelen created this gist Feb 7, 2014.
    21 changes: 21 additions & 0 deletions metaquery_boilerplate.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <!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)">
    <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>

    <link rel="stylesheet" href="styles/main.css">
    </head>
    <body>

    </body>
    </html>