modularis 0.0.1

data/docs/support.html.erb

@@ -0,0 +1,143 @@
+<style type="text/css">
+
+  .row.support { padding: 9px 0; }
+  .row.support:nth-child(2n) { background: #f4f4f4; }
+
+  .support .win { color: #4ea600; font-weight: bold; }
+  .support .meh { color: #888; font-weight: bold; }
+  .support .fail { color: #cc0000; font-weight: bold; }
+
+  .tooltip { font-size: 14px; }
+</style>
+
+<div class="row">
+
+
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Support" %>
+    <h2><%= @page_title %></h2>
+
+    <h4 class="subheader">Modularis was designed for and tested on numerous browsers and devices. Here's the rundown on what's tested, and what to do if something misbehaves.</h4>
+
+    <h5>Browser and Device Support</h5>
+    <p>We go to great lengths to ensure that Modularis works as expected on a variety of common browsers and devices. Given how forward-facing Modularis is there are some aesthetic properties which are not supported in older browsers (border radii, box shadows, etc), but the core elements are reliable across the board.</p>
+
+		<div class="row support">
+		  <div class="small-3 columns"><h5>Browser/OS</h5></div>
+		  <div class="small-3 columns"><h5>The Grid</h5></div>
+		  <div class="small-3 columns"><h5>Layout/UI</h5></div>
+		  <div class="small-3 columns"><h5>JS</h5></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">Chrome</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">Firefox</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">Safari</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">IE10</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">IE9</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">IE8</div>
+		  <div class="small-3 columns"><span data-tooltip class="meh has-tip tip-top" data-width="200" title="The grid is within a media query so IE8 gets the mobile layouts. If you need a full grid for IE8, see below for a link to a gist that will help out immensely.">&#9679;</span></div>
+		  <div class="small-3 columns"><span data-tooltip class="meh has-tip tip-top" title="90% of our UI elements will work perfectly in IE8. There are a few cases, like radio switches, where we make sure IE8 just gets normal UI elements instead of custom ones." data-width="200">&#9679;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">IE7</div>
+		  <div class="small-3 columns"><span class="fail">&#x2717;</span></div>
+		  <div class="small-3 columns"><span data-tooltip title="While we don't officially support IE7, but our UI styles should work for the most part" class="meh has-tip tip-top" data-width="200">&#9679;</span></div>
+		  <div class="small-3 columns"><span data-tooltip title="While we don't officially IE7, but our JS works for the most part. Clearing and tooltips have some issues with style and position." class="meh has-tip tip-top" data-width="200">&#9679;</span></div>
+		</div>
+
+		<div class="row support">
+		  <div class="small-3 columns">iOS (iPhone)</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">iOS (iPad)</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">Android 2, 4 (Phone)</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">Android 2, 4 (Tablet)</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">Windows Phone 7+</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="small-3 columns">Surface</div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+
+    <hr>
+
+    <h5>Want IE8 Grid Support?</h5>
+    <p>We know it can be hard to get clients to ditch support for IE8. We're hoping with the auto-update to IE10 release from Microsoft, we won't need to worry about it anymore. Until then, here's a gist with a grid that will work in IE8, just like it did in Modularis 3.</p>
+    <a class="small button" href="https://gist.github.com/themepilechris/5068210">Modularis IE8 Grid</a>
+
+    <hr>
+
+    <h5>Upgrading from Modularis 3.x?</h5>
+    <p>We've written a comprehensive <a href="http://modularis.themepile.com/migration.php">Migration Guide</a> to help you update your code for an existing or work in progress project.</p>
+
+    <hr />
+
+    <div class="panel">
+      <h4>Get Answers</h4>
+      <h5 class="subheader">We've outlined some of the most common frequently asked questions so that you can easily find the answer, as well as given you a way to contact us directly with questions, feedback or concerns.</h5>
+      <a class="button" href="faq.html">Read the FAQ or Ask a Question &raquo;</a> <a class="secondary button" href="changelog.html">See the Version Changelog &raquo;</a>
+    </div>
+
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+</div>
+
+
+
+
+
+
+
+

data/docs/test/_test-scripts.html.erb

@@ -0,0 +1,36 @@
+    <script>
+
+      // Google Analytics
+      var _gaq = _gaq || [];
+      _gaq.push(
+        ['_setAccount', 'UA-2195009-2'],
+        ['_trackPageview'],
+        ['b._setAccount', 'UA-2195009-27'],
+        ['b._trackPageview']
+      );
+
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+
+      document.write('<script src="<%= asset_path %>/vendor/'
+        + ('__proto__' in {} ? 'zepto' : 'jquery')
+        + '.js"><\/script>');
+    </script>
+    <script src="<%= asset_path %>/docs.js"></script>
+    <script>
+      $(document)
+      <% if @joyride %>
+        .modularis()
+        .modularis('joyride', 'start');
+      <% else %>
+        .modularis();
+      <% end %>
+
+      // For Kitchen Sink Page
+      $('#start-jr').on('click', function() {
+        $(document).modularis('joyride','start');
+      });
+    </script>

data/docs/test/cards.html.erb

@@ -0,0 +1,77 @@
+<body>
+
+	<div class="row">
+
+		<div class="large-12 columns">
+			<h1>Cards Demo</h1>
+		</div>
+
+	</div>
+
+	<div class="row">
+		<div class="large-4 small-6 columns">
+			
+			<div class="card">
+				<div class="container">
+					<div class="front">
+						<img src="http://placehold.it/400x600" />
+					</div>
+
+					<div class="back">
+						<h5>This is a card.</h5>
+						<p>This card shows some content on the front and some on the back, and can be flipped by hovering on a desktop, or by swiping across on a touch device.</p>
+						<p>The back of the card is intentionally long, so that we can show both an example where the card is constrained to a square and where it is as long as the content on either side requires.</p>
+						<p>This card shows some content on the front and some on the back, and can be flipped by hovering on a desktop, or by swiping across on a touch device.</p>
+						<p>The back of the card is intentionally long, so that we can show both an example where the card is constrained to a square and where it is as long as the content on either side requires.</p>
+					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div class="large-4 small-6 columns">
+			
+			<div class="card square">
+				<div class="container">
+					<div class="front">
+						<img src="http://placehold.it/400x200" />
+						<h4>Example Card Title</h4>
+					</div>
+
+					<div class="back">
+						<h5>This is a card.</h5>
+						<p>This card shows some content on the front and some on the back, and can be flipped by hovering on a desktop, or by swiping across on a touch device.</p>
+						<p>The back of the card is intentionally long, so that we can show both an example where the card is constrained to a square and where it is as long as the content on either side requires.</p>
+						<p>This card shows some content on the front and some on the back, and can be flipped by hovering on a desktop, or by swiping across on a touch device.</p>
+						<p>The back of the card is intentionally long, so that we can show both an example where the card is constrained to a square and where it is as long as the content on either side requires.</p>
+					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div class="large-4 columns">
+			
+			<div class="card">
+				<div class="container">
+					<div class="front">
+						<img src="http://placehold.it/400x300" />
+					</div>
+
+					<div class="back">
+						<h5>This is a card.</h5>
+						<p>This card shows some content on the front and some on the back, and can be flipped by hovering on a desktop, or by swiping across on a touch device.</p>
+						<p>The back of the card is intentionally long, so that we can show both an example where the card is constrained to a square and where it is as long as the content on either side requires.</p>
+						<p>This card shows some content on the front and some on the back, and can be flipped by hovering on a desktop, or by swiping across on a touch device.</p>
+						<p>The back of the card is intentionally long, so that we can show both an example where the card is constrained to a square and where it is as long as the content on either side requires.</p>
+					</div>
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+
+	<%= render "_test-scripts.html.erb" %>
+
+</body>

data/docs/test/flexbox-grid.html.erb

@@ -0,0 +1,68 @@
+<body>
+
+	<div class="row">
+
+		<div class="large-12 columns">
+			<h1>Flexbox Grid Demo</h1>
+		</div>
+
+	</div>
+
+	<div class="row">
+
+		<div class="large-4 small-6 columns">
+			<h4>This is the first column.</h4>
+			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>
+
+		<div class="large-4 small-6 columns">
+			<h4>This is the second column.</h4>
+			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>
+
+		<div class="large-4 columns">
+			<h4>This is the third column.</h4>
+			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>
+
+		<div class="large-4 small-6 columns">
+			<h4>This is the fourth column.</h4>
+			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>
+
+		<div class="large-4 columns">
+			<h4>This is the fifth column.</h4>
+			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>
+
+	</div>
+
+
+	<%= render "_test-scripts.html.erb" %>
+
+</body>

data/docs/test/flip-nav.html.erb

@@ -0,0 +1,54 @@
+<body>
+
+	<div class="flip">
+		<div class="container">
+			
+			<div class="front">
+				<div class="row">
+					<div class="large-12 columns">
+						<h1>This is the front of the page.</h1>
+						<p>On the back of this page is the nav.</p>
+					
+						<a href="#" class="flip-this">Menu</a>
+
+						<ul class="small-block-grid-2 large-block-grid-4">
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+							<li><img src="http://placehold.it/500x500" /></li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			<nav class="back">
+				<div class="row">
+					<div class="large-12 columns">
+						<ul class="side-nav">
+							<li><a href="#">Item 1</a></li>
+							<li><a href="#">Item 2</a></li>
+							<li><a href="#">Item 3</a></li>
+							<li><a href="#">Item 4</a></li>
+							<li><a href="#">Item 5</a></li>
+						</ul>
+
+						<a href="#" class="flip-this">Close</a>
+					</div>
+				</div>
+			</nav>
+
+		</div>
+	</div>
+
+
+	<%= render "_test-scripts.html.erb" %>
+
+</body>

data/docs/test/layout.html.erb

@@ -0,0 +1,15 @@
+<!doctype html>
+<!--[if IE 8]><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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modularis Docs: <%= @page_title %></title>
+    <link rel="stylesheet" href="<%= asset_path %>/normalize.css" />
+    <link rel="stylesheet" href="<%= asset_path %>/docs.css" />
+    <script src="<%= asset_path %>/vendor/custom.modernizr.js"></script>
+  </head>
+
+		<%= yield %>
+
+</html>

data/docs/test/off-canvas1.html.erb

@@ -0,0 +1,64 @@
+<body class="off-canvas">
+
+	<header id="header" class="row">
+	  <div class="large-4 small-6 columns">
+	    <h1 id="site-title"><a href="http://themepile.com/playground/">ZURB</a></h1>
+	  </div>
+	  <div class="large-8 small-6 columns">
+	    <nav id="menu" role="navigation" class="hide-for-small">
+  			<ul id="mainNav" class="inline-list">
+  				<li><a href="">One</a></li>
+  				<li><a href="">Two</a></li>
+  				<li><a href="">Three</a></li>
+  				<li><a href="">Four</a></li>
+  			</ul>
+  		</nav>
+			<p class="show-for-small">
+			  <a class='sidebar-button button' id="sidebarButton" href="#sidebar" >Menu</a>
+			</p>
+	  </div>
+	</header>
+
+	<div class="row">
+		<section role="main">
+			<div class="row">
+			  <div class="large-8 columns">
+			    <h3>Off Canvas Nav Sidebar on Mobile</h3>
+    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget nulla massa. Sed ultricies posuere tincidunt. Morbi dolor est, aliquet quis egestas eu, consectetur nec neque. Etiam velit libero, congue eu accumsan sit amet, eleifend et sem. Donec ac felis sed sapien placerat venenatis. Fusce id tempus nunc. Vestibulum pellentesque vulputate tempus. Suspendisse sed consequat lectus. Nulla bibendum venenatis eros, elementum malesuada mi imperdiet eu. Fusce ornare gravida nulla, sed scelerisque sem scelerisque at.</p>
+
+    			<p>Mauris consectetur elementum massa nec convallis. Integer mauris purus, condimentum vitae mattis a, vehicula lacinia justo. Pellentesque scelerisque orci at ligula cursus eu tempor elit euismod. Donec eleifend, turpis in vulputate eleifend, orci lectus eleifend quam, et ultrices mi nisi id nulla. Nullam est magna, varius nec consectetur vel, pellentesque ac justo. Vivamus commodo pellentesque ante, sed semper nulla congue non. Nunc nec augue sed nibh dapibus accumsan. Nullam in mauris quis lacus ultricies convallis. Morbi semper suscipit elit ut suscipit. Donec lobortis tellus lorem.</p>
+    		</div>
+    		<div class="large-4 columns">
+    		  <h4>Sidebar</h4>
+    		  <ul class="disc">
+    		    <li><a href="#">Link to a Category</a></li>
+    		    <li><a href="#">Link to a Category</a></li>
+    		    <li><a href="#">Link to a Category</a></li>
+    		    <li><a href="#">Link to a Category</a></li>
+    		    <li><a href="http://en.wikipedia.org/wiki/The_Legend_of_Zelda:_A_Link_to_the_Past">Link to the Past</a></li>
+    		  </ul>
+    		</div>
+      </div>
+		</section>
+
+		<section id="sidebar" role="complementary">
+			<nav id="sideMenu" role="navigation">
+  			<ul id="sideMainNav" class="nav-bar">
+  				<li><a href="">One</a></li>
+  				<li><a href="">Two</a></li>
+  				<li><a href="">Three</a></li>
+  				<li><a href="">Four</a></li>
+  			</ul>
+  		</nav>
+		</section>
+	</div>
+
+  <footer class="site-footer row" role="contentinfo">
+    <div class="large-12 columns">
+      Created by ZURB for Modularis 3, based on code from Jason Weaver and Luke Wroblewski, ported to Modularis 4+
+    </div>
+  </footer>
+
+	<%= render "_test-scripts.html.erb" %>
+
+</body>

data/docs/test/off-canvas2.html.erb

@@ -0,0 +1,75 @@
+<body class="off-canvas paneled">
+
+	<div class="container">
+
+		<header id="header" class="row">
+		  <div class="large-four columns">
+		    <h1 id="site-title"><a href="http://themepile.com/playground/">ZURB</a></h1>
+		  </div>
+		  <div class="large-eight columns">
+		    <nav id="menu" role="navigation" class="hide-for-small">
+  				<ul id="nav" class="inline-list">
+  					<li><a href="#panel-1" class="main nav-item">Panel 1</a></li>
+  					<li><a href="#panel-2" class="main nav-item">Panel 2</a></li>
+  					<li><a href="#panel-3" class="main nav-item">Panel 3</a></li>
+  					<li><a href="#panel-4" class="main nav-item">Panel 4</a></li>
+  					<li><a href="#panel-5" class="main nav-item">Panel 5</a></li>
+  				</ul>
+  			</nav>
+
+  			<dl class="tabs five-up show-for-small" id="switchPanels">
+          <dd class="active"><a href="#panel-1">1</a></dd>
+          <dd><a href="#panel-2">2</a></dd>
+          <dd><a href="#panel-3">3</a></dd>
+          <dd><a href="#panel-4">4</a></dd>
+          <dd><a href="#panel-5">5</a></dd>
+  			</dl>
+		  </div>
+		</header>
+
+		<div class="row">
+  		<section role="main" id="main">
+  		  <article id="panel-1" class="page-panel">
+				  <h1>Panel 1</h1>
+				  <p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+				</article><!-- /#panel-1 -->
+
+
+  			<article id="panel-2" class="page-panel">
+  				<h1>Panel 2</h1>
+  				<p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+  		  </article><!-- /#panel-2 -->
+
+
+			  <article id="panel-3" class="page-panel">
+				  <h1>Panel 3</h1>
+				  <p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+				  <p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+				  <p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+				</article><!-- /#panel-3 -->
+
+
+			  <article id="panel-4" class="page-panel">
+				  <h1>Panel 4</h1>
+				  <p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+				</article><!-- /#panel-4 -->
+
+
+			  <article id="panel-5" class="page-panel">
+				  <h1>Panel 5</h1>
+				  <p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+				</article><!-- /#panel-5 -->
+
+		  </section>
+		</div>
+
+    <footer class="site-footer row" role="contentinfo">
+      <div class="twelve columns">
+        Created by ZURB for Modularis 3, based on code from Jason Weaver and Luke Wroblewski
+      </div>
+    </footer>
+  </div>
+
+  <%= render "_test-scripts.html.erb" %>
+
+</body>

data/docs/test/off-canvas3.html.erb

@@ -0,0 +1,65 @@
+<body class="off-canvas nav-on-top">	
+
+  <div class="container">
+
+    <nav id="topMenu" role="navigation">
+      <ul id="nav" class="nav-bar">
+        <li><a href="">One</a></li>
+        <li><a href="">Two</a></li>
+        <li><a href="">Three</a></li>
+        <li><a href="">Four</a></li>
+      </ul>
+    </nav>
+
+    <header id="header" class="row">
+      <div class="large-4 small-6 columns">
+        <h1 id="site-title"><a href="http://themepile.com/playground/">ZURB</a></h1>
+      </div>
+      <div class="large-8 small-6 columns">
+        <nav id="menu" role="navigation" class="hide-for-small">
+          <ul id="mainNav" class="inline-list">
+            <li><a href="">One</a></li>
+            <li><a href="">Two</a></li>
+            <li><a href="">Three</a></li>
+            <li><a href="">Four</a></li>
+          </ul>
+        </nav>
+        <p class="show-for-small">
+          <a class='menu-button button' id="menuButton" href="#menu">Menu</a>
+          <a class='sidebar-button button' id="sidebarButton" href="#sidebar">Extra</a>
+        </p>
+      </div>
+    </header>
+
+    <div class="row">
+      <section role="main">
+        <h3>Off Canvas Top Nav</h3>
+        <div class="row">
+          <div class="large-6 columns">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget nulla massa. Sed ultricies posuere tincidunt. Morbi dolor est, aliquet quis egestas eu, consectetur nec neque. Etiam velit libero, congue eu accumsan sit amet, eleifend et sem. Donec ac felis sed sapien placerat venenatis. Fusce id tempus nunc. Vestibulum pellentesque vulputate tempus. Suspendisse sed consequat lectus. Nulla bibendum venenatis eros, elementum malesuada mi imperdiet eu. Fusce ornare gravida nulla, sed scelerisque sem scelerisque at.</p>
+
+            <p>Mauris consectetur elementum massa nec convallis. Integer mauris purus, condimentum vitae mattis a, vehicula lacinia justo. Pellentesque scelerisque orci at ligula cursus eu tempor elit euismod. Donec eleifend, turpis in vulputate eleifend, orci lectus eleifend quam, et ultrices mi nisi id nulla. Nullam est magna, varius nec consectetur vel, pellentesque ac justo. Vivamus commodo pellentesque ante, sed semper nulla congue non. Nunc nec augue sed nibh dapibus accumsan. Nullam in mauris quis lacus ultricies convallis. Morbi semper suscipit elit ut suscipit. Donec lobortis tellus lorem.</p>
+          </div>
+          <div class="large-6 columns">
+            <p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+
+            <p>Quisque lacinia est a libero tempor quis gravida nibh luctus. Nulla facilisi. Vestibulum bibendum ipsum a lacus molestie pulvinar a nec risus. Nulla facilisi. Aenean nec tellus ligula. Ut tortor mi, consequat in ornare in, condimentum sed leo. Phasellus et luctus ipsum. Mauris gravida molestie velit ac iaculis. Integer quis libero id erat consectetur accumsan ut eget diam. In hac habitasse platea dictumst.</p>
+          </div>
+        </div>
+      </section>
+
+      <section id="sidebar" role="complementary">
+        <h4>Supplemental</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget nulla massa. Sed ultricies posuere tincidunt. Morbi dolor est, aliquet quis egestas eu, consectetur nec neque. Etiam velit libero, congue eu accumsan sit amet, eleifend et sem. Donec ac felis sed sapien placerat venenatis. Fusce id tempus nunc. Vestibulum pellentesque vulputate tempus. Suspendisse sed consequat lectus. Nulla bibendum venenatis eros, elementum malesuada mi imperdiet eu. Fusce ornare gravida nulla, sed scelerisque sem scelerisque at.</p>
+      </section>
+    </div>
+
+    <footer class="site-footer row" role="contentinfo">
+      <div class="large-12 columns">
+        Created by ZURB for Modularis 3, based on code from Jason Weaver and Luke Wroblewski
+      </div>
+    </footer>
+  </div>
+
+  <%= render "_test-scripts.html.erb" %>
+</body>