Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
executable file 133 lines (101 sloc) 8.33 kb
<!doctype html>
320 and Up by Andy Clarke
Version: 3.0
Apache License: v2.0.
<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<meta charset="utf-8">
<title>320 and Up | The &#8216;tiny screen first&#8217; responsive boilerplate</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- For all browsers -->
<link rel="stylesheet" href="css/320andup.css">
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/selectivizr-min.js"></script>
<!-- JavaScript -->
<script src="js/modernizr-2.5.3-min.js"></script>
<!-- Icons -->
<!-- 16x16 -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- 32x32 -->
<link rel="shortcut icon" href="/favicon.png">
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<!-- <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png"> -->
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png"> -->
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png"> -->
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144x144-precomposed.png"> -->
<!--iOS -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="apple-mobile-web-app-title" content="320 and Up"> -->
<!-- <meta name="viewport" content="initial-scale=1.0"> (Use if apple-mobile-web-app-capable below is set to yes) -->
<!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
<!-- Startup images -->
<!-- iPhone 3GS, pre-2011 iPod Touch -->
<!-- <link rel="apple-touch-startup-image" href="img/startup/startup-320x460.png" media="screen and (max-device-width:320px)"> -->
<!-- iPhone 4, 4S and 2011 iPod Touch-->
<!-- <link rel="apple-touch-startup-image" href="img/startup/startup-640x920.png" media="(max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)"> -->
<!-- iPhone 5 and 2012 iPod Touch -->
<!-- <link rel="apple-touch-startup-image" href="img/startup/startup-640x1096.png" media="(max-device-width:548px) and (-webkit-min-device-pixel-ratio:2)"> -->
<!-- iPad landscape -->
<!-- <link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup/startup-1024x748.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)"> -->
<!-- iPad Portrait -->
<!-- <link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup/startup-768x1004.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)"> -->
<!-- Windows 8 / RT -->
<meta name="msapplication-TileImage" content="img/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#000">
<meta http-equiv="cleartype" content="on">
<body class="clearfix">
<header role="banner" class="clearfix">
<h1><a href="">320 and Up</a></h1>
<div class="content clearfix">
<h2 class="h1">This is the new &#8216;320 and Up&#8217;</h2>
<p>A lot&#8217;s happened since I wrote the original &#8216;320 and Up&#8217; &#8212; the &#8216;tiny screen first&#8217; responsive web design boilerplate. Back then we were just getting started with responsive web design and many sites, including mine, and frameworks and boilerplates including HTML5 Boilerplate, structured CSS3 Media Queries from the desktop down, rather than from small screens up. (Oh how we laughed when we realised our mistake.) So to put things right, I wrote &#8216;320 and Up&#8217;, to use as an extension to HTML5 Boilerplate or a set of standalone files.</p>
<p>Content first design&#8217;s become the norm and <a href="">HTML5 Boilerplate</a> and its <a href="">mobile</a> cousin now both structure their stylesheets from small screens up. Twitter&#8217;s <a href="">Bootstrap</a> and countless other frameworks include fluid grids, so what&#8217;s left for &#8216;320 and Up&#8217;?</p>
<h2 class="h3">Upwardly mobile</h2>
<p>I&#8217;m proud to say that &#8216;320 and Up&#8217; has been used by designers and developers all over the web. I&#8217;ve used versions of it on every website I&#8217;ve worked on since I wrote it. Small websites, medium-size websites and large websites including ISO, STV and UK Government websites that&#8217;ll launch this year.</p>
<p>Along the way, &#8216;320 and Up&#8217; grown to include selected files and styles from Twitter&#8217;s Bootstrap as well as responsive design libraries and polyfills. It&#8217;s become my personal toolkit, somewhere I keep the files and styles that I use when I start every new project.</p>
<h2 class="h3">&#8216;320 and Up&#8217; contains:</h2>
<ul class="list-bordered">
<li>Five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px</li>
<li>Design &#8216;atmosphere&#8217; (colour, texture and typography) separated from layout</li>
<li>Styles for buttons, forms and tables compatible with <a href="">Bootstrap</a>.</li>
<li>Font-based icons from <a href="">Font Awesome</a></li>
<li><a href="">Modernizr</a> and <a href="">Selectivizr</a></li>
<p>I&#8217;ve written the new &#8216;320 and Up&#8217; from scratch so it isn&#8217;t compatible with previous versions. You can download <a href="">the previous, now unsupported version</a> (zip), if you prefer.</p>
<p>Contribute to <a href="">320 and Up on Github</a> or <a href="">download</a>. Share on <a href=";via=malarkey&&amp;text=320%20and%20up.%20A%20tiny%20screen%20first%20boilerplate%20extension.">Twitter</a> or <a href=";t=320%20and%20up">Facebook</a></p>
</div><!-- / content -->
<footer role="contentinfo">
<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="">Andy Clarke</a>.</small>
<small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="">HTML5 Boilerplate</a>, <a href="">Frameless grid</a> and <a href="">Bootstrap</a>. Licensed under the <a href="">Apache License, Version 2.0</a>. The Font Awesome webfont, CSS, and LESS files are licensed under <a href="">CC BY 3.0</a>.</small>
<script src="//"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script src="js/helper.js"></script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
Jump to Line
Something went wrong with that request. Please try again.