Skip to content

Commit

Permalink
update to match Andy's new stuff, again. :)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jina Bolton committed May 18, 2012
1 parent c33e5a3 commit 7a17798
Show file tree
Hide file tree
Showing 101 changed files with 3,114 additions and 1,138 deletions.
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/.esproj/
/.dropbox
/Icon
/Icon
/.sass-cache/
/.DS_Store
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
26 changes: 0 additions & 26 deletions 320andup.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,37 +40,15 @@
<!-- 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 the new iPad -->
<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.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">
<h2><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a></h2>
<a href="#navigation" title="Jump to navigation"><i class="icon-chevron-down"></i></a>
</header>

<div class="content clearfix">
Expand Down Expand Up @@ -733,10 +711,6 @@ <h3 class="h4">Table (table-bordered and table-striped)</h3>

</div><!-- / content -->

<nav role="navigation" id="navigation">
<p><a href="http://stuffandnonsense.co.uk/blog/about/the_new_320_and_up">Read more about &#8216;320 and Up&#8217; on Andy&#8217;s blog</a></p>
</nav>

<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>
Expand Down
Binary file added css/.DS_Store
Binary file not shown.
458 changes: 429 additions & 29 deletions css/320andup_sass_compass.css → css/320andup-sass-compass.css

Large diffs are not rendered by default.

407 changes: 382 additions & 25 deletions css/320andup-sass.css

Large diffs are not rendered by default.

458 changes: 429 additions & 29 deletions css/320andup_scss_compass.css → css/320andup-scss-compass.css

Large diffs are not rendered by default.

407 changes: 382 additions & 25 deletions css/320andup-scss.css

Large diffs are not rendered by default.

72 changes: 0 additions & 72 deletions css/320andup.css
Original file line number Diff line number Diff line change
Expand Up @@ -1832,63 +1832,6 @@ table tbody tr:hover th {
.table-striped tbody tr:nth-child(odd) th {
background-color: #c7ced6;
}
/* Banner =================================================== */
[role="banner"] {
margin: 0 auto;
padding-top: 1.5em;
width: 90%;
}
[role="banner"] a[href="#navigation"] {
display: block;
position: absolute;
top: 11px;
right: 22px;
width: 43px;
height: 43px;
white-space: nowrap;
overflow: hidden;
background-color: #586879;
border: 1px solid #4d5b6a;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #f3f5f6;
font-size: 32px;
font-size: 3.2rem;
line-height: 42px;
text-align: center;
text-decoration: none;
}
/* Navigation =================================================== */
[role="navigation"] {
margin: 0 auto 1.5em;
width: 90%;
background-color: #586879;
border: 1px solid #4d5b6a;
}
[role="navigation"] p {
margin-bottom: 0;
padding: 6px 11px;
color: #ffffff;
}
[role="navigation"] a {
color: #ffffff;
}
/* Content =================================================== */
.content {
margin: 0 auto;
width: 90%;
}
/* contentinfo =================================================== */
[role="contentinfo"] {
padding: 1.5em 0;
border-top: 3px solid #c7ced6;
}
[role="contentinfo"] small {
display: block;
margin: 0 auto 1.5em;
width: 90%;
}
@media print {
/* Print =================================================== */
* {
Expand Down Expand Up @@ -1950,21 +1893,6 @@ table tbody tr:hover th {
}
@media only screen and (min-width: 768px) {
/* 768 =================================================== */
body {
display: table;
border-collapse: collapse;
}
[role="banner"] a[href="#navigation"] {
display: none !important;
visibility: hidden;
}
[role="navigation"] {
display: table-header-group;
}
[role="navigation"] p {
margin: 0 auto;
width: 90%;
}
}
@media only screen and (min-width: 992px) {
/* 992 =================================================== */
Expand Down
Binary file added img/a-rss.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 1 addition & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
<!-- For iPad 1-->
<!-- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> -->
<!-- For the new iPad -->
<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
<!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png"> -->
<!-- For iPhone 3G, iPod Touch and Android -->
<!-- <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> -->
<!-- For Nokia -->
Expand All @@ -70,7 +70,6 @@

<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">
Expand Down Expand Up @@ -103,10 +102,6 @@ <h2 class="h3">&#8216;320 and Up&#8217; contains:</h2>

</div><!-- / content -->

<nav role="navigation" id="navigation">
<p><a href="http://stuffandnonsense.co.uk/blog/about/the_new_320_and_up">Read more about &#8216;320 and Up&#8217; on Andy&#8217;s blog</a></p>
</nav>

<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>
Expand Down
6 changes: 5 additions & 1 deletion less/320andup.less
Original file line number Diff line number Diff line change
Expand Up @@ -102,5 +102,9 @@ only screen and (min-device-pixel-ratio: 1.5) {

// 11. UPSTARTS ==============================

// Modules and panels
@import "upstarts/320andup-modules/upstart.less";
@import "upstarts/320andup-panels/upstart.less";
@import "upstarts/320andup-panels/upstart.less";

// Layout option using display:table for navigation positioning
// @import "upstarts/320andup-display-table/upstart.less";
32 changes: 3 additions & 29 deletions less/768.less
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,11 @@
/* 768 =================================================== */

// 1. ROOT ==============================

body {
display : table;
border-collapse : collapse; }

// 2. TYPOGRAPHY ==============================
// 3. COLOUR ==============================
// 4. TEXTURE ==============================
// 5. ELEMENTS ==============================
// 6. LAYOUT ==============================

// BANNER ==============================

[role="banner"] a[href="#navigation"] {
.hidden; }

// NAVIGATION ==============================

[role="navigation"] {
display : table-header-group;

p {
margin : 0 auto;
width : 90%; }
}

// CONTENT ==============================
// 11 MAIN ==============================
// COMPLEMENTARY ==============================
// CONTENTINFO ==============================

// 7. VENDOR-SPECIFIC ==============================
// 8. MODERNIZR ==============================
// 9. TEMPLATE SPECIFICS ==============================
// 7. VENDOR-SPECIFIC ==============================
// 8. MODERNIZR ==============================
// 9. TEMPLATE SPECIFICS ==============================
58 changes: 0 additions & 58 deletions less/page.less
Original file line number Diff line number Diff line change
Expand Up @@ -7,63 +7,5 @@

// ==========================================================

/* Banner =================================================== */

[role="banner"] {
margin : 0 auto;
padding-top : @baselineheight;
width : 90%;

a[href="#navigation"] {
display : block;
position : absolute;
top : 11px;
right : 22px;
width : 43px;
height : 43px;
white-space : nowrap;
overflow : hidden;
background-color : lighten(@basecolor, 20%);
border : 1px solid lighten(@basecolor, 15%);
.rounded(4px);
color : lighten(@basecolor, 75%);
.font-size(32);
line-height : 42px;
text-align : center;
text-decoration : none; }
}

/* Navigation =================================================== */

[role="navigation"] {
margin : 0 auto @baselineheight;
width : 90%;
background-color : lighten(@basecolor, 20%);
border : 1px solid lighten(@basecolor, 15%);

p {
margin-bottom : 0;
padding : 6px 11px;
color : @white; }

a {
color : @white; }
}

/* Content =================================================== */

.content {
margin : 0 auto;
width : 90%; }

/* contentinfo =================================================== */

[role="contentinfo"] {
padding : @baselineheight 0;
border-top : 3px solid lighten(@basecolor, 60%);

small {
display : block;
margin : 0 auto @baselineheight;
width : 90%; }
}
82 changes: 82 additions & 0 deletions less/upstarts/320andup-display-table/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!doctype html>

<!--
320 and Up
Author: Andy Clarke (http://stuffandnonsense.co.uk)
Author: Keith Clark (http://twitter.com/keithclarkcouk)
Version: 3
URL: http://stuffandnonsense.co.uk/projects/320andup/
License: http://creativecommons.org/licenses/MIT/
-->

<!-- 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>Display table-based navigation | Upstart | 320 and Up</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">
<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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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 &#8216;320 and Up&#8217; on Andy&#8217;s blog</a></p>
</nav>

<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>
Loading

0 comments on commit 7a17798

Please sign in to comment.