Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 3 commits
  • 16 files changed
  • 0 commit comments
  • 1 contributor
View
8 _archive/_combinator/.htaccess
@@ -0,0 +1,8 @@
+# Rather than using a meta tag:
+BrowserMatch MSIE ie
+Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
+
+# Combinator:
+RewriteEngine on
+RewriteRule (.*\.css) combine.php?type=css&files=$1
+RewriteRule (.*\.js) combine.php?type=javascript&files=$1
View
157 _archive/_combinator/combine.php
@@ -0,0 +1,157 @@
+<?php
+
+ /************************************************************************
+ * CSS and Javascript Combinator 0.5
+ * Copyright 2006 by Niels Leenheer
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+
+ $cache = false;
+ $cachedir = dirname(__FILE__) . '/cache';
+ $cssdir = dirname(__FILE__) . '/css';
+ $jsdir = dirname(__FILE__) . '/js';
+
+ // Determine the directory and type we should use
+ switch ($_GET['type']) {
+ case 'css':
+ $base = realpath($cssdir);
+ break;
+ case 'javascript':
+ $base = realpath($jsdir);
+ break;
+ default:
+ header ("HTTP/1.0 503 Not Implemented");
+ exit;
+ };
+
+ $type = $_GET['type'];
+ $elements = explode(',', $_GET['files']);
+
+ // Determine last modification date of the files
+ $lastmodified = 0;
+ while (list(,$element) = each($elements)) {
+ $path = realpath($base . '/' . $element);
+
+ if (($type == 'javascript' && substr($path, -3) != '.js') ||
+ ($type == 'css' && substr($path, -4) != '.css')) {
+ // header ("HTTP/1.0 403 Forbidden");
+ exit;
+ }
+
+ if (substr($path, 0, strlen($base)) != $base || !file_exists($path)) {
+ header ("HTTP/1.0 404 Not Found");
+ exit;
+ }
+
+ $lastmodified = max($lastmodified, filemtime($path));
+ }
+
+ // Send Etag hash
+ $hash = $lastmodified . '-' . md5($_GET['files']);
+ header ("Etag: \"" . $hash . "\"");
+
+ if (isset($_SERVER['HTTP_IF_NONE_MATCH']) &&
+ stripslashes($_SERVER['HTTP_IF_NONE_MATCH']) == '"' . $hash . '"')
+ {
+ // Return visit and no modifications, so do not send anything
+ header ("HTTP/1.0 304 Not Modified");
+ header ('Content-Length: 0');
+ }
+ else
+ {
+ // First time visit or files were modified
+ if ($cache)
+ {
+ // Determine supported compression method
+ $gzip = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip');
+ $deflate = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'deflate');
+
+ // Determine used compression method
+ $encoding = $gzip ? 'gzip' : ($deflate ? 'deflate' : 'none');
+
+ // Check for buggy versions of Internet Explorer
+ if (!strstr($_SERVER['HTTP_USER_AGENT'], 'Opera') &&
+ preg_match('/^Mozilla\/4\.0 \(compatible; MSIE ([0-9]\.[0-9])/i', $_SERVER['HTTP_USER_AGENT'], $matches)) {
+ $version = floatval($matches[1]);
+
+ if ($version < 6)
+ $encoding = 'none';
+
+ if ($version == 6 && !strstr($_SERVER['HTTP_USER_AGENT'], 'EV1'))
+ $encoding = 'none';
+ }
+
+ // Try the cache first to see if the combined files were already generated
+ $cachefile = 'cache-' . $hash . '.' . $type . ($encoding != 'none' ? '.' . $encoding : '');
+
+ if (file_exists($cachedir . '/' . $cachefile)) {
+ if ($fp = fopen($cachedir . '/' . $cachefile, 'rb')) {
+
+ if ($encoding != 'none') {
+ header ("Content-Encoding: " . $encoding);
+ }
+
+ header ("Content-Type: text/" . $type);
+ header ("Content-Length: " . filesize($cachedir . '/' . $cachefile));
+
+ fpassthru($fp);
+ fclose($fp);
+ exit;
+ }
+ }
+ }
+
+ // Get contents of the files
+ $contents = '';
+ reset($elements);
+ while (list(,$element) = each($elements)) {
+ $path = realpath($base . '/' . $element);
+ $contents .= "\n\n" . file_get_contents($path);
+ }
+
+ // Send Content-Type
+ header ("Content-Type: text/" . $type);
+
+ if (isset($encoding) && $encoding != 'none')
+ {
+ // Send compressed contents
+ $contents = gzencode($contents, 9, $gzip ? FORCE_GZIP : FORCE_DEFLATE);
+ header ("Content-Encoding: " . $encoding);
+ header ('Content-Length: ' . strlen($contents));
+ echo $contents;
+ }
+ else
+ {
+ // Send regular contents
+ header ('Content-Length: ' . strlen($contents));
+ echo $contents;
+ }
+
+ // Store cache
+ if ($cache) {
+ if ($fp = fopen($cachedir . '/' . $cachefile, 'wb')) {
+ fwrite($fp, $contents);
+ fclose($fp);
+ }
+ }
+ }
+
View
0  css/basic.css → _archive/basic.css
File renamed without changes
View
0  css/fonts.css → _archive/fonts.css
File renamed without changes
View
0  index-1.html → _archive/index-1.html
File renamed without changes
View
0  index-2.html → _archive/index-2.html
File renamed without changes
View
0  index-3.html → _archive/index-3.html
File renamed without changes
View
74 _archive/index2.html
@@ -0,0 +1,74 @@
+ <!DOCTYPE html>
+<!--[if lt IE 7 ]> <html lang="en" class="no-fontface ie6 legacy-ie"> <![endif]-->
+<!--[if IE 7 ]> <html lang="en" class="no-fontface ie7 legacy-ie"> <![endif]-->
+<!--[if IE 8 ]> <html lang="en" class="no-fontface ie8 legacy-ie"> <![endif]-->
+<!--[if IE 9 ]> <html lang="en" class="no-fontface ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-fontface"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+
+ <title>Untitled</title>
+ <meta name="description" content="Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus." />
+
+ <link rel="stylesheet" href="basic.css" media="screen" id="basic-css" />
+ <link rel="stylesheet" href="reset.css,style-2.css" media="only all" id="enhanced-css" />
+
+ <!--[if IE]>
+ <link rel="stylesheet" href="reset.css,style.css" id="ie-enhanced-css" />
+ <![endif]-->
+
+ <script type="text/javascript">
+ (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
+ </script>
+
+ <script src="lib/respond.js,core.js,controller.js"></script>
+ </head>
+ <body>
+
+ <div class="wrap">
+
+ <div class="navbar var-2">
+
+ <div class="site-search" role="search">
+ <form action="?" method="post" data-collapse="600">
+ <label for="q">Search</label>
+ <div class="search">
+ <input type="search" name="q" placeholder="Search…" />
+ <input type="submit" value="Submit Search" class="search-submit" />
+ </div>
+ </form>
+ </div>
+
+ <div class="sitenav">
+ <nav role="navigation" class="nav-primary" data-collapse="800">
+ <h1 class="a11y-only">Site Navigation</h1>
+
+ <a href="#" class="home">Home</a>
+ <ul>
+ <li><a href="#">Lorem Ipsum</a></li>
+ <li><a href="#">Dolor Sit</a></li>
+ <li><a href="#">Sit Amet</a></li>
+ <li class="nav-current"><a href="#">Sed Adipiscing</a></li>
+ <li><a href="#">Curabitur consectetur</a></li>
+ <li><a href="#">Gravida nisl</a></li>
+ </ul>
+ </nav>
+<!--
+ <nav role="navigation" class="nav-secondary" data-collapse="600">
+ <h1 class="a11y-only">Section Navigation</h1>
+
+ <ul>
+ <li><a href="#">Lorem</a></li>
+ <li><a href="#">Ipsum</a></li>
+ <li class="nav-current"><a href="#">Dolor</a></li>
+ <li><a href="#">Sit</a></li>
+ <li><a href="#">Amet</a></li>
+ </ul>
+ </nav>-->
+ </div>
+ </div>
+
+ </div>
+ </body>
+</html>
View
74 _archive/index3.html
@@ -0,0 +1,74 @@
+ <!DOCTYPE html>
+<!--[if lt IE 7 ]> <html lang="en" class="no-fontface ie6 legacy-ie"> <![endif]-->
+<!--[if IE 7 ]> <html lang="en" class="no-fontface ie7 legacy-ie"> <![endif]-->
+<!--[if IE 8 ]> <html lang="en" class="no-fontface ie8 legacy-ie"> <![endif]-->
+<!--[if IE 9 ]> <html lang="en" class="no-fontface ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-fontface"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+
+ <title>Untitled</title>
+ <meta name="description" content="Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus." />
+
+ <link rel="stylesheet" href="basic.css" media="screen" id="basic-css" />
+ <link rel="stylesheet" href="reset.css,style-3.css" media="only all" id="enhanced-css" />
+
+ <!--[if IE]>
+ <link rel="stylesheet" href="reset.css,style.css" id="ie-enhanced-css" />
+ <![endif]-->
+
+ <script type="text/javascript">
+ (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
+ </script>
+
+ <script src="lib/respond.js,core.js,controller.js"></script>
+ </head>
+ <body>
+
+ <div class="wrap">
+
+ <div class="navbar var-2">
+
+ <div class="site-search" role="search">
+ <form action="?" method="post" data-collapse="600">
+ <label for="q">Search</label>
+ <div class="search">
+ <input type="search" name="q" placeholder="Search…" />
+ <input type="submit" value="Submit Search" class="search-submit" />
+ </div>
+ </form>
+ </div>
+
+ <div class="sitenav">
+ <nav role="navigation" class="nav-primary" data-collapse="800">
+ <h1 class="a11y-only">Site Navigation</h1>
+
+ <a href="#" class="home">Home</a>
+ <ul>
+ <li><a href="#">Lorem Ipsum</a></li>
+ <li><a href="#">Dolor Sit</a></li>
+ <li><a href="#">Sit Amet</a></li>
+ <li class="nav-current"><a href="#">Sed Adipiscing</a></li>
+ <li><a href="#">Curabitur consectetur</a></li>
+ <li><a href="#">Gravida nisl</a></li>
+ </ul>
+ </nav>
+<!--
+ <nav role="navigation" class="nav-secondary" data-collapse="600">
+ <h1 class="a11y-only">Section Navigation</h1>
+
+ <ul>
+ <li><a href="#">Lorem</a></li>
+ <li><a href="#">Ipsum</a></li>
+ <li class="nav-current"><a href="#">Dolor</a></li>
+ <li><a href="#">Sit</a></li>
+ <li><a href="#">Amet</a></li>
+ </ul>
+ </nav>-->
+ </div>
+ </div>
+
+ </div>
+ </body>
+</html>
View
0  js/script.js → _archive/script.js
File renamed without changes
View
0  css/style-1.css → _archive/style-1.css
File renamed without changes
View
0  css/style-2.css → _archive/style-2.css
File renamed without changes
View
0  css/style-3.css → _archive/style-3.css
File renamed without changes
View
85 css/rwd-nav.css
@@ -7,41 +7,40 @@ body {
}
#logo {
- display: block;
- margin: 0 0 1em;
-}
-.hasJS #logo {
float: left;
+ margin: 0 0 1em;
}
-
-.hasJS .content {
- clear: both;
-}
-
p {
font-size: 1.8em;
line-height: 1.4;
margin: 0 .3em 1em;
}
+.content {
+ clear: both;
+}
-
+a.skip {
+ position: absolute;
+ left: -999em;
+}
/* Navigation
------------------------------ */
.nav-primary {
- position: relative;
clear: left;
+ margin: 0 0 2em;
}
.nav-primary h3 {
- display: none;
+ position: absolute;
+ left: -999em;
}
.nav-primary ul {
border: 1px solid #e6e6e6;
}
.nav-primary li {
font-size: 1.8em;
- border-bottom: 1px solid #f8f8f8;
+ border-bottom: 1px solid #eee;
}
.nav-primary li:last-child {
border-bottom: 0;
@@ -60,63 +59,69 @@ p {
}
/* drop down menu formatting when all menu items won't fit in a single line */
-.no-fit .nav-primary {
- overflow: hidden;
+.nav-menu .nav-primary {
margin: 0 0 1.5em;
+ position: relative;
+ overflow: hidden;
+}
+.nav-menu .nav-primary a {
+ padding-right: 3em;
}
-.no-fit .nav-primary h3 {
+.nav-menu .nav-primary h3 {
position: absolute;
top: 0;
+ left: auto;
right: 0;
display: block;
width: 4em;
height: 4.5em;
- background: #666 url(img/icons.png) no-repeat -205px 50%;
+ background: #ccc url(img/icons.png) no-repeat -205px 45%;
text-indent: -999em;
cursor: pointer;
}
-.no-fit .nav-primary a {
- padding-right: 3em;
-}
-.no-fit .nav-primary.expanded h3 {
- background-position: -169px 50%;
+.nav-menu .nav-primary.expanded h3 {
+ background-position: -169px 45%;
}
-.no-fit .nav-primary li {
+.nav-menu .nav-primary li {
clear: left;
display: none;
}
-.no-fit .nav-primary.expanded li,
-.no-fit .nav-primary li.nav-current {
+.nav-menu .nav-primary.expanded li,
+.nav-menu .nav-primary li.nav-current {
display: list-item;
}
-.no-fit .nav-primary li.nav-current {
+.nav-menu .nav-primary li.nav-current {
border-bottom-width: 0;
}
-.no-fit .nav-primary.expanded li.nav-current {
+.nav-menu .nav-primary.expanded li.nav-current {
border-bottom-width: 1px;
}
-
-
/* Media queries
------------------------------ */
-@media screen and (min-width: 500px) {
- .hasJS .nav-primary {
- float: right;
- clear: none;
- }
-}
-
-@media screen and (min-width: 910px) {0
+@media screen and (min-width: 640px) {
+ .nav-primary,
.nav-primary ul {
- float: right;
- width: 100%;
+ float: left;
}
.nav-primary li {
float: left;
font-size: 1.5em;
border-bottom: 0;
+ }
+ .nav-menu .nav-primary {
+ float: right;
+ clear: none;
}
-}
+}
+
+@media screen and (min-width: 910px) {
+ .nav-primary {
+ float: right;
+ clear: none;
+ }
+}
+
+
View
18 index.html
@@ -6,7 +6,7 @@
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive navigation patterns</title>
<meta name="description" content="Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus." />
@@ -25,12 +25,10 @@
<a href="http://www.filamentgroup.com/" id="logo"><img src="fg-logo.gif" alt="Filament Group, Inc." /></a>
-<div class="content">
- <p>We offer services from strategy to UI and application design, to accessible front-end code development, and happily work with clients to find the right mix that supports their internal capabilities.</p>
-</div>
-
+<a href="#main" class="skip">Skip navigation</a>
+
<div class="nav-primary">
- <h3>Sections...</h3>
+ <h3>Sections:</h3>
<ul>
<li class="nav-current"><a href="http://www.filamentgroup.com/services">What We Do</a></li>
<li><a href="http://www.filamentgroup.com/portfolio">What We've Done</a></li>
@@ -40,11 +38,11 @@
</ul>
</div>
-
-
+<div class="content">
+ <p>We offer services from strategy to UI and application design, to accessible front-end code development, and happily work with clients to find the right mix that supports their internal capabilities.</p>
+</div>
-
-
+
</body>
</html>
View
25 js/rwd-nav.js
@@ -8,32 +8,23 @@
jQuery(function($){
- // scope styles to this class when JS is present
- $('html').addClass('hasJS');
-
$('.nav-primary')
- // move the source - ?
- .insertAfter('#logo')
-
// test the menu to see if all items fit horizontally
.bind('testfit', function(){
var nav = $(this),
- items = nav.find('a');
+ items = nav.find('a');
- $('body').removeClass('no-fit');
+ $('body').removeClass('nav-menu');
- // when all nav options are on the same line
- if ( $(items[items.length-1]).offset().top > $(items[0]).offset().top ) {
+ // when the nav wraps under the logo, or when options are stacked, display the nav as a menu
+ if ( (nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top) ) {
- // show all nav items (with styles scoped to this class)
- $('body').addClass('no-fit');
+ // add a class for scoping menu styles
+ $('body').addClass('nav-menu');
- };
+ };
})
- // update the nav on load
- .trigger('testfit')
-
// toggle the menu items' visiblity
.find('h3')
.bind('click focus', function(){
@@ -41,7 +32,7 @@ jQuery(function($){
});
// ...and update the nav on window events
- $(window).bind('orientationchange resize', function(){
+ $(window).bind('load resize orientationchange', function(){
$('.nav-primary').trigger('testfit');
});

No commit comments for this range

Something went wrong with that request. Please try again.