Skip to content
Browse files

Adding version 0.1 files

  • Loading branch information...
1 parent 134846e commit b5d499e390455f81b96be3db9647cd6267c0e4ff @designbyfront committed Jul 22, 2011
View
58 css/example/global.css
@@ -0,0 +1,58 @@
+@import url("../global.css");
+
+/*
+This file contains the unique styles needed for example.html which do not appear in /css/global.css
+----------------------------------------------------------------------------------------
+*/
+
+html {
+ background: rgb(244, 244, 244);
+ }
+
+/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
+----------------------------------------------------------------------------------------*/
+h1 {
+ text-align: center;
+ font-size: 2.618em;
+ line-height: 1.2em;
+ }
+
+h3 { text-transform:uppercase; letter-spacing:0.12em; }
+h3, h4, h5, h6 { font-weight: bold; }
+
+p.intro { font-size: 1.309em; margin-bottom: 1em; }
+
+header { text-align:center; }
+
+footer {
+ margin:1.618em 0 0;
+ padding: 1.618em 0 0;
+ border-top: 1px solid rgb(102,102,102);
+ border-bottom: 1px solid rgb(102,102,102);
+ }
+
+footer p { float: left; margin-right:1em; }
+
+
+/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
+----------------------------------------------------------------------------------------*/
+
+header img#header-logo { margin-bottom:-0.809em; }
+
+header h2:before {
+ content:"";
+ border-bottom:1px solid #333;
+ height: 1.618em;
+ width: 35%;
+ display: block;
+ float: left;
+}
+
+header h2:after {
+ content:"";
+ border-bottom:1px solid #333;
+ height: 1.618em;
+ width: 35%;
+ display: block;
+ float: right;
+}
View
80 css/example/layout.css
@@ -0,0 +1,80 @@
+/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
+----------------------------------------------------------------------------------------*/
+#container {
+ padding: 1.618em;
+ margin: 0 auto;
+ max-width: 60em;
+ }
+
+header h2:before, header h2:after { width: 42%; }
+
+h1 { font-size: 4.4em; line-height:1.618em; margin-bottom:0.1em; }
+
+h1 span {
+ font-family: "proxima-nova-1","proxima-nova-2", arial, helvetica, sans-serif;
+ text-transform: uppercase;
+ letter-spacing:0.1em;
+ font-size:0.382em;
+ line-height:3.236em;
+ display:block;
+ }
+
+h1 span:before, h1 span:after {
+ content:"";
+ border-top:1px solid #333;
+ height: 0.1em;
+ width: 19%;
+ display: block;
+ margin-top: 1.618em;
+ }
+
+h1 span:before { float: left; }
+h1 span:after { float: right; }
+
+ul { margin-left: 0.4em; }
+ol { margin-left: 0.4em; }
+
+p.intro {
+ font-size: 1.618em;
+ line-height:1.4289em;
+ max-width: 20em;
+ margin-bottom: 1em;
+ }
+
+aside {
+ float: right;
+ clear: right;
+ width: 25em;
+ margin-top:-12.5em;
+ height:auto;
+ }
+
+footer p { max-width: 17.942em; }
+
+
+/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
+----------------------------------------------------------------------------------------*/
+@media screen and (min-width: 30em) and (max-width: 63.236em) {
+
+#container { width: 30em; }
+
+header h2:before, header h2:after { width: 35%; }
+
+h1 { font-size: 2.618em; line-height: 1.4em; }
+h1 span { font-size:0.5em; }
+h1 span:before, h1 span:after { width: 10%; }
+
+p.intro {
+ font-size: 1.309em;
+ margin-bottom: 1em;
+ max-width: 33em;
+ }
+
+aside {
+ float: none;
+ width: auto;
+ height: auto;
+ margin: 0 0 2.2em;
+ }
+
+}
View
124 css/global.css
@@ -0,0 +1,124 @@
+/*
+Goldilocks Approach to Responsive Web Design Boilerplate
+
+Author: Design by Front - @designbyfront
+Version: 0.1
+URL: http://www.goldilocksapproach.com
+----------------------------------------------------------------------------------------
+
+CONTENTS - GLOBAL.CSS
+-----------------------------------------
+1. RESET
+2. ROOT
+3. CORE TYPOGRAPHY
+4. LINKS
+5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
+6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
+7. BROWSER AND NON-SEMANTIC STYLING
+
+CONTENTS - LAYOUT.CSS
+-----------------------------------------
+8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
+9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
+
+*/
+
+
+/* 1. RESET
+----------------------------------------------------------------------------------------*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size:100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+
+
+/* 2. ROOT
+----------------------------------------------------------------------------------------*/
+html {
+ overflow-y: scroll;
+ background: #FFF;
+ }
+
+/* /ht Ethan Marcotte - http://front.ie/l8rJaA */
+img, embed, object, video { max-width: 100%; }
+.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }
+
+
+/* 3. CORE TYPOGRAPHY
+----------------------------------------------------------------------------------------*/
+body {
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: 1em;
+ line-height: 1.618em;
+ color: #333;
+ }
+
+h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 0.809em;
+ line-height: 1em;
+ }
+
+p, ul, ol, dl, blockquote {
+ font-size: 1em;
+ line-height: 1.618em;
+ margin-bottom: 1.618em;
+ max-width: 30em; /* Optimal width for long-form text */
+ }
+
+ul { list-style-type: disc; margin-left: 1.618em; }
+ol { list-style-type: decimal; margin-left: 1.618em; }
+nav ul, nav ol { list-style: none; margin: 0; padding: 0;}
+
+b, strong { font-weight: bold; }
+i, em { font-style: italic; }
+small { font-size: 80%; }
+
+
+/* 4. LINKS
+----------------------------------------------------------------------------------------*/
+a, a:visited { outline: none; color: #439BBD; text-decoration: underline; }
+a:hover { outline: none; text-decoration:none; }
+a:active, a:focus { outline: none; }
+
+
+/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
+----------------------------------------------------------------------------------------*/
+
+
+
+/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
+----------------------------------------------------------------------------------------*/
+#container {
+ padding: 0.809em;
+ max-width: 30em;
+ margin: auto;
+ }
+
+aside { width: 100%; }
+
+
+/* 7. BROWSER AND NON-SEMANTIC STYLING
+----------------------------------------------------------------------------------------*/
+.cf:before, .cf:after { content: ""; display: block; }
+.cf:after { clear: both; }
+.ie6 .cf { zoom: 1 }
View
16 css/layout.css
@@ -0,0 +1,16 @@
+/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
+----------------------------------------------------------------------------------------*/
+#container {
+ padding: 1.618em;
+ margin: 0 auto;
+ max-width: 60em;
+ }
+
+
+/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
+----------------------------------------------------------------------------------------*/
+@media screen and (min-width: 30em) and (max-width: 63.236em) {
+
+#container { width: 30em; }
+
+}
View
140 example.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<!-- /ht Paul Irish - http://front.ie/j5OMXi -->
+<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+<meta charset="utf-8">
+<title></title>
+<meta name="description" content="">
+<meta name="author" content="">
+
+<!-- /ht Andy Clarke - http://front.ie/lkCwyf -->
+<meta http-equiv="cleartype" content="on">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<link rel="shortcut icon" href="/link/to/favicon.ico">
+<link rel="apple-touch-icon" href="/link/to/apple-touch-icon.png">
+
+<!-- /ht Jeremy Keith - http://front.ie/mLXiaS -->
+<link rel="stylesheet" href="css/example/global.css" media="all">
+<link rel="stylesheet" href="css/example/layout.css" media="all and (min-width: 33.236em)">
+<!-- 30em + (1.618em * 2) = 33.236em / Eliminates potential of horizontal scrolling in most cases -->
+
+<!--[if (lt IE 9) & (!IEMobile)]>
+<link rel="stylesheet" href="css/example/layout.css" media="all">
+<![endif]-->
+
+<script src="js/libs/modernizr-1.7.min.js"></script>
+
+</head>
+
+<body>
+
+ <div id="container" class="cf">
+
+ <article>
+ <header>
+ <h2>
+ <img src="images/example/header-logo.png" alt="Front" id="header-logo">
+ </h2>
+ <h1>The Goldilocks Approach <span>to Responsive Web Design</span></h1>
+ </header>
+
+ <div id="main" role="main" class="cf">
+ <p class="intro">With over 4 billion mobile devices in use around the world, mobile browsing&#160;is <a href="http://www.quirksmode.org/blog/archives/2011/01/2010_mobile_bro.html" title="2010 mobile browser stats">rising fast</a>. We can no longer assume that our sites will be viewed on a desktop monitor with an average resolution. Perhaps we never could.</p>
+
+ <aside>
+ <img src="http://placekitten.com/g/500/500" alt="" />
+ </aside>
+
+ <p>The answer, proposed by Ethan Marcotte, is <a href="http://www.alistapart.com/articles/responsive-web-design/" title="Ethan Marcottes article on Responsive Web Design">Responsive Web Design</a>. Instead of building separate sites for each device, we build one site that adapts to each device. However, the current approach to responsive design is still based on a few popular devices and, as a result, is likely to become obsolete as fast as they do.</p>
+ <p>What if we could create a truly universal design that was <strong>device independent</strong> &#8211; one that, no matter what device you viewed it on, looked like it was designed just for that device? At <a href="http://newadventuresconf.com/" title="New Adventures Conference">New Adventures</a>, Mark Boulton talked about <a href="http://www.markboulton.co.uk/journal/comments/a-richer-canvas" title="Mark Boulton: A Richer Canvas">designing from the content out, rather than the canvas in</a>, and we think this makes good sense. Perhaps the only way to create a design that will work on any device is to forget about the device altogether.</p>
+
+ <h3>Current Practice</h3>
+ <p><a href="http://stuffandnonsense.co.uk/projects/320andup/" title="320 and Up: A tiny screen first boilerplate extension">The current approach</a> to responsive design binds the design to the device. It uses pixel widths based on the dimensions of the most common devices, but we don&#8217;t think this approach is good enough. It results in designs that are based on two big inconstants:</p>
+
+ <ul>
+ <li>device resolution; and,</li>
+ <li>pixels.</li>
+ </ul>
+
+ <h4>Device resolution</h4>
+ <p>There are thousands of different devices out there, with millions of potential contexts. We can&#8217;t support them all, so we end up choosing a few popular devices, basing our designs on their resolutions, and ignoring the rest of the products on the market. When technology moves on and resolutions increase, our sites will look as outdated as a 600&times;400 site does now.</p>
+
+ <h4>Pixels</h4>
+ <p>Pixels sizes aren&#8217;t constant &#8211; or at least the display of them isn&#8217;t. 16px text on an iPhone can be ~60% the size of 16px text on a Macbook. Basing designs on pixel measurements creates inconsistency in viewing size across devices and can negatively affect readability and usability.</p>
+
+ <h3>The Device Doesn&#8217;t Matter</h3>
+ <p>So how do we do as Mark Boulton suggests and go about designing from the content out? In practice, it means starting with the most common form of content, the paragraph element, and building up to a full layout.</p>
+ <p>It&#8217;s tempting to first set the body font size. But the manufacturer or the user has already set the browser&#8217;s default size for readability, and we don&#8217;t think you should mess with it without good reason.</p>
+ <p>However, if you base your entire design on this base font size (using ems), then as it increases or decreases, so will your design. <strong>Using ems allows your designs to be&#160;resolution independent.</strong></p>
+ <p><img src="images/example/responsive.jpg" alt="" /></p>
+ <p>Next, use max-width to set the line length of the paragraph to be as readable as possible (~66 characters per line). This will vary from font to font, but something around 30em usually does the trick. This sets the width of your single column layout, making it &#8216;just right&#8217; for readability.</p>
+
+ <h3>The Goldilocks Approach</h3>
+ <p>Now, no matter which device your design is viewed in, the space available will be bigger, smaller, or just right, and you can use media queries to make the most of it.</p>
+
+ <p><img src="images/example/responsive2.jpg" alt="" /></p>
+
+ <h4>Too big</h4>
+ <p>If there is substantially more space than the single column width, then you can consider moving to a multi-column layout. For example, if the single column width is 28em (plus 1em margin on either side), and the screen width is more than 45em, then you have enough room to move to a three-column layout with 13.5em columns and 1em gutters, with the main content spanning two columns (so remaining the optimum width for readability).</p>
+ <p><img src="images/example/responsive3.jpg" alt="" /></p>
+
+ <h4>Too small</h4>
+ <p>If there&#8217;s less space than what&#8217;s required for optimum readability, then you need to make the most of the space you have. For example:</p>
+
+ <ul>
+ <li>halving the outer margin (but not removing it); and/or</li>
+ <li>bringing any hanging punctuation inline (so it isn&#8217;t cut off).</li>
+ </ul>
+
+ <p><img src="images/example/responsive4.jpg" alt="" /></p>
+
+ <h4>Just right</h4>
+ <p>If the space available is just right for your single column, then you&#8217;ve nothing to worry about. Your work here is done. Go make a cup of tea.</p>
+ <p>We&#8217;re not saying that a single column layout is the best layout for every site. We don&#8217;t know which layout a user will be viewing, so our sites need to work just as well in a single column state as they do with multiple columns. However, in practice, we&#8217;ve found that it helps to get the single column state right and then work up or down.</p>
+
+ <h3>The Perks</h3>
+ <p>We think this approach has a quite a few benefits.</p>
+ <p>With the current approach, even if you only designed for Apple devices (lucky!), you would require up to five different states:</p>
+
+ <ol>
+ <li>iMac (large display)</li>
+ <li>Macbook (smaller display)</li>
+ <li>iPad (tablet &#8211; could be portrait or landscape)</li>
+ <li>iPhone 4 (Retina)</li>
+ <li>iPhone (non-retina).</li>
+ </ol>
+
+ <p>The&#160;<a href="http://edenspiekermann.com/" title="Edenspiekermann Website">Edenspiekermann</a>&#160;site seems to take this approach and does it very well, but it&#8217;s just not a scalable solution. <strong>With the Goldilocks approach, you only have to consider three states</strong>:</p>
+
+ <ol>
+ <li>multi column (too big)</li>
+ <li>narrow column (too small)</li>
+ <li>single column (just right).</li>
+ </ol>
+
+ <p>By taking the device resolution out of the equation, you get layouts that should work across all devices and contexts, even ones that haven&#8217;t been invented yet. If, for whatever reason, a user has their base font size set to 80px, then this approach should still produce an appropriate layout for the space available. Talk about <strong>device independence</strong>.</p>
+ <p>And finally, technology changes, but the human body has stayed pretty constant for the past few thousand years. By designing for human constraints (readability) rather than technological constraints (device size and resolution), <strong>your layouts won&#8217;t date any time soon.</strong></p>
+ <p>And so the designers lived happily ever after&#8230;</p>
+ <p><em>Responsive design requires a new way of thinking, and there&#8217;s still plenty of discussion and exploration to be had before we can settle on what is &#8216;best practice&#8217;. We&#8217;ve found this approach to work well for us, but how do you think it would work for you?</em></p>
+
+ <h3><a href="http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design" title="Leave a comment on the original article">&laquo; Read the original article</a></h3>
+
+ <footer class="cf">
+ <p><a href='http://www.designbyfront.com'><img src="images/example/footer-logo.png" alt="Front" id="footer-logo" /></a></p>
+ <p>Front is an award-winning web strategy and design studio committed to making the web a better place.</p>
+ </footer>
+
+ </div><!-- /main -->
+
+ </article>
+
+ </div><!-- /container -->
+
+</body>
+
+</html>
View
BIN images/example/footer-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/example/header-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/example/responsive.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/example/responsive2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/example/responsive3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/example/responsive4.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
48 index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- /ht Paul Irish - http://front.ie/j5OMXi -->
+<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+<meta charset="utf-8">
+<title></title>
+<meta name="description" content="">
+<meta name="author" content="">
+
+<!-- /ht Andy Clarke - http://front.ie/lkCwyf -->
+<meta http-equiv="cleartype" content="on">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<link rel="shortcut icon" href="/link/to/favicon.ico">
+<link rel="apple-touch-icon" href="/link/to/apple-touch-icon.png">
+
+<!-- /ht Jeremy Keith - http://front.ie/mLXiaS -->
+<link rel="stylesheet" href="css/global.css" media="all">
+<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 33.236em)">
+<!-- 30em + (1.618em * 2) = 33.236em / Eliminates potential of horizontal scrolling in most cases -->
+
+<!--[if (lt IE 9) & (!IEMobile)]>
+<link rel="stylesheet" href="css/layout.css" media="all">
+<![endif]-->
+
+<script src="js/libs/modernizr-1.7.min.js"></script>
+
+</head>
+
+<body>
+
+ <div id="container" class="cf">
+
+ <header></header>
+
+ <div id="main" role="main"></div>
+
+ <footer></footer>
+
+ </div>
+
+</body>
+
+</html>
View
2 js/libs/modernizr-1.7.min.js
@@ -0,0 +1,2 @@
+// Modernizr v1.7 www.modernizr.com
+window.Modernizr=function(a,b,c){function G(){e.input=function(a){for(var b=0,c=a.length;b<c;b++)t[a[b]]=!!(a[b]in l);return t}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)l.setAttribute("type",f=a[d]),e=l.type!=="text",e&&(l.value=m,l.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&l.style.WebkitAppearance!==c?(g.appendChild(l),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(l,null).WebkitAppearance!=="textfield"&&l.offsetHeight!==0,g.removeChild(l)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=l.checkValidity&&l.checkValidity()===!1:/^color$/.test(f)?(g.appendChild(l),g.offsetWidth,e=l.value!=m,g.removeChild(l)):e=l.value!=m)),s[a[d]]=!!e;return s}("search tel url email datetime date month week time datetime-local number range color".split(" "))}function F(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+p.join(c+" ")+c).split(" ");return!!E(d,b)}function E(a,b){for(var d in a)if(k[a[d]]!==c&&(!b||b(a[d],j)))return!0}function D(a,b){return(""+a).indexOf(b)!==-1}function C(a,b){return typeof a===b}function B(a,b){return A(o.join(a+";")+(b||""))}function A(a){k.cssText=a}var d="1.7",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l=b.createElement("input"),m=":)",n=Object.prototype.toString,o=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),p="Webkit Moz O ms Khtml".split(" "),q={svg:"http://www.w3.org/2000/svg"},r={},s={},t={},u=[],v,w=function(a){var c=b.createElement("style"),d=b.createElement("div"),e;c.textContent=a+"{#modernizr{height:3px}}",h.appendChild(c),d.id="modernizr",g.appendChild(d),e=d.offsetHeight===3,c.parentNode.removeChild(c),d.parentNode.removeChild(d);return!!e},x=function(){function d(d,e){e=e||b.createElement(a[d]||"div");var f=(d="on"+d)in e;f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=C(e[d],"function"),C(e[d],c)||(e[d]=c),e.removeAttribute(d))),e=null;return f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),y=({}).hasOwnProperty,z;C(y,c)||C(y.call,c)?z=function(a,b){return b in a&&C(a.constructor.prototype[b],c)}:z=function(a,b){return y.call(a,b)},r.flexbox=function(){function c(a,b,c,d){a.style.cssText=o.join(b+":"+c+";")+(d||"")}function a(a,b,c,d){b+=":",a.style.cssText=(b+o.join(c+";"+b)).slice(0,-b.length)+(d||"")}var d=b.createElement("div"),e=b.createElement("div");a(d,"display","box","width:42px;padding:0;"),c(e,"box-flex","1","width:10px;"),d.appendChild(e),g.appendChild(d);var f=e.offsetWidth===42;d.removeChild(e),g.removeChild(d);return f},r.canvas=function(){var a=b.createElement("canvas");return a.getContext&&a.getContext("2d")},r.canvastext=function(){return e.canvas&&C(b.createElement("canvas").getContext("2d").fillText,"function")},r.webgl=function(){return!!a.WebGLRenderingContext},r.touch=function(){return"ontouchstart"in a||w("@media ("+o.join("touch-enabled),(")+"modernizr)")},r.geolocation=function(){return!!navigator.geolocation},r.postmessage=function(){return!!a.postMessage},r.websqldatabase=function(){var b=!!a.openDatabase;return b},r.indexedDB=function(){for(var b=-1,c=p.length;++b<c;){var d=p[b].toLowerCase();if(a[d+"_indexedDB"]||a[d+"IndexedDB"])return!0}return!1},r.hashchange=function(){return x("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},r.history=function(){return !!(a.history&&history.pushState)},r.draganddrop=function(){return x("dragstart")&&x("drop")},r.websockets=function(){return"WebSocket"in a},r.rgba=function(){A("background-color:rgba(150,255,150,.5)");return D(k.backgroundColor,"rgba")},r.hsla=function(){A("background-color:hsla(120,40%,100%,.5)");return D(k.backgroundColor,"rgba")||D(k.backgroundColor,"hsla")},r.multiplebgs=function(){A("background:url(//:),url(//:),red url(//:)");return(new RegExp("(url\\s*\\(.*?){3}")).test(k.background)},r.backgroundsize=function(){return F("backgroundSize")},r.borderimage=function(){return F("borderImage")},r.borderradius=function(){return F("borderRadius","",function(a){return D(a,"orderRadius")})},r.boxshadow=function(){return F("boxShadow")},r.textshadow=function(){return b.createElement("div").style.textShadow===""},r.opacity=function(){B("opacity:.55");return/^0.55$/.test(k.opacity)},r.cssanimations=function(){return F("animationName")},r.csscolumns=function(){return F("columnCount")},r.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";A((a+o.join(b+a)+o.join(c+a)).slice(0,-a.length));return D(k.backgroundImage,"gradient")},r.cssreflections=function(){return F("boxReflect")},r.csstransforms=function(){return!!E(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},r.csstransforms3d=function(){var a=!!E(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=w("@media ("+o.join("transform-3d),(")+"modernizr)"));return a},r.csstransitions=function(){return F("transitionProperty")},r.fontface=function(){var a,c,d=h||g,e=b.createElement("style"),f=b.implementation||{hasFeature:function(){return!1}};e.type="text/css",d.insertBefore(e,d.firstChild),a=e.sheet||e.styleSheet;var i=f.hasFeature("CSS2","")?function(b){if(!a||!b)return!1;var c=!1;try{a.insertRule(b,0),c=/src/i.test(a.cssRules[0].cssText),a.deleteRule(a.cssRules.length-1)}catch(d){}return c}:function(b){if(!a||!b)return!1;a.cssText=b;return a.cssText.length!==0&&/src/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(b.split(" ")[0])===0};c=i('@font-face { font-family: "font"; src: url(data:,); }'),d.removeChild(e);return c},r.video=function(){var a=b.createElement("video"),c=!!a.canPlayType;if(c){c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"');var d='video/mp4; codecs="avc1.42E01E';c.h264=a.canPlayType(d+'"')||a.canPlayType(d+', mp4a.40.2"'),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return c},r.audio=function(){var a=b.createElement("audio"),c=!!a.canPlayType;c&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"'),c.mp3=a.canPlayType("audio/mpeg;"),c.wav=a.canPlayType('audio/wav; codecs="1"'),c.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;"));return c},r.localstorage=function(){try{return!!localStorage.getItem}catch(a){return!1}},r.sessionstorage=function(){try{return!!sessionStorage.getItem}catch(a){return!1}},r.webWorkers=function(){return!!a.Worker},r.applicationcache=function(){return!!a.applicationCache},r.svg=function(){return!!b.createElementNS&&!!b.createElementNS(q.svg,"svg").createSVGRect},r.inlinesvg=function(){var a=b.createElement("div");a.innerHTML="<svg/>";return(a.firstChild&&a.firstChild.namespaceURI)==q.svg},r.smil=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"animate")))},r.svgclippaths=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"clipPath")))};for(var H in r)z(r,H)&&(v=H.toLowerCase(),e[v]=r[H](),u.push((e[v]?"":"no-")+v));e.input||G(),e.crosswindowmessaging=e.postmessage,e.historymanagement=e.history,e.addTest=function(a,b){a=a.toLowerCase();if(!e[a]){b=!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b;return e}},A(""),j=l=null,f&&a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function p(a,b){var c=-1,d=a.length,e,f=[];while(++c<d)e=a[c],(b=e.media||b)!="screen"&&f.push(p(e.imports,b),e.cssText);return f.join("")}function o(a){var b=-1;while(++b<e)a.createElement(d[b])}var c="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",d=c.split("|"),e=d.length,f=new RegExp("(^|\\s)("+c+")","gi"),g=new RegExp("<(/*)("+c+")","gi"),h=new RegExp("(^|[^\\n]*?\\s)("+c+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),i=b.createDocumentFragment(),j=b.documentElement,k=j.firstChild,l=b.createElement("body"),m=b.createElement("style"),n;o(b),o(i),k.insertBefore(m,k.firstChild),m.media="print",a.attachEvent("onbeforeprint",function(){var a=-1,c=p(b.styleSheets,"all"),k=[],o;n=n||b.body;while((o=h.exec(c))!=null)k.push((o[1]+o[2]+o[3]).replace(f,"$1.iepp_$2")+o[4]);m.styleSheet.cssText=k.join("\n");while(++a<e){var q=b.getElementsByTagName(d[a]),r=q.length,s=-1;while(++s<r)q[s].className.indexOf("iepp_")<0&&(q[s].className+=" iepp_"+d[a])}i.appendChild(n),j.appendChild(l),l.className=n.className,l.innerHTML=n.innerHTML.replace(g,"<$1font")}),a.attachEvent("onafterprint",function(){l.innerHTML="",j.removeChild(l),j.appendChild(n),m.styleSheet.cssText=""})}(a,b),e._enableHTML5=f,e._version=d,g.className=g.className.replace(/\bno-js\b/,"")+" js "+u.join(" ");return e}(this,this.document)

0 comments on commit b5d499e

Please sign in to comment.
Something went wrong with that request. Please try again.