Grid system

examples/test/app/resources/asides/features.html

@@ -2,22 +2,6 @@
     <header data-title="Features"></header>
     <article class="list scroll">
         <ul>
-            <li>
-                <a href="#art-1" data-target="article">
-                    <strong>Art-1</strong>
-                </a>
-            </li>
-            <li>
-                <a href="#art-2" data-target="article">
-                    <strong>Art-2</strong>
-                </a>
-            </li>
-            <li>
-                <a href="#art-3" data-target="article">
-                    <strong>Art-3</strong>
-                </a>
-            </li>
-
             <!-- Basic Layout -->
             <li>
                 <a href="#list" data-target="section">
@@ -57,8 +41,8 @@
 
             <!-- Grid System -->
             <li>
-                <a href="#" data-target="section">
-                    <div class="bubble right">8</div>
+                <a href="#grid" data-target="section">
+                    <div class="bubble right">2</div>
                     <strong>Grid System</strong>
                     <small>Indented, Scroll</small>
                 </a>

examples/test/app/resources/sections/grid.html

@@ -0,0 +1,30 @@
+<section id="grid">
+    <header data-back="home" data-title="Grid System" class="extended"></header>
+
+    <nav class="groupbar">
+        <a href="#grid-basic" data-target="article" class="current" data-label="basic"></a>
+        <a href="#grid-calendar" data-target="article" data-label="calendar example"></a>
+    </nav>
+
+
+    <article id="grid-basic" style="font-size:0.7em;">
+        <div class="four rows">class="four rows"</div>
+        <div class="one row blue">class="one row blue"</div>
+        <div class="one row">class="one row"</div>
+        <div class="two rows ">
+            <div class="two columns blue">class="two colums blue"</div>
+            <div class="two column">class="two columns"</div>
+            <div class="three columns blue">class="three columns blue"</div>
+            <div class="three columns">class="three columns"</div>
+        </div>
+        <div class="two rows">
+            <div class="three columns">class="three columns"</div>
+            <div class="three column blue">class="three column"</div>
+            <div class="two columns">class="two columns"</div>
+            <div class="two columns blue">class="two columns blue"</div>
+        </div>
+    </article>
+
+    <article id="grid-calendar">
+    </article>
+</section>

examples/test/kitchensink.html

@@ -61,6 +61,7 @@
             </div>
         </header>
 
+
         <article id="art-1" data-loading="black">
         </article>
     </section>
@@ -108,7 +109,7 @@
             version: '2.0',
             sugars: ['map', 'pull'],
             resources: {
-                sections: [ 'notification.html', 'list.html', 'icon.html'],
+                sections: [ 'notification.html', 'list.html', 'icon.html', 'grid.html'],
                 templates: [],
                 asides: ['features.html', 'profiles.html']
             }