New markup

examples/test/app/app.js

@@ -1,14 +1,7 @@
 var App = (function(lng, undefined) {
 
 
-    lng.App.init({
-        name: 'Kitchen Sink',
-        version: '2.0',
-        resources: {
-            sections: [
-                'aside.html', 'aside-profiles.html']
-        }
-    });
+
 
     var _getEnvironmentFromQuoJS = (function() {
         var environment = lng.Core.environment();

examples/test/app/sections/aside.html

@@ -1,7 +1,76 @@
-<aside id="kitchen-sink-scroll" class="small -scroll left">
-    <nav>
-        <a href="#nav-1" data-target="article" class="current" data-icon="clock"></a>
-        <a href="#nav-2" data-target="article" data-icon="user" data-count="14"></a>
-        <a href="#test-2" data-target="section" data-icon="pushpin"></a>
-    </nav>
+<aside id="aside-controls" class="left">
+    <header data-title="Lungo Controls"></header>
+    <article id="article-controls" class="list scroll current">
+        <ul>
+            <!-- Basic Layout -->
+            <li>
+                <a href="#list" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Layout</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+
+            <!-- Grid System -->
+            <li>
+                <a href="#list" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Grid System</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+
+            <!-- Asides -->
+            <li>
+                <a href="#list" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Asides</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+            <!-- Buttons -->
+            <li>
+                <a href="#list" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Icons</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+            <!-- Forms -->
+            <li>
+                <a href="#list" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Form Elements</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+
+            <!-- Pulls -->
+            <li>
+                <a href="#list" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Buttons</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+
+            <!-- Notifications -->
+            <li>
+                <a href="#list" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Events</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+
+            <!-- Notifications -->
+            <li>
+                <a href="#notification" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Notifications</strong>
+                    <small>Messages, skskks</small>
+                </a>
+            </li>
+        </ul>
+    </article>
 </aside>

examples/test/index.html

@@ -108,10 +108,10 @@
     </section>
 
 -->
-    <section id="sec-1"  class="popa" data-transition="pop">
+    <section id="sec-1"  class="popa" data-transition="slide">
         <header class="extended">
             <nav class="left">
-                <a href="#kitchen-sink-scroll" data-target="aside" data-icon="home"></a>
+                <a href="#aside-controls" data-target="aside" data-icon="menu"></a>
                 <a href="#kitchen-sink-scroll" data-article="nav-2" data-target="aside" data-icon="heart" data-count="8"></a>
             </nav>
             <div class="left">
@@ -395,5 +395,17 @@
     <script src="app/data.js"></script>
     <script src="app/services.js"></script>
     <script src="app/events.js"></script>
+        <script src="app/events.notification.js"></script>
+
+    <script>
+        Lungo.App.init({
+            name: 'Kitchen Sink',
+            version: '2.0',
+            resources: {
+                sections: [
+                    'aside.html', 'aside-profiles.html', 'notification.html']
+            }
+        });
+    </script>
 </body>
 </html>