This repository has been archived by the owner on Jan 14, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 259
/
index.html
126 lines (94 loc) · 7.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<!--
320 and Up by Andy Clarke
Version: 3.0
URL: http://stuffandnonsense.co.uk/projects/320andup/
Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-->
<!-- HTML5 Mobile Boilerplate -->
<!--[if IEMobile 7]><html class="no-js iem7"><![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- 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]-->
<head>
<meta charset="utf-8">
<title>320 and Up | The ‘tiny screen first’ responsive boilerplate</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For all browsers -->
<link rel="stylesheet" href="css/320andup.css">
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/selectivizr-min.js"></script>
<![endif]-->
<!-- JavaScript -->
<script src="js/modernizr-2.5.3.min.js"></script>
<!-- For iPhone 4 -->
<!-- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> -->
<!-- For iPad 1-->
<!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
<!-- For iPhone 3G, iPod Touch and Android -->
<!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
<!-- For Nokia -->
<!-- <link rel="shortcut icon" href="img/l/apple-touch-icon.png"> -->
<!-- For everything else -->
<link rel="shortcut icon" href="/favicon.ico">
<!--iOS -->
<!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
<!-- <link rel="apple-touch-startup-image" href="img/splash.png"> -->
<!-- <script>(function(){var p,l,r=window.devicePixelRatio;if(navigator.platform==="iPad"){p=r===2?"img/startup/startup-tablet-portrait-retina.png":"img/startup/startup-tablet-portrait.png";l=r===2?"img/startup/startup-tablet-landscape-retina.png":"img/startup/startup-tablet-landscape.png";document.write('<link rel="apple-touch-startup-image" href="'+l+'" media="screen and (orientation: landscape)"/><link rel="apple-touch-startup-image" href="'+p+'" media="screen and (orientation: portrait)"/>');}else{p=r===2?"img/startup/startup-retina.png":"img/startup/startup.png";document.write('<link rel="apple-touch-startup-image" href="'+p+'"/>');}})()</script> -->
<!--Microsoft -->
<!-- Prevents links from opening in mobile Safari -->
<!-- <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script> -->
<meta http-equiv="cleartype" content="on">
</head>
<body class="clearfix">
<header role="banner" class="clearfix">
<h1><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h1>
<a href="#navigation" title="Jump to navigation"><i class="icon-chevron-down"></i></a>
</header>
<div class="content clearfix">
<h2 class="h1">This is the new ‘320 and Up’</h2>
<p>A lot’s happened since I wrote the original ‘320 and Up’ — the ‘tiny screen first’ 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 ‘320 and Up’, to use as an extension to HTML5 Boilerplate or a set of standalone files.</p>
<p>Content first design’s become the norm and <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> and its <a href="http://html5boilerplate.com/mobile">mobile</a> cousin now both structure their stylesheets from small screens up. Twitter’s <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> and countless other frameworks include fluid grids, so what’s left for ‘320 and Up’?</p>
<h2 class="h3">Upwardly mobile</h2>
<p>I’m proud to say that ‘320 and Up’ has been used by designers and developers all over the web. I’ve used versions of it on every website I’ve worked on since I wrote it. Small websites, medium-size websites and large websites including ISO, STV and UK Government websites that’ll launch this year.</p>
<p>Along the way, ‘320 and Up’ grown to include selected files and styles from Twitter’s Bootstrap as well as responsive design libraries and polyfills. It’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">‘320 and Up’ contains:</h2>
<ul class="list-bordered">
<li>Five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px</li>
<li>Design ‘atmosphere’ (colour, texture and typography) separated from layout</li>
<li>Styles for buttons, forms and tables compatible with <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>.</li>
<li>Font-based icons from <a href="http://fortawesome.github.com/Font-Awesome">Font Awesome</a></li>
<li><a href="http://modernizr.com">Modernizr</a> and <a href="http://selectivizr.com">Selectivizr</a></li>
</ul>
<p>I’ve written the new ‘320 and Up’ from scratch so it isn’t compatible with previous versions. You can download <a href="http://stuffandnonsense.co.uk/projects/320andup/320andUp-unsupported.zip">the previous, now unsupported version</a> (zip), if you prefer.</p>
<p>Contribute to <a href="https://github.com/malarkey/320andup/">320 and Up on Github</a> or <a href="https://github.com/malarkey/320andup/zipball/master">download</a>. Share on <a href="http://twitter.com/share?url=http://stuffandnonsense.co.uk/projects/320andup&via=malarkey&&text=320%20and%20up.%20A%20tiny%20screen%20first%20boilerplate%20extension.">Twitter</a> or <a href="http://www.facebook.com/sharer.php?u=http://stuffandnonsense.co.uk/projects/320andup&&t=320%20and%20up">Facebook</a></p>
</div><!-- / content -->
<nav role="navigation" id="navigation">
<p><a href="http://stuffandnonsense.co.uk/blog/about/the_new_320_and_up">Read more about ‘320 and Up’ on Andy’s blog</a></p>
</nav>
<footer role="contentinfo">
<small>320 and Up, a Fashionably Flexible responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
<small>‘320 and Up’ wouldn’t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://framelessgrid.com/">Frameless grid</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://creativecommons.org/licenses/MIT/">Creative Commons MIT</a> license.</small>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script src="js/helper.js"></script>
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>