Change kitchen-sink

kitchen-sink/app/app.js

@@ -11,7 +11,7 @@ var App = (function(lng, undefined) {
 
     environment = function(event) {
         var environment = lng.Core.environment();
-        var el = lng.dom("section#environment > article");
+        var el = lng.dom("section > article#environment");
 
         if (environment.os) {
             el.find("#os > strong").html(environment.os.name);

kitchen-sink/app/asides/features.html

@@ -8,21 +8,15 @@
     <article class="list scroll active">
         <ul>
             <!-- Basic Layout -->
-            <li>
-                <a href="#main-article" data-router="article">
-                    <strong>Meet the framework</strong>
-                </a>
-            </li>
             <li class="active">
-                <a href="#second-article" data-router="article">
+                <a href="#main-article" data-router="article" data-title="Lungo Framework">
                     <strong>Meet the framework</strong>
-                    <div class="tag right">important</div>
                 </a>
             </li>
 
             <!-- Layout & Navigation -->
             <li>
-                <a href="#layout" data-router="section">
+                <a href="#layout" data-router="section" data-async="app/sections/layout.html">
                     <strong>Layout</strong>
                     <div class="tag right">5</div>
                 </a>
@@ -30,7 +24,7 @@
 
             <!-- List -->
             <li>
-                <a href="#list" data-router="section">
+                <a href="#list" data-router="section" data-async="app/sections/list.html">
                     <strong>Lists</strong>
                     <div class="tag right">22</div>
                 </a>
@@ -38,7 +32,7 @@
 
             <!-- Forms -->
             <li>
-                <a href="#form" data-router="section">
+                <a href="#form" data-router="section" data-async="app/sections/form.html">
                     <div class="tag right">8</div>
                     <strong>Form Elements</strong>
                 </a>
@@ -46,7 +40,7 @@
 
             <!-- Asides -->
             <li>
-                <a href="#aside" data-router="section">
+                <a href="#aside" data-router="section" data-async="app/sections/aside.html">
                     <div class="tag right">8</div>
                     <strong>Asides</strong>
                 </a>
@@ -54,7 +48,7 @@
 
             <!-- Data-Attributes -->
             <li>
-                <a href="#data" data-router="section">
+                <a href="#data" data-router="section" data-async="app/sections/data-attribute.html">
                     <div class="tag right">9</div>
                     <strong>Data-attributes</strong>
                 </a>
@@ -62,7 +56,7 @@
 
             <!-- Icons -->
             <li>
-                <a href="#icon" data-router="section">
+                <a href="#icon" data-router="section" data-async="app/sections/icon.html">
                     <div class="tag right">109</div>
                     <strong>Icons</strong>
                 </a>
@@ -70,7 +64,7 @@
 
             <!-- Scrolls -->
             <li>
-                <a href="#scroll" data-router="section">
+                <a href="#scroll" data-router="section" data-async="app/sections/scroll.html">
                     <div class="tag right">2</div>
                     <strong>Scrolls</strong>
                 </a>
@@ -78,7 +72,7 @@
 
             <!-- Touch Events -->
             <li>
-                <a href="#touchevents" data-router="section">
+                <a href="#touchevents" data-router="section" data-async="app/sections/touchevents.html">
                     <div class="tag right">19</div>
                     <strong>Touch Events</strong>
                 </a>
@@ -86,7 +80,7 @@
 
             <!-- Layout Events -->
             <li>
-                <a href="#layoutevents" data-router="section">
+                <a href="#layoutevents" data-router="section" data-async="app/sections/layoutevents.html">
                     <div class="tag right">2</div>
                     <strong>Layout Events</strong>
                 </a>
@@ -94,7 +88,7 @@
 
             <!-- Notifications -->
             <li>
-                <a href="#notification" data-router="section">
+                <a href="#notification" data-router="section" data-async="app/sections/notification.html">
                     <div class="tag right">8</div>
                     <strong>Notifications</strong>
                 </a>
@@ -102,7 +96,7 @@
 
             <!-- Pull & Refresh -->
             <li>
-                <a href="#pull" data-router="section">
+                <a href="#pull" data-router="section" >
                     <div class="tag right">1</div>
                     <strong>Pull & Refresh</strong>
                 </a>
@@ -110,7 +104,7 @@
 
             <!-- Carousel -->
             <li>
-                <a href="#carousel" data-router="section">
+                <a href="#carousel" data-router="section" >
                     <div class="tag right">1</div>
                     <strong>Carousel</strong>
                 </a>
@@ -118,7 +112,7 @@
 
             <!-- Environment -->
             <li>
-                <a href="#environment" data-router="section">
+                <a href="#environment" data-router="article" data-title="Environment">
                     <div class="tag right">1</div>
                     <strong>Environment</strong>
                 </a>
@@ -126,7 +120,7 @@
 
             <!-- Buttons & Colours -->
             <li>
-                <a href="#color" data-router="section" data-title="Colours">
+                <a href="#color" data-router="section" data-async="app/sections/color.html">
                     <div class="tag right">14</div>
                     <strong>Buttons & Colours</strong>
                 </a>
@@ -134,7 +128,7 @@
 
             <!-- Grid System -->
             <li>
-                <a href="#grid" data-router="section">
+                <a href="#grid" data-router="section" data-async="app/sections/grid.html">
                     <strong>Grid System</strong>
                 </a>
             </li>

kitchen-sink/app/events.trigger.js

@@ -13,20 +13,20 @@ Lungo.ready(function() {
     // Lungo.Notification.show("Please wait", "user", 2, function(){ alert(1); });
     // Lungo.Notification.error('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel');
     // Lungo.Notification.success('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel', 2, function(){alert(1)});
-    Lungo.Notification.confirm({
-        icon: 'user',
-        title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
-        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
-        accept: {
-            icon: 'checkmark',
-            label: 'Accept',
-            callback: function(){ alert("Yes!"); }
-        },
-        cancel: {
-            icon: 'close',
-            label: 'Cancel',
-            callback: function(){ alert("No!"); }
-        }
-    });
+    // Lungo.Notification.confirm({
+    //     icon: 'user',
+    //     title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
+    //     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
+    //     accept: {
+    //         icon: 'checkmark',
+    //         label: 'Accept',
+    //         callback: function(){ alert("Yes!"); }
+    //     },
+    //     cancel: {
+    //         icon: 'close',
+    //         label: 'Cancel',
+    //         callback: function(){ alert("No!"); }
+    //     }
+    // });
 
 });

kitchen-sink/app/sections/aside.html

@@ -4,10 +4,10 @@
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
-    <article id="aside-example" class="indented">
+    <article id="aside-example" class="active indented">
         <div>
-            <a href="#left" data-router="aside" data-icon="left" class="button anchor blue">Example of normal aside</a>
-            <a href="#right" data-router="aside" data-icon="right" class="button anchor red">Example of mini right aside</a>
+            <a href="#left" data-router="aside" data-async="app/asides/left.html" data-icon="left" class="button anchor blue">Example of normal aside</a>
+            <a href="#right" data-router="aside" data-async="app/asides/right.html" data-icon="right" class="button anchor red">Example of mini right aside</a>
         </div>
     </article>
 </section>

kitchen-sink/app/sections/carousel.html

@@ -14,7 +14,7 @@
             <a href="#" data-action="carousel" data-direction="right" data-icon="right"></a>
         </nav>
     </header>
-    <article id="carousel-article">
+    <article id="carousel-article" class="active">
         <div data-control="carousel" class="carousel">
             <div>
                 <div align="center">

kitchen-sink/app/sections/color.html

@@ -4,7 +4,7 @@
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
-    <article class="scroll indented">
+    <article class="active scroll indented">
         <div>
             <h1>Sizes</h1>
             <p class="margin bottom">

kitchen-sink/app/sections/environment.html

@@ -1,25 +0,0 @@
-<section id="environment" data-transition="slide">
-    <header data-title="Environment">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="back"></a>
-        </nav>
-    </header>
-    <article class="list">
-        <ul>
-            <li id="os" class="dark" data-icon="mobile">
-                <strong>Desktop</strong>
-                <small>unknown</small>
-            </li>
-
-            <li id="resolution" data-icon="picture">
-                <strong>0p x 0p</strong>
-                <small>Screen Resolution</small>
-            </li>
-
-            <li id="navigator" data-icon="brand html5">
-                <strong>webkit</strong>
-                <small>Mobile: </small>
-            </li>
-        </ul>
-    </article>
-</section>

kitchen-sink/app/sections/form.html

@@ -5,7 +5,7 @@
         </nav>
     </header>
 
-    <article class="scroll">
+    <article class="active scroll">
         <form class="margined">
             <input type="search" placeholder="type your search" />
             <a href="#" class="button theme" data-icon="search"></a>
@@ -40,11 +40,11 @@
                 <input type="range" min="0" max="1" class="checkbox left" value="0">
                 <input type="range" min="0" max="1" class="checkbox right active" value="1">
             </div>
-                <div class="four columns left">
-                    <a href="#" class="button anchor theme" data-label="Accept" data-icon="check"></a>
+                <div class="four columns s">
+                    <a href="#" class="button anchosr accept" data-label="Accept" data-icon="check"></a>
                 </div>
-                <div class="four columns right">
-                    <a href="#" class="button anchor red" data-label="Cancel" data-icon="close"></a>
+                <div class="four columns s">
+                    <a href="#" class="button anchsor cancel" data-label="Cancel" data-icon="close"></a>
                 </div>
         </form>
 

kitchen-sink/app/sections/grid.html

@@ -5,7 +5,7 @@
         </nav>
     </header>
 
-    <article id="grid-basic" style="font-size:0.7em;">
+    <article id="grid-basic" class="active"  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>

kitchen-sink/app/sections/icon.html

@@ -10,7 +10,7 @@
         <a href="#icons-brands" data-router="article" data-label="Brands" data-count="37" ></a>
     </nav>
 
-    <article id="icons-default" class="list scroll indented">
+    <article id="icons-default" class="active list scroll indented">
         <ul>
             <li data-icon="home">
                 <a href="#">

kitchen-sink/app/sections/layout.html

@@ -4,12 +4,12 @@
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
         <nav class="right">
-            <a href="#splash" class="button" data-router="section" data-icon="user" data-label="Splash"></a>
+            <a href="#splash" data-router="section" data-async="app/sections/splash.html" class="button" data-icon="user" data-label="Splash"></a>
         </nav>
     </header>
 
     <nav class="groupbar">
-        <a href="#layout-art1" data-router="article" data-label="Profile"></a>
+        <a href="#layout-art1" data-router="article" data-label="Profile" class="active"></a>
         <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="19"></a>
         <a href="#layout-art3" data-router="article" data-label="Map"></a>
         <a href="#layout-art4" data-router="article" data-label="Settings"></a>
@@ -17,8 +17,8 @@
 
     <footer>
         <nav>
-            <a href="#layout-art1" data-router="article"  data-icon="home"></a>
-            <a href="#layout-art2" data-router="article" class="active" data-icon="inbox" data-count="80"></a>
+            <a href="#layout-art1" data-router="article" data-icon="home" class="active"></a>
+            <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="80"></a>
             <a href="#layout-art3" data-router="article" data-icon="compass"></a>
             <a href="#layout-art4" data-router="article" data-icon="settings"></a>
         </nav>

kitchen-sink/app/sections/layoutevents.html

@@ -5,7 +5,7 @@
         </nav>
     </header>
 
-    <article class="list indented">
+    <article class="active list indented">
         <ul>
             <li class="dark">
                 <strong>Lungo gives you the possibility to subscribe to events generated by your layout, for example you'll know when a section/article is loaded or unloaded.</strong>

kitchen-sink/app/sections/notification.html

@@ -5,7 +5,7 @@
         </nav>
     </header>
 
-    <article class="list scroll indented">
+    <article class="active list scroll indented">
         <div>
             <a href="#" class="button anchor" data-label="Normal" data-action="normal"></a>
             <a href="#" class="button anchor" data-label="Loading" data-label="Loading" data-action="loading"></a>

kitchen-sink/app/sections/scroll.html

@@ -5,7 +5,7 @@
         </nav>
     </header>
 
-    <article>
+    <article class="active">
         <h1 class="one row ">.scroll stylesheet class</h1>
         <ul class=" four row scroll anchor">
             <img src="http://lorempixel.com/256/128/food/">

kitchen-sink/app/sections/splash.html

@@ -4,8 +4,8 @@
         <form class="rounded">
             <input type="text" placeholder="Your username" id="txt-signup-name" value="">
             <input type="password" placeholder="Your password" id="txt-signup-password" value="">
-            <a href="#" class="button blue big" data-icon="checkmark" data-icon="user">Login</a>
-            <a href="#back" data-router="section" class="button anchor" data-icon="left">Return to Kichensink</a>
+            <a href="#" class="button theme anchor" data-icon="checkmark" data-icon="user">Login</a>
+            <a href="#back" data-router="section" class="button accept anchor" data-icon="left">Return to Kichensink</a>
         </form>
     </article>
 </section>

kitchen-sink/app/sections/touchevents.html

@@ -5,7 +5,7 @@
         </nav>
     </header>
 
-    <article>
+    <article class="active">
         <div class="two rows" id="touchevents-console">Test them...</div>
         <div class="eight rows list scroll">
         <ul>

kitchen-sink/index.html

@@ -71,15 +71,14 @@
     <section id="main" data-transition="slide">
         <header>
             <nav class="left box">
-                <a href="#features" data-router="aside" data-async="app/asides/features.html" data-icon="menu"></a>
-                <a href="#layout" data-router="section" data-async="app/sections/layout.html" data-icon="down"></a>
+                <a href="#features" data-router="aside" data-icon="menu"></a>
             </nav>
             <div class="left">
-                <div class="centered title">Recibidos 2</div>
+                <div class="centered title">Lungo Framework</div>
             </div>
 
             <nav class="right box">
-                <a href="#" class="buttons" data-icon="mail"></a>
+                <a href="#" class="buttons" data-icon="share" data-article="main-article"></a>
             </nav>
         </header>
 
@@ -154,6 +153,25 @@
                 </li>
             </ul>
         </article>
+
+        <article id="environment" class="list">
+            <ul>
+                <li id="os" class="dark" data-icon="mobile">
+                    <strong>Desktop</strong>
+                    <small>unknown</small>
+                </li>
+
+                <li id="resolution" data-icon="picture">
+                    <strong>0p x 0p</strong>
+                    <small>Screen Resolution</small>
+                </li>
+
+                <li id="navigator" data-icon="brand html5">
+                    <strong>webkit</strong>
+                    <small>Mobile: </small>
+                </li>
+            </ul>
+        </article>
     </section>
 
     <!-- Lungo dependencies -->
@@ -203,28 +221,10 @@
     <script>
         Lungo.init({
             name: 'Kitchen Sink',
-            version: '2.0',
-            resources: ['app/sections/layout.html',
-                        'app/sections/notification.html',
-                        'app/sections/list.html',
-                        'app/sections/icon.html',
-                        'app/sections/grid.html',
-                        'app/sections/form.html',
-                        'app/sections/aside.html',
-                        'app/sections/touchevents.html',
-                        'app/sections/layoutevents.html',
-                        'app/sections/splash.html',
-                        'app/sections/data-attribute.html',
-                        'app/sections/scroll.html',
-                        'app/sections/color.html',
-                        'app/sections/pull.html',
+            version: '2.1',
+            resources: ['app/sections/pull.html',
                         'app/sections/carousel.html',
-                        'app/sections/environment.html',
-                        /*
-                        'app/asides/features.html',
-                        */
-                        'app/asides/left.html',
-                        'app/asides/right.html']
+                        'app/asides/features.html']
 
         });
     </script>
@@ -233,8 +233,6 @@
         <script src="app/events.touch.js"></script>
         <script src="app/events.pull.js"></script>
         <script src="app/events.carousel.js"></script>
-        <!--
         <script src="app/events.trigger.js"></script>
-    -->
 </body>
 </html>