bellmaker
Version:
Responsive CSS media query library for LESS and SASS, with device-agnostic and device-specific breakpoints
135 lines (122 loc) • 5 kB
HTML
<html lang="en" dir="ltr" xml:lang="en"
prefix="og: http://ogp.me/ns#
fb: http://ogp.me/ns/fb#
foaf: http://xmlns.com/foaf/0.1/
dc: http://purl.org/dc/terms/
v: http://rdf.data-vocabulary.org/#
owl: http://www.w3.org/2002/07/owl#" class="no-js no-touch">
<head>
<meta charset="utf-8">
<title property="dc:title">Bellmaker, the Media Query Master</title>
<!-- browser-specific tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="">
<link rel="shortcut icon" href="/favicon.ico" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.less.css">
<!-- endbuild -->
</head>
<body>
<header role="banner" class="bellmaker_container">
<h1>Bellmaker</h1>
<h2>The Media Query Master</h2>
</header>
<article role="main" class="bellmaker_container">
<h2>What am I seeing?</h2>
<p><em>Note: this page is entirely driven by CSS. JavaScript is not being used to return the results below.</em></p>
<ul>
<li><span id="basic_query"></span></li>
<li><span id="device_sniffer"></span></li>
<li><span id="aspect_ratio"></span></li>
</ul>
<section>
<h3>Bellmaker Device Coverage</h3>
<ul>
<li><strong>720 HD:2 (720×1280)</strong>
<ul>
<li>Blackberry Z30</li>
<li>Motorola Droid Maxx, Moto G, Moto X(1), Razr HD</li>
<li>Samsung GN2</li>
<li>Sony Xperia S</li>
</ul>
</li>
<li><strong>768 WXGA:2 (768×1280)</strong>
<ul>
<li>Blackberry Z10</li>
<li>Google Nexus 4</li>
</ul>
</li>
<li><strong>768 WXGA:2.4 (800×1280)</strong>
<ul>
<li>Nokia Lumia 920, 925, 928</li>
</ul>
</li>
<li><strong>800 WXGA:2 (800×1280)</strong>
<ul>
<li>Samsung GN1</li>
</ul>
</li>
<li><strong>Full HD:3 (1080×1920)</strong>
<ul>
<li>Google Nexus 5</li>
<li>HTC One M7, M8</li>
<li>LG G2</li>
<li>Motorola Moto X(2)</li>
<li>Samsung GS4, GS5 GN3</li>
<li>Sony Xperia Z(1)(2)(3)</li>
</ul>
</li>
<li><strong>WQHD:4 (1440×2560)</strong>
<ul>
<li>LG G3</li>
<li>Google Nexus 6</li>
<li>Samsung GN4</li>
</ul>
</li>
<li><strong>Early iPhone (320×480)</strong></li>
<li><strong>iPhone 4(s) (640×960)</strong></li>
<li><strong>iPhone 5(s)(c) (640×1136)</strong></li>
<li><strong>iPhone 6 (750×1334)</strong></li>
<li><strong>iPhone 6 Plus (1242×2208)</strong></li>
<li><strong>Early iPad (768×1024)</strong></li>
<li><strong>iPad (3)(4) (1536×2048)</strong></li>
<li><strong>iPad Air (1)(2) (1536×2048)</strong></li>
<li><strong>iPad Mini (2)(3) (1536×2048)</strong></li>
</ul>
</section>
<section>
<h3>View Documentation:</h3>
<ul>
<li><a href="https://github.com/herereadthis/bellmaker/">Bellmaker on Github</a></li>
<li><a href="http://herereadthis.com/code/bellmaker/">Bellmaker project page at herereadthis.com</a></li>
</ul>
</section>
</article>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>