Skip to content

Instantly share code, notes, and snippets.

@tomhodgins
Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/08cad967fc8538c136e1 to your computer and use it in GitHub Desktop.
Save tomhodgins/08cad967fc8538c136e1 to your computer and use it in GitHub Desktop.
Element Query <section> template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, minimal-ui">
<style type="text/css">
html { -webkit-text-size-adjust: 100%; opacity: 0; }
body { margin: 0; }
</style>
</head>
<body>
<!-- xxx -->
<section id="xxx">
<div class="wrapper">
<!-- Put your HTML Here -->
</div>
</section>
<script type="text/eqcss">
@element '#xxx' and (min-width: 0px) {
$this * {
box-sizing: border-box;
-moz-box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: auto;
font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, Arial, sans-serif;
}
/* Put your EQCSS Here */
}
</script>
<!-- /xxx -->
<!--[if lt IE 9]><script src="//elementqueries.com/EQCSS-polyfills.js"></script><![endif]-->
<script src="//elementqueries.com/EQCSS.js"></script>
<script type="text/eqcss">@element 'html' and (min-width: 0px) { html { opacity: 1; } }</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment