Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
executable file 728 lines (581 sloc) 18.228 kB
<!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 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 &#8216;tiny screen first&#8217; 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>
<link rel="shortcut icon" href="/favicon.ico">
<meta http-equiv="cleartype" content="on">
</head>
<body class="clearfix">
<header role="banner" class="clearfix">
<h2><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h2>
</header>
<div class="content clearfix">
<h1 class="h1">&#8216;320 and Up&#8217; styles</h1>
<section>
<h1 class="h2">Colour</h1>
<h2 class="h3">Base colour</h2>
<div class="swatch swatch-base">
<div class="swatch-row swatch-row-one clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="swatch-row swatch-row-two clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<h2 class="h3">Alert</h2>
<div class="swatch swatch-alert">
<div class="swatch-row swatch-row-one clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="swatch-row swatch-row-two clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<h2 class="h3">Error</h2>
<div class="swatch swatch-error">
<div class="swatch-row swatch-row-one clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="swatch-row swatch-row-two clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<h2 class="h3">Info</h2>
<div class="swatch swatch-info">
<div class="swatch-row swatch-row-one clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="swatch-row swatch-row-two clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<h2 class="h3">Success</h2>
<div class="swatch swatch-success">
<div class="swatch-row swatch-row-one clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="swatch-row swatch-row-two clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<h2 class="h3">Warning</h2>
<div class="swatch swatch-warning">
<div class="swatch-row swatch-row-one clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="swatch-row swatch-row-two clearfix">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<section>
<h1 class="h2">Typography</h1>
<ul class="furniture-list">
<li><h1>Heading 1 <span>(32px)</span></h1></li>
<li><h2>Heading 2 <span>(24px)</span></h2></li>
<li><h3>Heading 3 <span>(21px)</span></h3></li>
<li><h4>Heading 4 <span>(18px)</span></h4></li>
<li><h5>Heading 5 <span>(16px)</span></h5></li>
<li><h6>Heading 6 <span>(14px)</span></h6></li>
</ul>
<h2 class="h3">Paragraphs</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2 class="h3">Blockquote</h2>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</blockquote>
<h2 class="h3">Text level elements</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Use</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td>Strong emphasis</td>
</tr>
<tr>
<td><code>&lt;b&gt;</code></td>
<td>Presentational bold</td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td>Emphasis</td>
</tr>
<tr>
<td><code>&lt;i&gt;</code></td>
<td>Presentational italics</td>
</tr>
<tr>
<td><code>&lt;abbr&gt;</code></td>
<td>Abbreviations and acronyms</td>
</tr>
<tr>
<td><code>&lt;address&gt;</code></td>
<td>Content contact information</td>
</tr>
</tbody>
</table>
<h2 class="h3">Unordered list</h2>
<ul>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ul>
<h2 class="h3">Ordered list</h2>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<h2 class="h3">Definition list</h2>
<dl>
<dt>Definition term</dt>
<dd>Definition description</dd>
<dt>Definition term</dt>
<dd>Definition description</dd>
</dl>
<h2 class="h3">Horizontal definition list</h2>
<dl class="dl-horizontal">
<dt>Definition term</dt>
<dd>Definition description</dd>
<dt>Definition term</dt>
<dd>Definition description</dd>
</dl>
</section>
<section>
<h1 class="h2">Texture</h1>
<h2 class="h3">Alerts</h2>
<p>For more alert styles: <a href="http://twitter.github.com/bootstrap/components.html#alerts">Bootstrap alerts</a>,
<a href="https://github.com/twitter/bootstrap/blob/master/less/alerts.less">Bootstrap alerts LESS on Github</a></p>
<div class="alert">
<a class="close" data-dismiss="alert">×</a>
<strong>Alert</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="alert alert-block">
<a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">Alert block</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
<strong>Success</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="alert alert-warning">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<strong>Error</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="alert alert-info">
<a class="close" data-dismiss="alert">×</a>
<strong>Info</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="alert alert-inverse">
<a class="close" data-dismiss="alert">×</a>
<strong>Inverse</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<h2 class="h3">Boxes</h2>
<div class="well">
<p><strong>Well</strong> Lorem ipsum dolor sit amet, <a href="#" title="This is a tool-tip">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="well well-large">
<p><strong>Well large</strong> Lorem ipsum dolor sit amet, <a href="#" title="This is a tool-tip">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="h3">Badges</h2>
<p>For more badges styles: <a href="http://twitter.github.com/bootstrap/components.html#badges">Bootstrap forms</a>,
<a href="https://github.com/twitter/bootstrap/blob/master/less/badges.less">Bootstrap badges LESS on Github</a></p>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td><span class="badge">1</span></td>
</tr>
<tr>
<td>Success</td>
<td><span class="badge badge-success">2</span></td>
</tr>
<tr>
<td>Warning</td>
<td><span class="badge badge-warning">4</span></td>
</tr>
<tr>
<td>Error</td>
<td><span class="badge badge-error">6</span></td>
</tr>
<tr>
<td>Info</td>
<td><span class="badge badge-info">8</span></td>
</tr>
<tr>
<td>Inverse</td>
<td><span class="badge badge-inverse">10</span></td>
</tr>
</tbody>
</table>
<h2 class="h3">Form</h2>
<p>For more form styles: <a href="http://twitter.github.com/bootstrap/base-css.html#forms">Bootstrap forms</a>,
<a href="https://github.com/twitter/bootstrap/blob/master/less/forms.less">Bootstrap forms LESS on Github</a></p>
<h3 class="h4">Standard form</h3>
<form class="well">
<p><label>Label</label>
<input type="text" placeholder="Placeholder">
<span class="help-inline">Associated help text!</span></p>
<p><label class="checkbox"><input type="checkbox"> Checkbox option</label></p>
<p><button class="btn">Button</button></p>
</form>
<h3 class="h4">Search form</h3>
<form class="well">
<p><label>Label</label>
<input type="search" class="search-query"></p>
<p><button class="btn">Button</button></p>
</form>
<h3 class="h4">Inline form</h3>
<form class="well form-inline">
<input type="text" class="input-small">
<input type="password" class="input-small">
<label class="checkbox"> <input type="checkbox">Checkbox option</label>
<button class="btn">Button</button>
</form>
<h3 class="h4">Form elements</h3>
<form>
<p><label for="text">type="text"</label>
<input type="text" id="text" placeholder="Placeholder"></p>
<p><label for="email">type="email"</label><br>
<input type="email" id="email"></p>
<p><label for="url">type="url</label><br>
<input type="url" id="url"></p>
<p><label for="number">type="number"</label><br>
<input type="number" id="number"></p>
<p><label for="tel">type="tel"</label><br>
<input type="tel" id="tel"></p>
<p><label for="select-1">Select group</label><br>
<select id="select-1">
<option>1</option>
<option>2</option>
</select>
<select id="">
<option>January</option>
<option>February</option>
</select>
<select id="">
<option>2012</option>
<option>2013</option>
</select>
</p>
<ul>
<li><label class="checkbox"><input type="checkbox"> Checkbox option</label></li>
<li><label class="checkbox"><input type="checkbox"> Checkbox option</label></li>
</ul>
<ul>
<li><input type="radio" id="radio" class="radio"> Radio option</label></li>
<li><input type="radio" id="radio" class="radio"> Radio option</li>
</ul>
<p><label for="textarea">Textarea</label><br>
<textarea id="textarea"> </textarea></p>
</form>
<h2 class="h3">Form buttons</h2>
<p>For more buttons styles: <a href="http://twitter.github.com/bootstrap/base-css.html#buttons">Bootstrap buttons</a>,
<a href="https://github.com/twitter/bootstrap/blob/master/less/buttons.less">Bootstrap buttons LESS on Github</a></p>
<table class="table table-bordered">
<tbody>
<tr>
<td><button class="btn">Default</button></td>
<td><a href="#" class="btn">Default</a></td>
<td><input type="submit" value="Default" class="btn"></td>
<td>Standard button</td>
</tr>
<tr>
<td><button class="btn btn-disabled">Disabled</button></td>
<td><a href="#" class="btn btn-disabled">Disabled</a></td>
<td><input type="submit" value="Disabled" class="btn btn-disabled"></td>
<td>Disabled standard button</td>
</tr>
<tr>
<td><button class="btn btn-large">Default</button></td>
<td><a href="#" class="btn btn-large">Default</a></td>
<td><input type="submit" value="Default" class="btn btn-large"></td>
<td>Standard button (large)</td>
</tr>
<tr>
<td><button class="btn btn-small">Default</button></td>
<td><a href="#" class="btn btn-small">Default</a></td>
<td><input type="submit" value="Default" class="btn btn-small"></td>
<td>Standard button (small)</td>
</tr>
<tr>
<td><button class="btn btn-mini">Default</button></td>
<td><a href="#" class="btn btn-mini">Default</a></td>
<td><input type="submit" value="Default" class="btn btn-mini"></td>
<td>Standard button (mini)</td>
</tr>
<tr>
<td><button class="btn btn-primary">Primary</button></td>
<td><a href="#" class="btn btn-primary">Primary</a></td>
<td><input type="submit" value="Primary" class="btn btn-primary"></td>
<td>Extra visual weight and identifies a primary action</td>
</tr>
<tr>
<td><button class="btn btn-info">Info</button></td>
<td><a href="#" class="btn btn-info">Info</a></td>
<td><input type="submit" value="Info" class="btn btn-info"></td>
<td>An alternate to default styles</td>
</tr>
<tr>
<td><button class="btn btn-success">Success</button></td>
<td><a href="#" class="btn btn-success">Success</a></td>
<td><input type="submit" value="Success" class="btn btn-success"></td>
<td>A positive action</td>
</tr>
<tr>
<td><button class="btn btn-warning">Warning</button></td>
<td><a href="#" class="btn btn-warning">Warning</a></td>
<td><input type="submit" value="Warning" class="btn btn-warning"></td>
<td>Caution should be taken</td>
</tr>
<tr>
<td><button class="btn btn-inverse">Inverse</button></td>
<td><a href="#" class="btn btn-inverse">Inverse</a></td>
<td><input type="submit" value="Inverse" class="btn btn-inverse"></td>
<td>Dark grey button</td>
</tr>
</tbody></table>
<h2 class="h3">Tables</h2>
<p>For more tables styles: <a href="http://twitter.github.com/bootstrap/base-css.html#tables">Bootstrap tables</a>,
<a href="https://github.com/twitter/bootstrap/blob/master/less/tables.less">Bootstrap tables LESS on Github</a></p>
<h3 class="h4">Unclassified table</h3>
<table>
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!-- Next -->
<h2>Condensed table</h2>
<table class="table-condensed">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!-- Next -->
<h3 class="h4">Table (table-striped)</h3>
<table class="table-striped">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!-- Next -->
<h3 class="h4">Table (table-bordered)</h3>
<table class="table-bordered">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!-- Next -->
<h3 class="h4">Table (table-bordered and table-striped)</h3>
<table class="table-bordered table-striped">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</section>
</div><!-- / content -->
<footer role="contentinfo">
<small>320 and Up, a Fashionably Flexible &#169; responsive web design boilerplate by <a href="http://stuffandnonsense.co.uk">Andy Clarke</a>.</small>
<small>&#8216;320 and Up&#8217; wouldn&#8217;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://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>. The Font Awesome webfont, CSS, and LESS files are licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</small>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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>
<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>
Jump to Line
Something went wrong with that request. Please try again.