Refolder kitchen-sink

examples/kitchen-sink/app/app.js

@@ -1,41 +1,18 @@
 var App = (function(lng, undefined) {
 
-
-    lng.App.init({
-        name: 'Kitchen Sink',
-        version: '1.2',
-        resources: {
-            sections: [
-                'navigation.html',
-                'navigation-index.html',
-                'navigation-normal.html',
-                'navigation-pop.html',
-                'navigation-flow.html',
-                'buttons.html',
-                'lists.html',
-                'settings.html',
-                'forms.html',
-                'buttons-extra.html',
-                'aside.html',
-                'aside-profiles.html',
-                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/remote.html',
-                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/error.html']
-        }
-    });
-
     var _getEnvironmentFromQuoJS = (function() {
         var environment = lng.Core.environment();
         if (environment.isMobile) {
-           // alert('Your phone is ' + environment.os.name + ' (' + environment.os.version + ')');
+            alert('Your phone is ' + environment.os.name + ' (' + environment.os.version + ')');
         }
     })();
 
-    lng.View.Element.count('#btn-one', 7);
-    lng.View.Element.count('#btn-three', 0);
-    lng.View.Element.count('#aside-one', 17);
+    eventConsole = function(event) {
+        $$('#touchevents-console').html($$(event.target).data('event'));
+    };
 
     return {
-
+        eventConsole: eventConsole
     };
 
 })(Lungo);

examples/kitchen-sink/app/data.js

@@ -1,28 +0,0 @@
-App.Data = (function(lng, App, undefined) {
-
-
-    lng.Data.Sql.init({
-        name: 'lungo.js',
-        version: '1.0',
-        schema: [
-            { name: 'test', drop: true, fields: {
-                id: 'INTEGER PRIMARY KEY',
-                name: 'TEXT',
-                done: 'INTEGER DEFAULT 0',
-                created_at: 'DATETIME'
-                }
-            }
-        ]
-    });
-
-    lng.Data.Sql.insert('test', {name:'javi', done:'1'});
-
-    lng.Data.Sql.insert('test',
-        [
-            {name:'aitor', done:'1'},
-            {name:'iker', done:'1'}
-        ]
-    );
-
-
-})(Lungo, App);

examples/kitchen-sink/app/events.js

@@ -1,76 +1,9 @@
-App.Events = (function(lng, undefined) {
 
-    lng.ready(function() {
-        App.Services.mockProfiles();
+Lungo.Events.init({
+    'tap section#a article a': function(){
+        Lungo.Notification.loading('hole', '1', 'user');
+    },
+    'tap section#sec-1 header #btn-toggle-loading': App.View.toggleLoading,
+    'load section#sec-2 load': App.View.toggleLoading
+});
 
-        lng.View.Aside.show('#kitchen-sink', '#kitchen-sink-scroll');
-        lng.View.Element.progress('.progress', 10, true, 'Downloading 1/5...');
-    });
-
-    lng.dom('#event_touchstart').touch(function(event) { alert("touchstart!"); });
-    //OR
-    //lng.dom('#event_touchstart').on('touchstart', function(event) { alert("TOUCH_START!"); });
-    lng.dom('#event_touchend').on('touchend', function(event) { alert("touchend!");  });
-    lng.dom('#event_touchmove').on('touchmove' , function(event) { alert("touchmove!"); });
-
-    //Tap Methods
-    lng.dom('#event_tap').tap(function(event) { alert("tap!"); });
-    //OR
-    //lng.dom('#event_tap').on('tap', function(event) { alert("TAP!"); });
-    lng.dom('#event_doubletap').doubleTap(function(event) { alert("doubleTap!"); });
-    lng.dom('#event_longtap').longTap(function(event) { alert("longTap!"); });
-
-    //Swipe Methods
-    lng.dom('#swipe').swipe(function(event) { alert("swipe!"); });
-    lng.dom('#swipe_left').swipeLeft(function(event) { alert("swipeLeft!"); });
-    lng.dom('#swipe_right').swipeRight(function(event) { alert("swipeRight!"); });
-    lng.dom('#swipe_up').swipeUp(function(event) { alert("swipeUp!"); });
-    lng.dom('#swipe_down').swipeDown(function(event) { alert("swipeDown!"); });
-
-    lng.dom('a[href="#scrolls"]').on('tap', function(event) {
-        App.View.mockScrolls();
-    });
-
-    lng.dom('section#navigation-index article a').tap(function(event) {
-        var type_of_transition = lng.dom(this).attr('class') || 'normal';
-
-        lng.dom('section#navigation-index').removeClass('pop').removeClass('flow').addClass(type_of_transition);
-
-        setTimeout(function() {
-            lng.Router.section('navigation-' + type_of_transition);
-        }, 100);
-    });
-
-    //List.Append & List.prepend
-    lng.dom('section#lists header .right a').tap(function(event) {
-        var param = {
-            el: '#list-dinamic',
-            template: 'profile-tmp',
-            data: {
-                name: 'Dinamic item list',
-                description: '@soyjavi'
-            }
-        };
-
-        if ($$(this).hasClass('prepend')) {
-            lng.View.Template.List.append(param);
-        } else {
-            lng.View.Template.List.prepend(param);
-        }
-    });
-
-
-    //SPECIAL
-    $$('section#navigation').on('load', function(event) {
-        console.error('Load #navigation', event);
-    });
-
-    $$('section#navigation').on('unload', function(event) {
-        console.error('Unload', event);
-    });
-
-    $$('article#authors').on('load', function(event) {
-        console.error('loaded article');
-    });
-
-})(Lungo);

examples/kitchen-sink/app/events.touch.js

@@ -0,0 +1,27 @@
+
+Lungo.Events.init({
+    'tap section#touchevents [data-event=tap]': App.eventConsole,
+    'doubleTap section#touchevents [data-event=doubleTap]': App.eventConsole,
+    'hold section#touchevents [data-event=hold]': App.eventConsole,
+
+    'swipe section#touchevents [data-event=swipe]': App.eventConsole,
+    'swipeLeft section#touchevents [data-event=swipeLeft]': App.eventConsole,
+    'swipeUp section#touchevents [data-event=swipeUp]': App.eventConsole,
+    'swipeRight section#touchevents [data-event=swipeRight]': App.eventConsole,
+    'swipeDown section#touchevents [data-event=swipeDown]': App.eventConsole,
+    'swiping section#touchevents [data-event=swiping]': App.eventConsole,
+
+    'rotate section#touchevents [data-event=rotate]': App.eventConsole,
+    'rotateLeft section#touchevents [data-event=rotateLeft]': App.eventConsole,
+    'rotateRight section#touchevents [data-event=rotateRight]': App.eventConsole,
+    'rotating section#touchevents [data-event=rotating]': App.eventConsole,
+
+    'pinch section#touchevents [data-event=pinch]': App.eventConsole,
+    'pinchIn section#touchevents [data-event=pinchIn]': App.eventConsole,
+    'pinchOut section#touchevents [data-event=pinchOut]': App.eventConsole,
+    'pinching section#touchevents [data-event=pinching]': App.eventConsole,
+
+    'drag section#touchevents [data-event=drag]': App.eventConsole
+
+});
+

examples/kitchen-sink/app/resources/asides/features.html

@@ -0,0 +1,111 @@
+<aside id="features" class="left">
+    <header data-title="BETA Features"></header>
+    <article class="list scroll">
+        <ul>
+            <!-- Basic Layout -->
+            <li class="current">
+                <a href="#main-article" data-target="article">
+                    <strong>Meet the frameworks</strong>
+                    <small>A brief summary of features.</small>
+                </a>
+            </li>
+
+            <!-- Layout & Navigation -->
+            <li>
+                <a href="#layout" data-target="section">
+                    <div class="bubble right">5</div>
+                    <strong>Layout</strong>
+                    <small>How to distribute the content in your app.</small>
+                </a>
+            </li>
+
+            <!-- List -->
+            <li>
+                <a href="#list" data-target="section" data-count="17">
+                    <strong>Lists</strong>
+                    <small>Different formats for creating lists.</small>
+                </a>
+            </li>
+
+            <!-- Forms -->
+            <li>
+                <a href="#form" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Form Elements</strong>
+                    <small>Controls available in BETA version</small>
+                </a>
+            </li>
+
+            <!-- Asides -->
+            <li>
+                <a href="#aside" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Asides</strong>
+                    <small>The fashion element in all cool Apps</small>
+                </a>
+            </li>
+
+            <!-- Data-Attributes -->
+            <li>
+                <a href="#data" data-target="section">
+                    <div class="bubble right">9</div>
+                    <strong>Data-attributes</strong>
+                    <small>Semantic links to create complex elements</small>
+                </a>
+            </li>
+
+            <!-- Icons -->
+            <li>
+                <a href="#icon" data-target="section">
+                    <div class="bubble right">109</div>
+                    <strong>Icons</strong>
+                    <small>A huge repository vectorized icons</small>
+                </a>
+            </li>
+
+            <!-- Scrolls -->
+            <li>
+                <a href="#scroll" data-target="section">
+                    <div class="bubble right">2</div>
+                    <strong>Scrolls</strong>
+                    <small>Everything is scrollable</small>
+                </a>
+            </li>
+
+            <!-- Touch Events -->
+            <li>
+                <a href="#touchevents" data-target="section">
+                    <div class="bubble right">19</div>
+                    <strong>Touch Events</strong>
+                    <small>Touch, Tap, Double-Tap, Swipe...</small>
+                </a>
+            </li>
+
+            <!-- Notifications -->
+            <li>
+                <a href="#notification" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Notifications</strong>
+                    <small>Cross-device notification system</small>
+                </a>
+            </li>
+
+            <!-- Colours -->
+            <li>
+                <a href="#color" data-target="section" data-title="Colours">
+                    <div class="bubble right">14</div>
+                    <strong>Colors</strong>
+                    <small>Everything is more beautiful if you put a color.</small>
+                </a>
+            </li>
+
+            <!-- Grid System -->
+            <li>
+                <a href="#grid" data-target="section">
+                    <strong>Grid System</strong>
+                    <small>System percentage dimension</small>
+                </a>
+            </li>
+        </ul>
+    </article>
+</aside>

examples/kitchen-sink/app/resources/sections/aside.html

@@ -0,0 +1,13 @@
+<section id="aside" data-target="slide">
+    <header data-title="Asides">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+    <article id="aside-example" class="indented">
+        <div>
+            <a href="#left" data-target="aside" data-icon="left" class="button big blue">Example of normal aside</a>
+            <a href="#right" data-target="aside" data-icon="right" class="button big red">Example of mini right aside</a>
+        </div>
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/color.html

@@ -0,0 +1,24 @@
+<section id="color" data-transition="slide">
+    <header data-title="Colors">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+    <article class="scroll indented">
+        <div>
+            <a href="#" class="button big">default</a>
+            <a href="#" class="button big disabled">disabled</a>
+            <a href="#" class="button big red">red</a>
+            <a href="#" class="button big lightgreen">lightgreen</a>
+            <a href="#" class="button big green">green</a>
+            <a href="#" class="button big blue">blue</a>
+            <a href="#" class="button big arcticblue">articblue</a>
+            <a href="#" class="button big orange">orange</a>
+            <a href="#" class="button big magenta">magenta</a>
+            <a href="#" class="button big pink">pink</a>
+            <a href="#" class="button big yellow">yellow</a>
+            <a href="#" class="button big twitter">twitter</a>
+            <a href="#" class="button big facebook">facebook</a>
+        </div>
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/data-attribute.html

@@ -0,0 +1,59 @@
+<section id="data" data-transition="slide">
+    <header data-title="Data Attributes">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <article id="data-attributes" class="current list scroll indented">
+        <ul>
+            <li data-icon="user">
+                <strong>data-icon</strong>
+                <small>Creates an icon Lungo vectorized</small>
+            </li>
+
+            <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
+                <strong>data-image</strong>
+                <small>Instance a &lt;img&gt; automatically</small>
+            </li>
+
+            <li>
+                <strong>data-search</strong>
+                <small>Creates a search input form</small>
+            </li>
+            <li class="highlight" data-search="Type your search..."></li>
+
+            <li>
+                <strong>data-progress</strong>
+                <small>Creates a progress element</small>
+            </li>
+            <li data-progress="25%"></li>
+
+
+            <li>
+                <strong>data-loading</strong>
+                <small>Creates a loading element</small>
+            </li>
+            <li data-loading="black"></li>
+
+            <li class="anchor">Others</li>
+            <li>
+                <strong>data-title</strong>
+                <small>Relationship field between &lt;header&gt; and &lt;a&gt;</small>
+            </li>
+            <li>
+                <strong>data-label</strong>
+                <small>Creates label in a determinate nav element</small>
+            </li>
+            <li>
+                <div class="right" data-count="23 units"></div>
+                <strong>data-count</strong>
+                <small>Creates counters in different &lt;elements&gt;</small>
+            </li>
+            <li>
+                <strong>data-back</strong>
+                <small>Creates a button that returns to the previous section.</small>
+            </li>
+        </ul>
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/form.html

@@ -0,0 +1,48 @@
+<section id="form" data-transition="slide">
+    <header data-title="Form Elements">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <article class="list scroll">
+        <ul>
+            <li class="contrast">
+                    <input type="search" placeholder="type your search" />
+                    <a href="#" class="button theme" data-icon="search"></a>
+                </li>
+            <li>
+                <label>Example of text</label>
+                <input type="text" placeholder="type your name" />
+            </li>
+            <li>
+                <label>Example of textarea</label>
+                <textarea placeholder="type your name"></textarea>
+            </li>
+            <li>
+                <label>Example of select</label>
+                <label class="select">
+                    <select class="custom">
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </label>
+            </li>
+            <li  class="padding">
+                <label>Do you like Lungo forms?</label>
+                <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
+            </li>
+            <li class="padding">
+                <label>Example of progress</label>
+                <div id="progress-normal" data-progress="25%"></div>
+            </li>
+            <li>
+                <label>Example of range</label>
+                <input type="range" placeholder="type your name" />
+
+            </li>
+        </ul>
+
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/grid.html

@@ -0,0 +1,28 @@
+<section id="grid" data-transition="slide">
+    <header data-title="Grid System">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <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/kitchen-sink/app/resources/sections/icon.html

@@ -0,0 +1,632 @@
+<section id="icon" data-transition="slide">
+    <header class="extended" data-title="Icons Repository">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <nav class="groupbar">
+        <a href="#icons-default" data-target="article" data-label="Normal" data-count="72" class="current"></a>
+        <a href="#icons-brands" data-target="article" data-label="Brands" data-count="37" ></a>
+    </nav>
+
+    <article id="icons-default" class="list scroll indented">
+        <ul>
+            <li data-icon="home">
+                <a href="#">
+                    <strong>Home</strong>
+                    <small>class .home</small>
+                </a>
+            </li>
+            <li data-icon="picture">
+                <a href="#">
+                <strong>picture</strong>
+                <small>class .picture</small>
+                </a>
+            </li>
+            <li data-icon="camera">
+                <a href="#">
+                <strong>camera</strong>
+                <small>class .camera</small>
+                </a>
+            </li>
+            <li data-icon="music">
+                <a href="#">
+                <strong>music</strong>
+                <small>class .music</small>
+                </a>
+            </li>
+            <li data-icon="broadcast">
+                <a href="#">
+                <strong>broadcast</strong>
+                <small>class .broadcast</small>
+                </a>
+            </li>
+            <li data-icon="microphone">
+                <a href="#">
+                <strong>microphone</strong>
+                <small>class .microphone</small>
+                </a>
+            </li>
+            <li data-icon="book">
+                <a href="#">
+                <strong>book</strong>
+                <small>class .book</small>
+                </a>
+            </li>
+            <li data-icon="folder">
+                <a href="#">
+                <strong>folder</strong>
+                <small>class .folder</small>
+                </a>
+            </li>
+            <li data-icon="tag">
+                <a href="#">
+                <strong>tag</strong>
+                <small>class .tag</small>
+                </a>
+            </li>
+            <li data-icon="ticket">
+                <a href="#">
+                <strong>ticket</strong>
+                <small>class .ticket</small>
+                </a>
+            </li>
+            <li data-icon="cart">
+                <a href="#">
+                <strong>cart</strong>
+                <small>class .cart</small>
+                </a>
+            </li>
+            <li data-icon="phone">
+                <a href="#">
+                <strong>phone</strong>
+                <small>class .p>one</small>
+                </a>
+            </li>
+            <li data-icon="address">
+                <a href="#">
+                <strong>address</strong>
+                <small>class .address</small>
+                </a>
+            </li>
+            <li data-icon="mail">
+                <a href="#">
+                <strong>mail</strong>
+                <small>class .mail</small>
+                </a>
+            </li>
+            <li data-icon="mail-open">
+                <a href="#">
+                <strong>mail-open</strong>
+                <small>class .mail-open</small>
+                </a>
+            </li>
+            <li data-icon="pushpin">
+                <a href="#">
+                <strong>pushpin</strong>
+                <small>class .pushpin</small>
+                </a>
+            </li>
+            <li data-icon="compass">
+                <a href="#">
+                <strong>compass</strong>
+                <small>class .compass</small>
+                </a>
+            </li>
+            <li data-icon="clock">
+                <a href="#">
+                <strong>clock</strong>
+                <small>class .clock</small>
+                </a>
+            </li>
+            <li data-icon="calendar">
+                <a href="#">
+                <strong>calendar</strong>
+                <small>class .calendar</small>
+                </a>
+            </li>
+            <li data-icon="mobile">
+                <a href="#">
+                <strong>mobile</strong>
+                <small>class .mobile</small>
+                </a>
+            </li>
+            <li data-icon="inbox">
+                <a href="#">
+                <strong>inbox</strong>
+                <small>class .inbox</small>
+                </a>
+            </li>
+            <li data-icon="inbox-full">
+                <a href="#">
+                <strong>inbox-full</strong>
+                <small>class .inbox-full</small>
+                </a>
+            </li>
+            <li data-icon="user">
+                <a href="#">
+                <strong>user</strong>
+                <small>class .user</small>
+                </a>
+            </li>
+            <li data-icon="users">
+                <a href="#">
+                <strong>users</strong>
+                <small>class .users</small>
+                </a>
+            </li>
+            <li data-icon="vcard">
+                <a href="#">
+                <strong>vcard</strong>
+                <small>class .vcard</small>
+                </a>
+            </li>
+            <li data-icon="chat">
+                <a href="#">
+                <strong>chat</strong>
+                <small>class .chat</small>
+                </a>
+            </li>
+            <li data-icon="message">
+                <a href="#">
+                <strong>message</strong>
+                <small>class .message</small>
+                </a>
+            </li>
+            <li data-icon="search">
+                <a href="#">
+                <strong>search</strong>
+                <small>class .search</small>
+                </a>
+            </li>
+            <li data-icon="pie">
+                <a href="#">
+                <strong>pie</strong>
+                <small>class .pie</small>
+                </a>
+            </li>
+            <li data-icon="bars">
+                <a href="#">
+                <strong>bars</strong>
+                <small>class .bars</small>
+                </a>
+            </li>
+            <li data-icon="remove">
+                <a href="#">
+                <strong>remove</strong>
+                <small>class .remove</small>
+                </a>
+            </li>
+            <li data-icon="grid">
+                <a href="#">
+                <strong>grid</strong>
+                <small>class .grid</small>
+                </a>
+            </li>
+            <li data-icon="menu">
+                <a href="#">
+                <strong>menu</strong>
+                <small>class .menu</small>
+                </a>
+            </li>
+            <li data-icon="cloud">
+                <a href="#">
+                <strong>cloud</strong>
+                <small>class .cloud</small>
+                </a>
+            </li>
+            <li data-icon="upload">
+                <a href="#">
+                <strong>upload</strong>
+                <small>class .upload</small>
+                </a>
+            </li>
+            <li data-icon="star">
+                <a href="#">
+                <strong>star</strong>
+                <small>class .star</small>
+                </a>
+            </li>
+            <li data-icon="star-full">
+                <a href="#">
+                <strong>star-full</strong>
+                <small>class .star-full</small>
+                </a>
+            </li>
+            <li data-icon="heart">
+                <a href="#">
+                <strong>heart</strong>
+                <small>class .heart</small>
+                </a>
+            </li>
+            <li data-icon="heart-full">
+                <a href="#">
+                <strong>heart-full</strong>
+                <small>class .heart-full</small>
+                </a>
+            </li>
+            <li data-icon="thumbs-up">
+                <a href="#">
+                <strong>thumbs-up</strong>
+                <small>class .thumbs-up</small>
+                </a>
+            </li>
+            <li data-icon="thumbs-down">
+                <a href="#">
+                <strong>thumbs-down</strong>
+                <small>class .thumbs-down</small>
+                </a>
+            </li>
+            <li data-icon="help">
+                <a href="#">
+                <strong>help</strong>
+                <small>class .help</small>
+                </a>
+            </li>
+            <li data-icon="warning">
+                <a href="#">
+                <strong>warning</strong>
+                <small>class .warning</small>
+                </a>
+            </li>
+            <li data-icon="info">
+                <a href="#">
+                <strong>info</strong>
+                <small>class .info</small>
+                </a>
+            </li>
+            <li data-icon="cancel">
+                <a href="#">
+                <strong>cancel</strong>
+                <small>class .cancel</small>
+                </a>
+            </li>
+            <li data-icon="check">
+                <a href="#">
+                <strong>check</strong>
+                <small>class .check</small>
+                </a>
+            </li>
+            <li data-icon="multiply">
+                <a href="#">
+                <strong>multiply</strong>
+                <small>class .multiply</small>
+                </a>
+            </li>
+            <li data-icon="plus">
+                <a href="#">
+                <strong>plus</strong>
+                <small>class .plus</small>
+                </a>
+            </li>
+            <li data-icon="minus">
+                <a href="#">
+                <strong>minus</strong>
+                <small>class .minus</small>
+                </a>
+            </li>
+            <li data-icon="left">
+                <a href="#">
+                <strong>left</strong>
+                <small>class .left</small>
+                </a>
+            </li>
+            <li data-icon="down">
+                <a href="#">
+                <strong>down</strong>
+                <small>class .down</small>
+                </a>
+            </li>
+            <li data-icon="right">
+                <a href="#">
+                <strong>right</strong>
+                <small>class .right</small>
+                </a>
+            </li>
+            <li data-icon="up">
+                <a href="#">
+                <strong>up</strong>
+                <small>class .up</small>
+                </a>
+            </li>
+            <li data-icon="refresh">
+                <a href="#">
+                <strong>refresh</strong>
+                <small>class .refresh</small>
+                </a>
+            </li>
+            <li data-icon="share">
+                <a href="#">
+                <strong>share</strong>
+                <small>class .share</small>
+                </a>
+            </li>
+            <li data-icon="settings">
+                <a href="#">
+                <strong>settings</strong>
+                <small>class .settings</small>
+                </a>
+            </li>
+            <li data-icon="accessibility">
+                <a href="#">
+                <strong>accessibility</strong>
+                <small>class .accessibility</small>
+                </a>
+            </li>
+            <li data-icon="pencil">
+                <a href="#">
+                <strong>pencil</strong>
+                <small>class .pencil</small>
+                </a>
+            </li>
+            <li data-icon="file">
+                <a href="#">
+                <strong>file</strong>
+                <small>class .file</small>
+                </a>
+            </li>
+            <li data-icon="lock">
+                <a href="#">
+                <strong>lock</strong>
+                <small>class .lock</small>
+                </a>
+            </li>
+            <li data-icon="map">
+                <a href="#">
+                <strong>map</strong>
+                <small>class .map</small>
+                </a>
+            </li>
+            <li data-icon="eye">
+                <a href="#">
+                <strong>eye</strong>
+                <small>class .eye</small>
+                </a>
+            </li>
+        </ul>
+    </article>
+
+    <article id="icons-brands" class="list scroll indented">
+        <ul>
+            <li data-icon="brand google-plus">
+                <a href="#">
+                <strong>google-plus</strong>
+                <small>class .brand.google-plus</small>
+                </a>
+            </li>
+            <li data-icon="brand facebook">
+                <a href="#">
+                <strong>facebook</strong>
+                <small>class .brand.facebook</small>
+                </a>
+            </li>
+            <li data-icon="brand twitter">
+                <a href="#">
+                <strong>twitter</strong>
+                <small>class .brand.twitter</small>
+                </a>
+            </li>
+             <li data-icon="brand feed">
+                <a href="#">
+                <strong>feed</strong>
+                <small>class .brand.feed</small>
+                </a>
+            </li>
+            <li data-icon="brand vimeo">
+                <a href="#">
+                <strong>vimeo</strong>
+                <small>class .brand.vimeo</small>
+                </a>
+            </li>
+            <li data-icon="brand flickr">
+                <a href="#">
+                <strong>flickr</strong>
+                <small>class .brand.flickr</small>
+                </a>
+            </li>
+            <li data-icon="brand dribbble">
+                <a href="#">
+                <strong>dribbble</strong>
+                <small>class .brand.dribbble</small>
+                </a>
+            </li>
+            <li data-icon="brand forrst">
+                <a href="#">
+                <strong>forrst</strong>
+                <small>class .brand.forrst</small>
+                </a>
+            </li>
+            <li data-icon="brand deviantart">
+                <a href="#">
+                <strong>deviantart</strong>
+                <small>class .brand.deviantart</small>
+                </a>
+            </li>
+            <li data-icon="brand github">
+                <a href="#">
+                <strong>github</strong>
+                <small>class .brand.github</small>
+                </a>
+            </li>
+
+            <li data-icon="brand git">
+                <a href="#">
+                <strong>git</strong>
+                <small>class .brand.git</small>
+                </a>
+            </li>
+
+            <li data-icon="brand branch">
+                <a href="#">
+                <strong>branch</strong>
+                <small>class .brand.branch</small>
+                </a>
+            </li>
+
+            <li data-icon="brand fork">
+                <a href="#">
+                <strong>fork</strong>
+                <small>class .brand.fork</small>
+                </a>
+            </li>
+
+            <li data-icon="brand apple">
+                <a href="#">
+                <strong>apple</strong>
+                <small>class .brand.apple</small>
+                </a>
+            </li>
+            <li data-icon="brand android">
+                <a href="#">
+                <strong>android</strong>
+                <small>class .brand.android</small>
+                </a>
+            </li>
+            <li data-icon="brand windows">
+                <a href="#">
+                <strong>windows</strong>
+                <small>class .brand.windows</small>
+                </a>
+            </li>
+            <li data-icon="brand skype">
+                <a href="#">
+                <strong>skype</strong>
+                <small>class .brand.skype</small>
+                </a>
+            </li>
+            <li data-icon="brand linkedin">
+                <a href="#">
+                <strong>linkedin</strong>
+                <small>class .brand.linkedin</small>
+                </a>
+            </li>
+            <li data-icon="brand html5">
+                <a href="#">
+                <strong>html5</strong>
+                <small>class .brand.html5</small>
+                </a>
+            </li>
+
+            <li data-icon="brand css3">
+                <a href="#">
+                <strong>css3</strong>
+                <small>class .brand.css3</small>
+                </a>
+            </li>
+            <li data-icon="brand chrome">
+                <a href="#">
+                <strong>chrome</strong>
+                <small>class .brand.chrome</small>
+                </a>
+            </li>
+            <li data-icon="brand firefox">
+                <a href="#">
+                <strong>firefox</strong>
+                <small>class .brand.firefox</small>
+                </a>
+            </li>
+            <li data-icon="brand IE">
+                <a href="#">
+                <strong>IE</strong>
+                <small>class .brand.IE</small>
+                </a>
+            </li>
+            <li data-icon="brand opera">
+                <a href="#">
+                <strong>opera</strong>
+                <small>class .brand.opera</small>
+                </a>
+            </li>
+
+            <li data-icon="brand wordpress">
+                <a href="#">
+                <strong>wordpress</strong>
+                <small>class .brand.wordpress</small>
+                </a>
+            </li>
+        </ul>
+        <ul>
+            <li class="anchor">Variations</li>
+            <li data-icon="brand google-plus-2">
+                <a href="#">
+                <strong>google-plus-2</strong>
+                <small>class .brand.google-plus-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand twitter-2">
+                <a href="#">
+                <strong>twitter-2</strong>
+                <small>class .brand.twitter-2</small>
+                </a>
+            </li>
+            <li data-icon="brand facebook-2">
+                <a href="#">
+                <strong>facebook-2</strong>
+                <small>class .brand.facebook-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand feed-2">
+                <a href="#">
+                <strong>feed-2</strong>
+                <small>class .brand.feed-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand vimeo-2">
+                <a href="#">
+                <strong>vimeo-2</strong>
+                <small>class .brand.vimeo-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand flickr-2">
+                <a href="#">
+                <strong>flickr-2</strong>
+                <small>class .brand.flickr-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand dribbble-2">
+                <a href="#">
+                <strong>dribbble-2</strong>
+                <small>class .brand.dribbble-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand deviantart-2">
+                <a href="#">
+                <strong>deviantart-2</strong>
+                <small>class .brand.deviantart-2</small>
+                </a>
+            </li>
+            <li data-icon="brand git-2">
+                <a href="#">
+                <strong>git-2</strong>
+                <small>class .brand.git-2</small>
+                </a>
+            </li>
+            <li data-icon="brand github-2">
+                <a href="#">
+                <strong>github-2</strong>
+                <small>class .brand.github-2</small>
+                </a>
+            </li>
+            <li data-icon="brand wordpress-2">
+                <a href="#">
+                <strong>wordpress-2</strong>
+                <small>class .brand.wordpress-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand html5-2">
+                <a href="#">
+                <strong>html5-2</strong>
+                <small>class .brand.html5-2</small>
+                </a>
+            </li>
+        </ul>
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/layout.html

@@ -0,0 +1,31 @@
+<section id="layout" data-transition="slide">
+    <header data-title="Layout" class="extended">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+        <nav class="right button">
+            <a href="#splash" data-target="section" data-icon="user" data-label="Splash"></a>
+        </nav>
+    </header>
+
+    <nav class="groupbar">
+        <a href="#layout-art1" data-target="article" class="current" data-label="Profile"></a>
+        <a href="#layout-art2" data-target="article" data-label="Inbox" data-count="3"></a>
+        <a href="#layout-art3" data-target="article" data-label="Map"></a>
+        <a href="#layout-art4" data-target="article" data-label="Settings"></a>
+    </nav>
+
+    <footer>
+        <nav>
+            <a href="#layout-art1" data-target="article" class="current" data-icon="home"></a>
+            <a href="#layout-art2" data-target="article" data-icon="inbox" data-count="3"></a>
+            <a href="#layout-art3" data-target="article" data-icon="compass"></a>
+            <a href="#layout-art4" data-target="article" data-icon="settings"></a>
+        </nav>
+    </footer>
+
+    <article id="layout-art1"></article>
+    <article id="layout-art2"></article>
+    <article id="layout-art3"></article>
+    <article id="layout-art4"></article>
+</section>

examples/kitchen-sink/app/resources/sections/list.html

@@ -0,0 +1,216 @@
+<section id="list" data-transition="slide">
+    <header data-title="Lists" class="extended">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <nav class="groupbar">
+        <a href="#list-normal" data-target="article" class="current" data-icon="checkmark" data-label="Normal"></a>
+        <a href="#list-indented" data-target="article" data-icon="close" data-label="Indented"></a>
+    </nav>
+
+    <article id="list-normal" class="list scroll">
+        <ul>
+            <li class="anchor">With right elements</li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="selectable">
+                <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li>
+                <a href="#">
+                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
+                </a>
+            </li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">.arrow class</li>
+
+            <li class="arrow">
+                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+                <small>&lt;small&gt;</small>
+            </li>
+
+
+            <li class="anchor">.right element</li>
+
+            <li>
+                <a href="#">
+                    <div class="right">.right</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue">.right.bubble</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li class="anchor">With data-icon or data-image attribute</li>
+            <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
+                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon@2x.png">
+                <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li data-icon="user">
+                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="thumb" data-icon="user">
+                <strong>&lt;li .thumb data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">With colours</li>
+            <li class="blue">
+                <strong>&lt;li .blue&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="green">
+                <strong>&lt;li .green&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="yellow">
+                <strong>&lt;li .yellow&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+        </ul>
+
+    </article>
+
+    <article id="list-indented" class="list scroll indented">
+        <ul>
+            <li class="anchor">With right elements</li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="selectable">
+                <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li>
+                <a href="#">
+                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
+                </a>
+            </li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">.arrow class</li>
+
+            <li class="arrow">
+                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+                <small>&lt;small&gt;</small>
+            </li>
+
+
+            <li class="anchor">.right element</li>
+
+            <li>
+                <a href="#">
+                    <div class="right">.right</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue">.right.bubble</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li class="anchor">With data-icon or data-image attribute</li>
+            <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
+                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon@2x.png">
+                <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li data-icon="user">
+                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="thumb" data-icon="user">
+                <strong>&lt;li .thumb data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">With colours</li>
+            <li class="blue">
+                <strong>&lt;li .blue&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="green">
+                <strong>&lt;li .green&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="yellow">
+                <strong>&lt;li .yellow&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+        </ul>
+
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/notification.html

@@ -0,0 +1,23 @@
+<section id="notification" data-transition="slide">
+    <header data-title="Notifications">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <article class="list scroll indented">
+        <div>
+            <a href="#" class="button big" data-label="Normal" data-action="normal"></a>
+            <a href="#" class="button big" data-label="Normal + Animation" data-action="animate"></a>
+            <a href="#" class="button big" data-label="Loading" data-label="Loading" data-action="loading"></a>
+            <a href="#" class="button big" data-label="Confirm" data-action="confirm"></a>
+            <a href="#" class="button big" data-label="Html" data-action="html"></a>
+
+            <a href="#" class="button big green" data-label="Success" data-action="success"></a>
+            <a href="#" class="button big red" data-label="Error" data-action="error"></a>
+            <a href="#" class="button big yellow" data-label="Alert" data-action="alert"></a>
+
+            <a href="#" class="button big blue" data-label="Chaining" data-action="chaining"></a>
+        </div>
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/scroll.html

@@ -0,0 +1,38 @@
+<section id="scroll" data-transition="slide">
+    <header data-title="Scrolls">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <article>
+        <h1 class="one row ">.scroll stylesheet class</h1>
+        <ul class=" four row scroll anchor">
+            <img src="http://lorempixel.com/256/128/food/">
+            <img src="http://lorempixel.com/256/128/sports/">
+            <img src="http://lorempixel.com/256/128/people/">
+            <img src="http://lorempixel.com/256/128/technics/">
+            <img src="http://lorempixel.com/256/128/animals/">
+            <img src="http://lorempixel.com/256/128/nightlife/">
+            <img src="http://lorempixel.com/256/128/nature/">
+            <img src="http://lorempixel.com/256/128/transport/">
+            <img src="http://lorempixel.com/256/128/city/">
+            <img src="http://lorempixel.com/256/128/fashion/">
+            <img src="http://lorempixel.com/256/128/abstract/">
+        </ul>
+        <h1 class="one row">.horizontal.scroll stylesheet classes</h1>
+        <ul class=" four row horizontal scroll">
+            <img src="http://lorempixel.com/256/128/food/">
+            <img src="http://lorempixel.com/256/128/sports/">
+            <img src="http://lorempixel.com/256/128/people/">
+            <img src="http://lorempixel.com/256/128/technics/">
+            <img src="http://lorempixel.com/256/128/animals/">
+            <img src="http://lorempixel.com/256/128/nightlife/">
+            <img src="http://lorempixel.com/256/128/nature/">
+            <img src="http://lorempixel.com/256/128/transport/">
+            <img src="http://lorempixel.com/256/128/city/">
+            <img src="http://lorempixel.com/256/128/fashion/">
+            <img src="http://lorempixel.com/256/128/abstract/">
+        </ul>
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/splash.html

@@ -0,0 +1,11 @@
+<section id="splash" data-transition="slide">
+    <article class="indented splash">
+        <img src="images/logo.png"/>
+        <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-target="section" class="button big" data-icon="left">Return to Kichensink</a>
+        </form>
+    </article>
+</section>

examples/kitchen-sink/app/resources/sections/touchevents.html

@@ -0,0 +1,49 @@
+<section id="touchevents" data-transition="slide">
+    <header data-title="Touch Events">
+        <nav class="button">
+            <a href="#back" data-target="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <article>
+        <div class="two rows" id="touchevents-console">Test them...</div>
+        <div class="eight rows list scroll">
+        <ul>
+            <li class="anchor">Test events in your Mobile Device</li>
+            <li data-event="touch"><strong>Touch me!</strong></li>
+            <li data-event="tap" id="prueba"><strong>Tap me!</strong></li>
+            <li data-event="doubleTap"><strong>doubleTap me!</strong></li>
+            <li data-event="hold"><strong>hold me!</strong></li>
+            <li data-event="Drag">
+                <strong>Drag me!</strong>
+                <small>Swipe with 2 (or more) fingers</small></li>
+
+            <li data-event="swipe">
+                <strong>Swipe me!</strong>
+                <small>Drag in any direction</small></li>
+            <li data-event="swipeLeft"><strong>swipeLeft me!</strong></li>
+            <li data-event="swipeUp"><strong>swipeUp me!</strong></li>
+            <li data-event="swipeRight"><strong>swipeRight me!</strong></li>
+            <li data-event="swipeDown"><strong>swipeDown me!</strong></li>
+            <li data-event="swiping"><strong>swiping me!</strong></li>
+
+            <li data-event="rotate">
+                <strong>rotate me!</strong>
+                <small>Drag in any direction</small></li>
+            <li data-event="rotateLeft"><strong>rotateLeft me!</strong></li>
+            <li data-event="rotateRight"><strong>rotateRight me!</strong></li>
+            <li data-event="rotating"><strong>rotating me!</strong></li>
+
+            <li data-event="pinch">
+                <strong>pinch me!</strong>
+                <small>Drag in any direction</small></li>
+            <li data-event="pinchIn"><strong>pinchIn me!</strong></li>
+            <li data-event="pinchOut"><strong>pinchOut me!</strong></li>
+            <li data-event="pinching"><strong>pinching me!</strong></li>
+
+
+
+        </ul></div>
+    </article>
+
+</section>

examples/kitchen-sink/app/sections/aside-profiles.html

@@ -1,15 +0,0 @@
-<aside id="profiles" class="scrollable right">
-    <div>
-        <div class="anchor">Author of LungoJS</div>
-        <a href="http://twitter.com/soyjavi" target="_blank" data-image="assets/images/avatars/soyjavi.jpg">Javi Jim&eacute;nez Villar</a>
-        <div class="anchor">CoreTeam</div>
-        <a href="http://twitter.com/pasku1" target="_blank" data-image="assets/images/avatars/pasku.jpg">Guillermo Pascual</a>
-        <div class="anchor">Contributors</div>
-        <a href="http://twitter.com/ikalbeniz" target="_blank" data-image="assets/images/avatars/ikalbeniz.jpg">Iker Perez de Albeniz</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/b374f3bd05b1db4a974585ba57661815?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Jorge Casar</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/3d4bf44cff9779242dd82d20a0b7d0c8?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Dave Winders</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/884b5d1e91b826afc8c6b4fc3429dbd0?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">GermanDZ</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/b41d652ca9b88e636516d907599dcc87?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Juan Gallego Galisteo</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/a3257b495a2bc4ae15405c7880300848?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">John McLear</a>
-    </div>
-</aside>

examples/kitchen-sink/app/sections/aside.html

@@ -1,15 +0,0 @@
-<aside id="kitchen-sink-scroll" class="scrollable">
-    <div>
-        <div class="title">Select a option</div>
-        <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
-        <a href="#navigation" data-target="section" data-icon="map">Navigation</a>
-        <a href="#buttons" data-target="article" data-icon="plus" data-count="14">Buttons & Colours</a>
-        <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
-        <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6">Data Attributes</a>
-        <a href="#forms" data-target="section" data-icon="edit" data-count="7">Form Elements</a>
-        <a href="#lists" data-target="section" data-icon="items" data-count="5">Lists</a>
-        <a href="#events" data-target="article" data-icon="user">Events</a>
-        <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
-        <a href="#urls" data-target="article" data-icon="down">URL Scheme Reference</a>
-    </div>
-</aside>

examples/kitchen-sink/app/sections/buttons-extra.html

@@ -1,18 +0,0 @@
-<section id="buttons-extra">
-    <header data-back="home" data-title="Example of buttons">
-        <nav class="right">
-            <a href="#" class="button red " data-icon="add">With icon</a>
-            <a href="#" class="button arcticblue ">Text</a>
-        </nav>
-    </header>
-
-    <footer>
-        <nav class="left">
-            <a href="#" class="button blue ">Text</a>
-            <a href="#" class="button yellow " data-icon="left"></a>
-        </nav>
-        <a href="#" class="button orange right" data-icon="right">right</a>
-    </footer>
-
-    <article></article>
-</section>

examples/kitchen-sink/app/sections/forms.html

@@ -1,115 +0,0 @@
-<section id="forms">
-    <header data-title="Forms" class="extended" data-back="home">
-        <nav class="groupbar">
-            <a href="#form-inputs" data-target="article" class="current">Inputs</a>
-            <a href="#form-others" data-target="article">Others</a>
-            <a href="#form-switchs" data-target="article">Switchs</a>
-            <a href="#form-specials" data-target="article">Specials</a>
-            <a href="#form-tips" data-target="article">Tips</a>
-        </nav>
-    </header>
-
-    <article id="form-inputs" class="list scrollable">
-        <div class="container indented">
-            <ul class="form">
-                <li class="anchor" data-icon="edit">Example of inputs</li>
-                <li>
-                    <label>type="text"</label>
-                    <input type="text" placeholder="Input text"/>
-                    <label>type="password"</label>
-                    <input type="password" placeholder="Input password"/>
-                </li>
-            </ul>
-
-            <ul class="form">
-                <li class="anchor" data-icon="edit">Example of textarea</li>
-                <li><textarea placeholder="Textarea sample"></textarea></li>
-            </ul>
-
-            <ul class="form">
-                <li class="anchor" data-icon="edit">Example of select</li>
-                <li>
-                    <label class="select">
-                        <select class="custom">
-                            <option value="1">One</option>
-                            <option value="2">Two</option>
-                            <option value="3">Three</option>
-                        </select>
-                    </label>
-                </li>
-                <li class="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</li>
-            </ul>
-        </div>
-    </article>
-
-    <article id="form-others" class="list">
-        <div class="indented">
-            <ul class="form">
-                <li class="anchor" data-icon="edit">Example of search</li>
-                <li data-search="Type a search..."></li>
-                <li class="tip darker" data-icon="question small">It's a special form element you must set the attribute data-search="Placeholder text"</li>
-                <li class="anchor" data-icon="edit">Example of type="*"</li>
-                <li>
-                    <input type="datetime" placeholder="Some datetime..." />
-                    <input type="date" placeholder="Some date..." />
-                    <input type="time" placeholder="Some time..." />
-                    <input type="month" placeholder="Some month..." />
-                </li>
-                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
-            </ul>
-        </div>
-    </article>
-
-    <article id="form-specials" class="list">
-        <div class="indented">
-            <ul class="form">
-                <li class="anchor" data-icon="edit">Example of progress</li>
-                <li data-progress="0%"></li>
-                <li class="anchor" data-icon="edit">Example of range</li>
-                <li> <input type="range"></li>
-                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
-            </ul>
-        </div>
-    </article>
-
-    <article id="form-switchs" class="list">
-        <div class="container indented">
-            <ul class="form">
-                <li class="anchor" data-icon="edit">Example of checkbox</li>
-                <li>
-                    <label>Do you like LungoJS forms?</label>
-                    <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
-                </li>
-            </ul>
-
-            <ul class="form">
-                <li class="anchor" data-icon="edit">Example of radio</li>
-                <li>
-                    <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
-                    <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
-                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
-                </li>
-            </ul>
-        </div>
-    </article>
-
-    <article id="form-tips" class="list scrollable">
-        <div class="container indented">
-            <ul class="form">
-                <li class="anchor">Examples of tips</li>
-                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip darker" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-
-                <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                <li class="tip darker" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-            </ul>
-
-            <ul class="form">
-                <li class="anchor" data-icon="home">Example of anchor</li>
-                <li><label>Example of label</label></li>
-            </ul>
-        </div>
-    </article>
-</section>

examples/kitchen-sink/app/sections/lists.html

@@ -1,19 +0,0 @@
-<section id="lists">
-    <header data-back="home" data-title="Lists" class="extended">
-        <nav class="right">
-            <a href="#" data-article="list-dinamic" class="button" data-icon="up"></a>
-            <a href="#" data-article="list-dinamic" class="button prepend" data-icon="down"></a>
-        </nav>
-        <nav class="groupbar">
-            <a href="#list-plain" data-target="article" class="current">Normal</a>
-            <a href="#list-ordered" data-target="article">Ordered</a>
-            <a href="#list-indented" data-target="article">Indented</a>
-            <a href="#list-dinamic" data-target="article">Dinamic</a>
-        </nav>
-    </header>
-
-    <article id="list-plain" class="list"></article>
-    <article id="list-ordered" class="list"></article>
-    <article id="list-indented" class="list indented scrollable"></article>
-    <article id="list-dinamic" class="list scrollable"></article>
-</section>

examples/kitchen-sink/app/sections/local.html

@@ -1,5 +0,0 @@
-<section id="async-local">
-    <header data-back="home"  data-title="Async Local Section"></header>
-
-    <article></article>
-</section>

examples/kitchen-sink/app/sections/navigation-index.html

@@ -1,9 +0,0 @@
-<section id="navigation-index" class="">
-    <header data-back="home" data-title="Type of transitions"></header>
-    <article class="list indented">
-        <ul>
-            <li><a href="#">Normal Transition</a></li>
-            <li><a href="#" class="pop">Pop Transition</a></li>
-        </ul>
-    </article>
-</section>

examples/kitchen-sink/app/sections/navigation-normal.html

@@ -1,4 +0,0 @@
-<section id="navigation-normal">
-    <header data-back="home"></header>
-    <article></article>
-</section>

examples/kitchen-sink/app/sections/navigation-pop.html

@@ -1,4 +0,0 @@
-<section id="navigation-pop" class="pop">
-    <header data-back="home"></header>
-    <article></article>
-</section>

examples/kitchen-sink/app/sections/navigation.html

@@ -1,37 +0,0 @@
-<section id="navigation">
-    <header data-back="home" data-title="Navigation">
-        <nav class="right">
-            <a href="#navigation-index" class="button" data-target="section"><abbr>Transitions</abbr></a>
-        </nav>
-    </header>
-
-    <footer class="toolbar with-labels">
-        <nav>
-            <a href="#nav-1" data-target="article" class="current" data-icon="user" data-label="User"></a>
-            <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17" data-label="Calendar"></a>
-            <a href="#nav-3" data-target="article" data-icon="mail" data-label="Emails" data-count="124"></a>
-            <a href="#nav-4" data-target="article" data-icon="phone" data-label="Calls" data-count="12"></a>
-        </nav>
-    </footer>
-
-    <article id="nav-1" data-title="Article 1"></article>
-    <article id="nav-2" data-title="Article 2"></article>
-    <article id="nav-3" data-title="Article 3"></article>
-    <article id="nav-4" data-title="Article 4"></article>
-</section>
-
-<section id="navigation-secondary">
-    <header data-back="left" data-title="Navigation"></header>
-
-    <footer>
-        <nav class="right">
-            <a href="#nav-extra-1" data-target="article" class="current" data-icon="user"></a>
-            <a href="#nav-extra-2" data-target="article" data-icon="calendar" data-count="17"></a>
-            <a href="#nav-extra-3" data-target="article" data-icon="mail"></a>
-        </nav>
-    </footer>
-
-    <article id="nav-extra-1" data-title="Article 1"></article>
-    <article id="nav-extra-2" data-title="Article 2"></article>
-    <article id="nav-extra-3" data-title="Article 3"></article>
-</section>

examples/kitchen-sink/app/sections/remote.html

@@ -1,4 +0,0 @@
-<section id="async-remote">
-    <header data-back="home"  data-title="Async Remote Section"></header>
-    <article></article>
-</section>

examples/kitchen-sink/app/sections/settings.html

@@ -1,20 +0,0 @@
-<section id="settings">
-    <header data-back="home" data-title="Settings">
-        <nav class="right">
-            <a href="#settings_main" data-target="article" class="current" data-title="Settings" data-icon="user"></a>
-            <a href="#settings_second" data-target="article" data-title="Chat" data-icon="chat"></a>
-            <a href="#settings_third" data-target="article" data-title="Share Methods" data-icon="earth"></a>
-        </nav>
-    </header>
-
-    <article id="settings_main">s</article>
-    <article id="settings_second">s</article>
-    <article id="settings_third">s</article>
-
-    <footer class="toolbar">
-        <nav>
-            <a href="#" class="current" data-icon="substract"></a>
-            <a href="#" class="current" data-icon="add"></a>
-        </nav>
-    </footer>
-</section>

examples/kitchen-sink/app/services.js

@@ -1,78 +0,0 @@
-App.Services = (function(lng, App, undefined) {
-
-    var mockProfiles = function() {
-        var profiles = [];
-        var id = 0;
-
-        for (var j=0; j < 3; j++) {
-            for (var i=1, len=12; i <= len; i++ ) {
-                id++;
-                profiles.push({
-                    id: id,
-                    name: 'Profile nº' + i,
-                    description: 'Description nº' + i,
-                    avatar: 'assets/images/avatars/' + i + '.jpg'
-                });
-            }
-        }
-
-        //Normal List
-        var parameters = {
-            el: '#list-plain',
-            template: 'profile-tmp',
-            data: profiles
-        };
-        lng.View.Template.List.create(parameters);
-
-        //Indented List
-        parameters.el = '#list-indented';
-        lng.View.Template.List.create(parameters);
-
-        //Ordered List
-        parameters.el = '#list-ordered';
-        parameters.order = { field: 'name', type: 'asc' };
-        lng.View.Template.List.create(parameters);
-    };
-
-    var testService = function() {
-        lng.Service.Settings.timeout = 2500;
-        lng.Service.Settings.dataType = 'json';
-        lng.Service.Settings.error = function() {
-            console.error('Timeout exceed (500ms):', arguments);
-        };
-
-        var url = 'http://www.panoramio.com/map/get_panoramas.php';
-        var parameters = {
-            set: 'public',
-            from: 0,
-            to: 3,
-            minx: -180,
-            miny: -90,
-            maxx: 180,
-            maxy: 90,
-            size: 'medium',
-            mapfilter: true
-        };
-
-        lng.Service.get(url, parameters,
-            function(response) {
-                console.error('GET', response);
-            }
-        );
-
-        lng.Service.json(url, parameters,
-            function(response) {
-                console.error('JSON', response);
-            }
-        );
-
-        lng.Service.Settings.async = false;
-        var response = lng.Service.json(url, parameters);
-        console.error('SYNC', response);
-    };
-
-    return {
-        mockProfiles: mockProfiles
-    }
-
-})(Lungo, App);

examples/kitchen-sink/app/view.js

@@ -1,29 +1,25 @@
 App.View = (function(lng, App, undefined) {
 
-    lng.View.Template.create(
-        'profile-tmp',
-        '<li class="selectable {{anchor}}">\
-                <img src="{{avatar}}" />\
-                <div class="right">{{name}}</div>\
-                {{name}}\
-                <small>{{description}}</small>\
-            </a>\
-        </li>'
-    );
+    growl = function() {
+        alert(1111)
+    };
 
-    var mockScrolls = function() {
-        var markup = '';
-        for (var i=0; i < 32; i++) {
-            markup += '<li>'+i+'</li>';
-        }
+    toggleLoading = function(event) {
+        var el = lng.dom(this);
 
-        lng.View.Scroll.update('scroll_vertical', markup);
-        lng.View.Scroll.update('scroll_horizontal', markup);
+        if (el.children('.loading').length > 0) {
+            el.children('.icon').show();
+            lng.View.Element.loading(this);
+        } else {
+            el.children('.icon').hide();
+            lng.View.Element.loading(this, 'white');
+        }
     };
 
     return {
-        mockScrolls: mockScrolls
-    }
+        growl: growl,
+        toggleLoading: toggleLoading
+    };
 
 
 })(Lungo, App);

examples/kitchen-sink/assets/stylesheets/app.css

@@ -1,27 +0,0 @@
-.scroll-demo {
-    background: #ccc;
-    margin: 10px;
-    overflow: hidden;
-}
-
-.scroll-demo.horizontal {
-    height: 68px;
-    width: inherit;
-    display: block;
-}
-
-.scroll-demo.vertical {
-    top: 72px;
-    width: 72px;
-    height: 196px;
-}
-
-.scroll-demo span {
-    height: 64px;
-    width: 64px;
-    background: #666;
-    text-align: center;
-    line-height: 64px;
-    display: inline-block;
-    margin: 2px 0px 0px 2px;
-}

examples/kitchen-sink/index.html

@@ -2,327 +2,112 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>LungoJS - Kitchen Sink</title>
+    <title>KitchenSink - Lungo 2.0</title>
     <meta name="description" content="">
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
-    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
     <meta name="HandheldFriendly" content="True">
     <meta name="MobileOptimized" content="320">
-    <meta http-equiv="cleartype" content="on">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="format-detection" content="telephone=no">
-    <!-- For iPhone 4 with high-resolution Retina display: -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
-    <link rel="apple-touch-startup-image" href="assets/images/default.png">
+    <meta http-equiv="cleartype" content="on">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://lungo.tapquo.com/resources/icon@2x.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://lungo.tapquo.com/resources/icon-72.png">
+    <link rel="apple-touch-icon-precomposed" href="http://lungo.tapquo.com/resources/icon.png">
+    <link rel="apple-touch-startup-image" href="http://lungo.tapquo.com/resources/default.png">
+
     <!-- Main Stylesheet -->
+    <!--
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.nav.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.button.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.form.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.brand.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
+    -->
+
+    <link rel="stylesheet" href="../../release/lungo.css">
+    <link rel="stylesheet" href="../../release/lungo.icon.css">
+    <link rel="stylesheet" href="../../release/lungo.icon.brand.css">
+    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
+
     <!-- App Stylesheet -->
-    <link rel="stylesheet" href="assets/stylesheets/app.css">
+    <link rel="stylesheet" href="stylesheets/app.css">
 </head>
 
 <body class="app">
-    <!--
-    <section id="login">
-        <article class="splash">
-            <div class="indented">
-                <h1>Kitchen<span }
->Sink<span></h1>
-
-                <input type="text" placeholder="Type your user" />
-                <input type="password" placeholder="Type your password" />
-
-                <a href="#kitchen-sink" data-target="section" class="button big" data-icon="check">Go to Kitchen Sink!</a>
-                <div class="copyright">Copyright TapQuo Inc, 2011</div>
-
-                <div class="switch">
-                    <span class="thumb"></span>
-                    <input type="checkbox" checked="off" />
-                </div>
-
+    <section id="main" data-transition="slide">
+        <header  class="">
+            <nav class="left button">
+                <a href="#features" data-target="aside" data-icon="menu"></a>
+            </nav>
+            <nav class="right button">
+                <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="share" data-label="Share" target="_blank" ></a>
+            </nav>
+            <div class="left">
+                <span class="title">Lungo Framework</span>
             </div>
-        </article>
-    </section>
-    -->
-
-    <!-- ============================= kitchen-sink ============================= -->
-
-    <section id="kitchen-sink">
-        <header data-title="LungoJS Kitchen Sink">
-            <a href="#kitchen-sink-scroll" class="button left" data-target="aside" data-icon="items"></a>
-            <a href="#profiles" data-target="aside" data-article="welcome" class="button right">Profiles</a>
         </header>
 
-        <!-- ============================= welcome ============================= -->
-        <article id="welcome" class="list scrollable indented">
-            <div>
-                <h1 class="title" data-icon="home">Welcome to LungoJS KitchenSink</h1>
-                <p class="text">
-                    The first <strong>Mobile Framework</strong> that uses the actual features of #HTML5, #CSS3 and #JavaScript.</p>
-                <p class="text">
-                    The main premise in Lungo is to create a semantic structure in the whole project, starting from the markup language HTML, through a well organized CSS< and ending with the JavaScript API</p>
-            </div>
-        </article>
-
-        <!-- ============================= buttons ============================= -->
-        <article id="buttons" class="scrollable indented">
-            <div>
-                <a href="#" class="button big">default</a>
-                <a href="#" class="button big disabled">disabled</a>
-                <a href="#" class="button big red">red</a>
-                <a href="#" class="button big lightgreen">lightgreen</a>
-                <a href="#" class="button big green">green</a>
-                <a href="#" class="button big blue">blue</a>
-                <a href="#" class="button big arcticblue">articblue</a>
-                <a href="#" class="button big orange">orange</a>
-                <a href="#" class="button big magenta">magenta</a>
-                <a href="#" class="button big pink">pink</a>
-                <a href="#" class="button big yellow">yellow</a>
-                <a href="#" class="button big twitter">twitter</a>
-                <a href="#" class="button big facebook">facebook</a>
-
-                <div class="text">You can view other examples push in the next button</div>
-
-                <a href="#buttons-extra" data-target="section" class="button black big" data-icon="add">View other Examples</a>
-            </div>
-        </article>
-
-        <!-- ============================= icons ============================= -->
-        <article id="icons" class="list scrollable">
-            <div class="indented">
-                <h1 class="title">&lt;class&gt; icon: everything is a vector!</h1>
-                <p class="text">In the listed examples you are seeing a attribute "data-icon", this attribute only need the semantic name of the icon you want to show and LungoJS will do the rest of the work.</p>
-
-                <ul>
-                    <li data-icon="map small">map</li>
-                    <li data-icon="clock small">clock</li>
-                    <li data-icon="calendar small">calendar</li>
-                    <li data-icon="message small">message</li>
-                    <li data-icon="chat small">chat</li>
-                    <li data-icon="user small">user</li>
-                    <li data-icon="group small">group</li>
-                    <li data-icon="loading small">loading</li>
-                    <li data-icon="refresh small">refresh</li>
-                    <li data-icon="search small">search</li>
-                    <li data-icon="pushpin small">pushpin</li>
-                    <li data-icon="star small">star</li>
-                    <li data-icon="heart small">heart</li>
-                    <li data-icon="warning small">warning</li>
-                    <li data-icon="add small">add</li>
-                    <li data-icon="remove small">remove</li>
-                    <li data-icon="question small">question</li>
-                    <li data-icon="info small">info</li>
-                    <li data-icon="check small">check</li>
-                    <li data-icon="substract small">substract</li>
-                    <li data-icon="close small">close</li>
-                    <li data-icon="plus small">plus</li>
-                    <li data-icon="up small">up</li>
-                    <li data-icon="down small">down</li>
-                    <li data-icon="left small">left</li>
-                    <li data-icon="right small">right</li>
-                    <li data-icon="home small">home</li>
-                    <li data-icon="pencil small">pencil</li>
-                    <li data-icon="edit small">edit</li>
-                    <li data-icon="picture small">picture</li>
-                    <li data-icon="camera small">camera</li>
-                    <li data-icon="music small">music</li>
-                    <li data-icon="wifi small">wifi</li>
-                    <li data-icon="file small">file</li>
-                    <li data-icon="files small">files</li>
-                    <li data-icon="folder small">folder</li>
-                    <li data-icon="key small">key</li>
-                    <li data-icon="settings small">settings</li>
-                    <li data-icon="chart small">chart</li>
-                    <li data-icon="trash small">trash</li>
-                    <li data-icon="target small">target</li>
-                    <li data-icon="items small">items</li>
-                    <li data-icon="download small">download</li>
-                    <li data-icon="upload small">upload</li>
-                    <li data-icon="basket small">basket</li>
-                    <li data-icon="phone small">phone</li>
-                    <li data-icon="mail small">mail</li>
-                    <li data-icon="tag small">tag</li>
-                </ul>
-            </div>
-        </article>
-
-        <!-- ============================= data - attributes ============================= -->
-        <article id="data-attributes" class="list scrollable">
-            <div class="indented">
-                <h1 class="title">The data-attributes</h1>
-                <ul>
-                    <li data-icon="user">
-                        data-icon
-                        <small>Creates an icon LungoJS vectorized</small>
-                    </li>
-                    <li data-image="assets/images/avatars/1.jpg">
-                        data-image
-                        <small>Instance a &lt;img&gt; automatically</small>
-                    </li>
-                    <li>
-                        data-search
-                        <small>Creates a search input form</small>
-                    </li>
-                    <li data-search="Type your search..."></li>
-                </ul>
-
-                <h1 class="title">Others</h1>
-                <ul>
-                    <li>
-                        data-title
-                        <small>Relationship field between &lt;header&gt; and &lt;a&gt;</small>
-                    </li>
-                    <li>
-                        <div class="right" data-count="23 units"></div>
-                        data-count
-                        <small>Creates counters of different &lt;elements&gt;</small>
-                    </li>
-                    <li>
-                        data-back
-                        <small>Creates a button that goes to the previous section.</small>
-                    </li>
-                </ul>
-            </div>
-        </article>
-
-        <!-- ============================= events ============================= -->
-        <article id="events" class="list scrollable">
-            <div class="indented">
-                <ul>
-                    <li class="tip darker" data-icon="user">
-                        Test events
-                        <small>... in each row.</small>
-                    </li>
-                    <li class="anchor">Common Events</li>
-                    <li id="event_touchstart">Touchstart me!</li>
-                    <li id="event_touchend">Touchend me!</li>
-                    <li id="event_touchmove">Touchmove me!</li>
-                    <li class="anchor">Tap Events</li>
-                    <li id="event_tap">Tap me!</li>
-                    <li id="event_doubletap">Double-Tap me!</li>
-                    <li id="event_longtap">Long-Tap me!</li>
-                    <li class="anchor">Special Events</li>
-                    <li id="swipe" data-icon="user">
-                        Swipe me!
-                        <small>Drag in any direction</small></li>
-                    <li id="swipe_left" data-icon="left">Swipe-Left me!
-                        <small>Drag in any direction</small></li>
-                    <li id="swipe_right" data-icon="right">Swipe-Right me!
-                        <small>Drag in any direction</small></li>
-                    <li id="swipe_up" data-icon="up">Swipe-Up me!
-                        <small>Drag in any direction</small></li>
-                    <li id="swipe_down" data-icon="down">Swipe-Down me!
-                        <small>Drag in any direction</small></li>
-                </ul>
-            </div>
+        <article id="main-article" class="list indented scroll">
+            <ul>
+                <li class="contrast">
+                    <strong>
+                    A framework for developers who want to design, build and share cross device apps.
+                </strong>
+                </li>
+                <li data-icon="brand html5" class="feature">
+                    <strong>HTML5 Optimized Apps</strong>
+                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
+                </li>
+                <li data-icon="brand github-2" class="feature">
+                    <strong>Open Source Project</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
+                <li data-icon="book" class="feature">
+                    <strong>Powerfull JavaScript API</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
+                <li data-icon="brand branch" class="feature">
+                    <strong>Multi-Device full support</strong>
+                    Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
+                </li>
+            </ul>
         </article>
+    </section>
 
-        <!-- ============================= scrolls ============================= -->
-        <article id="scrolls">
-            <div id="scroll-horizontal" class="scroll-demo scrollable horizontal">
-                <div style="width: 1036px;">
-                    <span>1</span>
-                    <span>2</span>
-                    <span>3</span>
-                    <span>4</span>
-                    <span>5</span>
-                    <span>6</span>
-                    <span>7</span>
-                    <span>8</span>
-                    <span>9</span>
-                    <span>10</span>
-                    <span>11</span>
-                    <span>12</span>
-                    <span>13</span>
-                    <span>14</span>
-                    <span>15</span>
-                </div>
-            </div>
-
-            <div id="scroll-vertical" class="scroll-demo scrollable vertical">
-                <div>
-                    <span>1</span>
-                    <span>2</span>
-                    <span>3</span>
-                    <span>4</span>
-                    <span>5</span>
-                    <span>6</span>
-                    <span>7</span>
-                    <span>8</span>
-                    <span>9</span>
-                    <span>10</span>
-                    <span>11</span>
-                    <span>12</span>
-                </div>
-            </div>
-        </article>
+    <!-- Lungo dependencies -->
+    <script src="../../src/lib/quo.debug.js"></script>
 
-        <!-- ============================= authors ============================= -->
-        <article id="urls" class="list scrollable">
-            <div class="indented">
-                <ul>
-                    <li class="anchor" data-icon="pencil">Send a mail</li>
-                    <li data-icon="mail">
-                        <a href="mailto:javi@tapquo.com">
-                        Send a email
-                        <small>href="mailto:"</small></a></li>
-                    <li data-icon="phone">
-                        <a href="tel:+34123">
-                        Phone call
-                        <small>href="tel:"</small></a></li>
-                    <li data-icon="chat">
-                        <a href="sms:+34123">
-                        Text a message
-                        <small>href="sms:"</small></a></li>
-                </ul>
+    <script src="../../release/lungo.js"></script>
 
-                <ul>
-                    <li class="anchor" data-icon="star">Specials for iOS</li>
-                    <li data-icon="pushpin">
-                        <a href="maps:ll=38.870454,-77.055702">
-                        View a point in a map
-                        <small>href="maps:"</small></a></li>
-                    <li data-icon="target">
-                        <a href="maps:ll=38.870454,-77.055702&z=10">
-                        View a point in a map (zoom)
-                        <small>href="maps: &z=10"</small></a></li>
-                </ul>
-            </div>
-        </article>
-
-    </section>
-
-    <!-- Third parties dependencies -->
-    <script src="../../src/lib/QuoJS.js"></script>
-    <script src="../../src/lib/iscroll-lite.js"></script>
-    <!-- LungoJS Libraries (Development mode)-->
+    <!--
     <script src="../../src/Lungo.js"></script>
-    <script src="../../src/Lungo.App.js" ></script>
+    <script src="../../src/Lungo.init.js"></script>
     <script src="../../src/Lungo.Core.js"></script>
     <script src="../../src/Lungo.Dom.js"></script>
     <script src="../../src/Lungo.Service.js"></script>
     <script src="../../src/Lungo.Constants.js"></script>
+    <script src="../../src/Lungo.Element.js"></script>
+    <script src="../../src/Lungo.Events.js"></script>
+    <script src="../../src/Lungo.Notification.js"></script>
     <script src="../../src/router/Lungo.Router.js"></script>
     <script src="../../src/router/Lungo.Router.History.js" ></script>
     <script src="../../src/view/Lungo.View.Resize.js"></script>
     <script src="../../src/view/Lungo.View.Article.js" ></script>
     <script src="../../src/view/Lungo.View.Aside.js" ></script>
-    <script src="../../src/view/Lungo.View.Scroll.js"></script>
     <script src="../../src/view/Lungo.View.Element.js"></script>
     <script src="../../src/view/Lungo.View.Template.js"></script>
     <script src="../../src/view/Lungo.View.Template.Binding.js"></script>
@@ -332,7 +117,6 @@
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
     <script src="../../src/Lungo.Fallback.js"></script>
-    <script src="../../src/boot/Lungo.Boot.js"></script>
     <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
@@ -340,12 +124,23 @@
     <script src="../../src/boot/Lungo.Boot.Data.js"></script>
     <script src="../../src/boot/Lungo.Boot.Section.js"></script>
     <script src="../../src/boot/Lungo.Boot.Article.js"></script>
+    -->
 
     <!-- LungoJS - Sandbox App -->
+    <script>
+        Lungo.init({
+            name: 'Kitchen Sink',
+            version: '2.0',
+            sugars: ['map', 'pull'],
+            resources: {
+                sections: [ 'layout.html', 'notification.html', 'list.html', 'icon.html', 'grid.html', 'form.html', 'aside.html', 'touchevents.html', 'splash.html', 'data-attribute.html', 'scroll.html', 'color.html'],
+                templates: [],
+                asides: ['features.html', 'left.html', 'right.html']
+            }
+        });
+    </script>
     <script src="app/app.js"></script>
-    <script src="app/events.js"></script>
-    <script src="app/view.js"></script>
-    <script src="app/data.js"></script>
-    <script src="app/services.js"></script>
+        <script src="app/events.notification.js"></script>
+        <script src="app/events.touch.js"></script>
 </body>
 </html>

examples/kitchen-sink/old_index.html

@@ -0,0 +1,410 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Lungo 2.0</title>
+    <meta name="description" content="">
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
+    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="format-detection" content="telephone=no">
+    <!-- For iPhone 4 with high-resolution Retina display: -->
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
+    <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
+    <link rel="apple-touch-startup-image" href="assets/images/default.png">
+
+    <meta http-equiv="cleartype" content="on">
+
+    <!-- Main Stylesheet -->
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.nav.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.button.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.form.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.scaffold.css">
+    <!--
+    <link rel="stylesheet" href="../../release/lungo.css">
+    <link rel="stylesheet" href="../../release/lungo.icon.css">
+    <link rel="stylesheet" href="../../release/lungo.theme.scaffold.css">
+    -->
+    <!-- App Stylesheet -->
+    <link rel="stylesheet" href="assets/stylesheets/app.css">
+</head>
+
+<body class="app">
+<!--
+    <section id="login">
+        <article class="indented splash current">
+            <h1>New user</h1>
+            <form>
+                <label>Mail</label>
+                <input type="text" placeholder="Your email" id="txt-signup-mail" value="">
+                <label>Mail</label>
+                <input type="text" placeholder="Your username" id="txt-signup-name" value="">
+                <label>Mail</label>
+                <input type="password" placeholder="Your password" id="txt-signup-password" value="">
+                <a href="#" class="button blue big" id="btn-signup-call" data-icon="checkmark">Signup</a>
+                <a href="#back" data-target="section" class="button red big" data-icon="close">Return to login</a>
+                <a href="#back" data-target="section" class="button green " data-icon="user">Return to login</a>
+            </form>
+        </article>
+    </section>
+
+    <section id="foundation">
+        <header data-title="test"></header>
+        <footer class="toolbar with-labels"></footer>
+
+        <article>
+            <div class="row one red">.row.one</div>
+
+            <div class="row six blue">
+                <div class="one column orange"></div>
+                <div class="one column"></div>
+                <div class="four column orange">.four.column.orange</div>
+                <div class="one column"></div>
+                <div class="one column orange tall"></div>
+                <div class="one column "></div>
+                <div class="one column orange "></div>
+            </div>
+
+            <div class="row two green">
+                <div class="two columns centered red"></div>
+            </div>
+
+            <div class="row one yellow">.row.one.yellow</div>
+        </article>
+    </section>
+
+    <section id="a" data-transition="pop" >
+        <header data-title="a">
+            <nav class="right">
+                <a href="#baaaa" data-target="section">B</a>
+            </nav>
+        </header>
+        <article class="">
+            <a href="#" class="button big" data-icon="home">Prueba</a>
+        </article>
+    </section>
+
+    <section id="baaaa" data-transition="pop" >
+        <header data-title="b" data-back="home"></header>
+             <article></article>
+    </section>
+
+-->
+    <section id="sec-1"  class="popa" data-transition="slide">
+        <header class="extended">
+            <nav class="left">
+                <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">
+                <span class="title with-subtitle">Javi Jiménez Villar</span>
+                <span class="subtitle">@soyjavi</span>
+            </div>
+            <nav class="right ">
+                <!--
+                <a href="#profiles" data-target="aside" data-label="User"></a>
+                <a href="#profiles" data-target="aside" data-icon="users" data-label="User"></a>
+                 -->
+                 <a href="#" data-icon="cloud" id="btn-toggle-loading"></a>
+                <a href="#profiles" data-target="aside" data-icon="user" data-count="1"></a>
+            </nav>
+
+            <nav class="right plain ">
+                <a href="#" data-loading="white disable"></a>
+                <a href="#" data-loading="white "></a>
+            </nav>
+        </header>
+
+        <nav class="groupbar">
+            <a href="#nav-1" data-target="article" class="current"  data-icon="html5">&nbsp;Lists</a>
+            <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Form</a>
+        </nav>
+
+        <footer class="toolbar with-labels">
+            <nav>
+                <a href="#nav-0" data-target="article" data-icon="refresh" class="current" data-label="loading">
+                    <span class="bubble count" data-loading="white"></span>
+                </a>
+                <a href="#nav-1" data-target="article" data-title="d" data-icon="settings" data-label="boxes" data-count="1"></a>
+                <a href="#nav-2" data-target="article" data-title="b" data-icon="close" data-count="12" data-label="Form"></a>
+                <a href="#nav-3" data-target="article" data-title="c"  data-icon="share" data-label="Emails" data-count="123"></a>
+                <a href="#nav-4" data-target="article" data-title="lists" data-label="lists" data-loading="white"></a>
+            </nav>
+        </footer>
+
+        <!--
+        <footer class="toolbar">
+            <nav>
+                <a href="#nav-1" data-target="article" class="current"  data-icon="clock"></a>
+                <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17"></a>
+                <a href="#a" data-target="article" data-icon="mail" data-count="124"></a>
+                <a href="#a" data-target="article" data-icon="phone" data-count="12"></a>
+            </nav>
+        </footer>
+        -->
+
+        <article id="nav-0" data-loading="black">
+        </article>
+
+        <article id="nav-1" class="lisst">
+            <div id = "prueba" class="five row list  " style="background: url(http://placehold.it/320x200);">
+            </div>
+
+            <div class="three row grey">
+                <div class="six row green">
+                    <div class="wrapper">
+                        <div class="right" data-icon="calendar">June 9, 2012</div>
+                        <strong>LungoJS.2 Application</strong>
+                        <small>by Javi Jimenez <div class="bubble grey">PRO</div></small>
+                    </div>
+                </div>
+
+                <div class="four row red">
+                    <a href="#" class="four columns">
+                        <div class="wrapper" data-icon="heart">217 Likes</div>
+                    </a>
+                    <a href="#" class="three columns">
+                        <div class="wrapper" data-icon="pushpin">4 Buckets</div>
+                    </a>
+                    <a href="#" class="three columns">
+                        <div class="wrapper" data-icon="picture">389 Views</div>
+                    </a>
+                </div>
+            </div>
+
+            <div class="two row  white list scroll">
+                <ul>
+                    <li class=" selectable" >
+                        <a href="#" data-image="http://placehold.it/32x32">
+
+                            <div class="right" data-icon="calendar">2 days ago</div>
+                            <strong>List: .selectable</strong>
+                            <small>a: data-image</small>
+                        </a>
+                    </li>
+
+                    <li class=" selectable" >
+                        <a href="#" data-image="http://placehold.it/32x32">
+
+                            <div class="right" data-icon="calendar">2 days ago</div>
+                            <strong>List: .selectable</strong>
+                            <small>a: data-image</small>
+                        </a>
+                    </li>
+
+                    <li class=" selectable" >
+                        <a href="#" data-image="http://placehold.it/32x32">
+
+                            <div class="right" data-icon="calendar">2 days ago</div>
+                            <strong>List: .selectable</strong>
+                            <small>a: data-image</small>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+        </article>
+
+        <article id="nav-2" class="list indented scroll">
+            <ul class="form minimal">
+                <li data-loading="black big"></li>
+                <li id="loading-code" style="background-color: grey;"></li>
+                <li class="padding">
+                    <label>type="text"</label>
+                    <input type="text" placeholder="Input text"/>
+                    <textarea placeholder="Textarea sample"></textarea>
+                    <label class="select">
+                        <select class="custom">
+                            <option value="1">One</option>
+                            <option value="2">Two</option>
+                            <option value="3">Three</option>
+                        </select>
+                    </label>
+                </li>
+                <li class="padding">
+                    <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
+                </li>
+                <li  class="padding">
+                    <label class="-pop">Do you like LungoJS forms?</label>
+                    <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
+                </li>
+
+                <li class="padding">
+                    <div id="progress-normal" data-progress="25%"></div>
+                    <div id="progress-big" data-progress="50%" class="big"></div>
+                    <label>type="range"</label>
+                    <input type="range">
+                </li>
+            </ul>
+            <ul>
+                <li class="anchor " data-icon="small user">Examples of anchors</li>
+                <li class="padding">
+                    <strong>Lorem Ipsum</strong>
+                    <small>is simply dummy text of the printing and typesetting industry</small>
+                </li>
+                <li class="anchor" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="anchor contrast" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+
+                <li class="anchor" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                <li class="anchor contrast" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+
+
+                <li class="anchor contrast" data-icon="question small">It's a special form element you must set the label with class "select"</li>
+            </ul>
+        </article>
+
+
+
+        <article id="nav-4" class="list scroll">
+            <ul>
+                <li>
+                    <a href="#" >
+                        <strong>List: none</strong>
+                        <small>a: none</small>
+                    </a>
+                </li>
+
+                <li class=" selectable" >
+                    <a href="#" data-image="http://placehold.it/32x32">
+
+                        <div class="right" data-icon="calendar">2 days ago</div>
+                        <strong>List: .selectable</strong>
+                        <small>a: data-image</small>
+                    </a>
+                </li>
+                 <li class="arrow thumb">
+                    <a href="#" data-image="http://placehold.it/48x48">
+                        <strong>List: .arrow .thumb </strong>
+                         <small>a: data-image</small>
+                    </a>
+                </li>
+                <li class="red">
+                    <a href="#"  data-icon="home">
+                        <div class="bubble red right"><span class="icon map"></span>125m</div>
+                        <strong>List: .red</strong>
+                        <small data-icon="clock">a: data-icon & .bubble</small>
+                    </a>
+                </li>
+
+                <li class="padding" data-icon="user">
+                    <strong>List: .padding & data-icon</strong>
+                    <small><span class="icon home"></span>a: undefined</small>
+                </li>
+
+                <li class="padding">
+                    <input type="text" placeholder="Input text"/>
+                    <textarea placeholder="Textarea sample"></textarea>
+                    <label class="select">
+                        <select class="custom">
+                            <option value="1">One</option>
+                            <option value="2">Two</option>
+                            <option value="3">Three</option>
+                        </select>
+                    </label>
+                </li>
+            </ul>
+
+        </article>
+
+        <article id="nav-3" class="list indented">
+            <div>
+                <a href="#sec-2" data-target="section" class="button big" data-icon="check">Test 2</a>
+                <a href="#sec-2"  class="button big red " data-icon="check">Test 2</a>
+                <a href="#sec-2" class="button big green" data-icon="check">Test 2</a>
+            </div>
+        </article>
+    </section>
+
+
+    <section id="sec-2" data-transition="pop">
+        <header data-title="Auto title centered">
+            <nav class="left">
+                <a href="#back" data-target="section" class="cancel" data-icon="close" data-label="CANCEL"></a>
+            </nav>
+
+            <nav class="right ">
+                <a href="#" class="accept" data-icon="check" data-label="ACCEPT"></a>
+            </nav>
+        </header>
+        <article>
+            None
+        </article>
+    </section>
+
+    <!-- Lungo dependencies -->
+    <script src="../../src/lib/quo.debug.js"></script>
+    <!--
+    <script src="../../release/lungo.js"></script>
+    -->
+    <script src="../../src/Lungo.js"></script>
+    <script src="../../src/Lungo.init.js"></script>
+    <script src="../../src/Lungo.Core.js"></script>
+    <script src="../../src/Lungo.Dom.js"></script>
+    <script src="../../src/Lungo.Service.js"></script>
+    <script src="../../src/Lungo.Constants.js"></script>
+    <script src="../../src/Lungo.Element.js"></script>
+    <script src="../../src/Lungo.Events.js"></script>
+    <script src="../../src/Lungo.Notification.js"></script>
+    <script src="../../src/router/Lungo.Router.js"></script>
+    <script src="../../src/router/Lungo.Router.History.js" ></script>
+    <script src="../../src/view/Lungo.View.Resize.js"></script>
+    <script src="../../src/view/Lungo.View.Article.js" ></script>
+    <script src="../../src/view/Lungo.View.Aside.js" ></script>
+    <script src="../../src/view/Lungo.View.Element.js"></script>
+    <script src="../../src/view/Lungo.View.Template.js"></script>
+    <script src="../../src/view/Lungo.View.Template.Binding.js"></script>
+    <script src="../../src/view/Lungo.View.Template.List.js"></script>
+    <script src="../../src/data/Lungo.Data.Cache.js"></script>
+    <script src="../../src/data/Lungo.Data.Sql.js"></script>
+    <script src="../../src/data/Lungo.Data.Storage.js"></script>
+    <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
+    <script src="../../src/Lungo.Fallback.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
+    <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
+    <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Events.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Data.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Section.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Article.js"></script>
+
+    <!-- LungoJS - Sandbox App -->
+    <script>
+        Lungo.init({
+            name: 'Kitchen Sink',
+            version: '2.0',
+            sugars: ['map', 'pull'],
+            resources: {
+                sections: ['aside.html', 'aside-profiles.html', 'notification.html'],
+                templates: [],
+                asides: []
+            }
+        });
+    </script>
+    <script src="app/app.js"></script>
+    <script src="app/view.js"></script>
+    <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>
+</body>
+</html>

examples/kitchen-sink/stylesheets/app.css

@@ -0,0 +1,36 @@
+#main article li.contrast {
+    font-size: 0.95em;
+}
+
+#main article li.feature strong {
+    margin-top: 8px;
+    margin-bottom: 10px;
+    display: block;
+}
+
+#touchevents-console {
+    background: #292f34;
+    color: white;
+    font-size: 3.0em;
+    line-height: 2.2em;
+    text-align: center;
+}
+
+ li {
+    padding-top: 128px !important;
+    padding-bottom: 128px !important;
+}
+
+#touchevents .list li:not(.anchor) {
+    padding: 64px 8px;
+}
+
+#scroll h1 {
+    line-height: 44px;
+    background: black;
+    color: white;
+    text-indent: 10px;
+}
+
+#scroll .anchor img { width: 100%; }
+#scroll .horizontal img { height: 100%; }

examples/test/app/data.js

@@ -1,3 +0,0 @@
-App.Data = (function(lng, App, undefined) {
-
-})(Lungo, App);

examples/test/app/events.js

@@ -1,9 +0,0 @@
-
-Lungo.Events.init({
-    'tap section#a article a': function(){
-        Lungo.Notification.loading('hole', '1', 'user');
-    },
-    'tap section#sec-1 header #btn-toggle-loading': App.View.toggleLoading,
-    'load section#sec-2 load': App.View.toggleLoading
-});
-

examples/test/app/resources/templates/list-home.html

@@ -1 +0,0 @@
-<li id={{id}} data-icon="home">{{name}}</li>

examples/test/app/services.js

@@ -1,3 +0,0 @@
-App.Services = (function(lng, App, undefined) {
-
-})(Lungo, App);

examples/test/app/view.js

@@ -1,25 +0,0 @@
-App.View = (function(lng, App, undefined) {
-
-    growl = function() {
-        alert(1111)
-    };
-
-    toggleLoading = function(event) {
-        var el = lng.dom(this);
-
-        if (el.children('.loading').length > 0) {
-            el.children('.icon').show();
-            lng.View.Element.loading(this);
-        } else {
-            el.children('.icon').hide();
-            lng.View.Element.loading(this, 'white');
-        }
-    };
-
-    return {
-        growl: growl,
-        toggleLoading: toggleLoading
-    };
-
-
-})(Lungo, App);

examples/test/kitchensink.html

@@ -1,176 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>KitchenSink - Lungo 2.0</title>
-    <meta name="description" content="">
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
-    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
-    <meta name="HandheldFriendly" content="True">
-    <meta name="MobileOptimized" content="320">
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="format-detection" content="telephone=no">
-    <!-- For iPhone 4 with high-resolution Retina display: -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://lungo.tapquo.com/resources/icon@2x.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://lungo.tapquo.com/resources/icon-72.png">
-    <link rel="apple-touch-icon-precomposed" href="http://lungo.tapquo.com/resources/icon.png">
-    <link rel="apple-touch-startup-image" href="http://lungo.tapquo.com/resources/default.png">
-
-    <meta http-equiv="cleartype" content="on">
-
-    <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.nav.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.button.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.form.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.brand.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
-
-
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
-    <!--
-    <link rel="stylesheet" href="../../release/lungo.css">
-    <link rel="stylesheet" href="../../release/lungo.icon.css">
-    <link rel="stylesheet" href="../../release/lungo.theme.scaffold.css">
-    -->
-    <!-- App Stylesheet -->
-    <!--
-    <link rel="stylesheet" href="assets/stylesheets/app.css">
--->
-
-    <style>
-        #touchevents-console{
-            background: #292f34;
-            color: white;
-            font-size: 3.0em;
-            line-height: 2.2em;
-            text-align: center;
-        }
-
-         li {
-            padding-top: 128px !important;
-            padding-bottom: 128px !important;
-        }
-
-        #touchevents .list li:not(.anchor) {
-            padding: 64px 8px;
-        }
-    </style>
-</head>
-
-<body class="app">
-
-
-
-    <section id="main" data-transition="slide">
-        <header  class="">
-            <nav class="left button">
-                <a href="#features" data-target="aside" data-icon="menu"></a>
-            </nav>
-            <nav class="right button">
-                <a href="#" data-icon="share" data-label="Share" ></a>
-            </nav>
-            <div class="left">
-                <span class="title">LUNGO FRAMEWORK</span>
-            </div>
-        </header>
-
-        <footer>
-            <nav class="with-label">
-                <a href="#art-1" data-target="article" class="current" data-label="Inicio" data-icon="info"></a>
-                <a href="#art-2" data-target="article"  data-icon="user" data-count="3"></a>
-                <a href="#art-3" data-target="article"  data-icon="user"></a>
-                <a href="#art-4" data-target="article"  data-icon="mail" data-label="Cuenta" data-count="3" ></a>
-            </nav>
-        </footer>
-
-<!--         <nav class="groupbar">
-            <a href="#art-1" data-target="article" class="current" data-label="Inicio"></a>
-                <a href="#art-2" data-target="article" data-label="user"></a>
-                <a href="#art-3" data-target="article" data-label="user"></a>
-                <a href="#art-4" data-target="article" data-label="Cuenta"></a>
-            </nav> -->
-
-
-        <article id="main-article" class="list">
-
-
-        </article>
-
-
-        <article id="art-2" data-loading="black"></article>
-        <article id="art-3" data-loading="black"></article>
-        <article id="art-4" data-loading="black"></article>
-    </section>
-
-    <!-- Lungo dependencies -->
-    <script src="../../src/lib/quo.debug.js"></script>
-    <!--
-    <script src="../../release/lungo.js"></script>
-    -->
-    <script src="../../src/Lungo.js"></script>
-    <script src="../../src/Lungo.init.js"></script>
-    <script src="../../src/Lungo.Core.js"></script>
-    <script src="../../src/Lungo.Dom.js"></script>
-    <script src="../../src/Lungo.Service.js"></script>
-    <script src="../../src/Lungo.Constants.js"></script>
-    <script src="../../src/Lungo.Element.js"></script>
-    <script src="../../src/Lungo.Events.js"></script>
-    <script src="../../src/Lungo.Notification.js"></script>
-    <script src="../../src/router/Lungo.Router.js"></script>
-    <script src="../../src/router/Lungo.Router.History.js" ></script>
-    <script src="../../src/view/Lungo.View.Resize.js"></script>
-    <script src="../../src/view/Lungo.View.Article.js" ></script>
-    <script src="../../src/view/Lungo.View.Aside.js" ></script>
-    <script src="../../src/view/Lungo.View.Element.js"></script>
-    <script src="../../src/view/Lungo.View.Template.js"></script>
-    <script src="../../src/view/Lungo.View.Template.Binding.js"></script>
-    <script src="../../src/view/Lungo.View.Template.List.js"></script>
-    <script src="../../src/data/Lungo.Data.Cache.js"></script>
-    <script src="../../src/data/Lungo.Data.Sql.js"></script>
-    <script src="../../src/data/Lungo.Data.Storage.js"></script>
-    <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
-    <script src="../../src/Lungo.Fallback.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
-    <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
-    <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Events.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Data.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Section.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Article.js"></script>
-
-    <!-- LungoJS - Sandbox App -->
-    <script>
-        Lungo.init({
-            name: 'Kitchen Sink',
-            version: '2.0',
-            sugars: ['map', 'pull'],
-            resources: {
-                sections: [ 'layout.html', 'notification.html', 'list.html', 'icon.html', 'grid.html', 'form.html', 'aside.html', 'touchevents.html'],
-                templates: [],
-                asides: ['features.html', 'left.html', 'right.html']
-            }
-        });
-    </script>
-    <script src="app/app.js"></script>
-    <script src="app/view.js"></script>
-    <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 src="app/events.touch.js"></script>
-</body>
-</html>

src/attributes/Lungo.Attributes.Data.js

@@ -9,11 +9,6 @@
  */
 
 Lungo.Attributes.Data = {
-    Search: {
-        tag: 'search',
-        selector: '.list',
-        html: '<li class="search {{value}}"><input type="search" placeholder="Search..."><a href="#" class="button" data-icon="search"></a></li>'
-    },
     Search: {
         tag: 'search',
         selector: '*',

src/stylesheets/Lungo.layout.aside.less

@@ -79,6 +79,8 @@ aside {
     }
 }
 
+/*
+@TODO: Tablets & TV on final release
 @media handheld, only screen and (min-width: 768px) {
     .autohide[data-target="aside"] {  display: none !important; }
 
@@ -92,3 +94,4 @@ aside {
         &.small{ left: @aside-width-small; }
     }
 }
+*/

src/stylesheets/Lungo.layout.nav.less

@@ -86,10 +86,13 @@ header nav {
     }
 }
 
-footer nav a {
-    display: block;
-    padding: 0;
-    height:  @header-footer-height;
+footer nav {
+
+    & a {
+        display: block;
+        padding: 0;
+        height:  @header-footer-height;
+    }
 
     & .icon {
         display: block;
@@ -106,15 +109,13 @@ footer nav a {
             font-size: 1.4em; }
     }
 
-    abbr {
-        display: none;
-    }
+    abbr { display: none; }
 
     & .loading {
         top: .1em;
         font-size: 2.3em; }
 
-     &.with-labels {
+    &.with-labels {
         & .icon { line-height: 36px; }
         & .bubble { top: -34px; }
 

src/stylesheets/Lungo.theme.default.less

@@ -9,7 +9,7 @@
 
 @import "constants.less";
 @import "mixins.less";
-// @import "lungo.theme.default.font.less";
+@import "lungo.theme.default.font.less";
 
 @theme: #2A95D3;
 @theme-light:  #39ABE1;
@@ -150,7 +150,10 @@ section.aside {
 
         &, & a { color: @list-color; }
 
-        &.contrast { background: @footer; }
+        &.contrast {
+            background: @footer;
+            color: @white;
+        }
 
         &.highlight { background: @list-border; }
         &.anchor {

src/stylesheets/Lungo.widgets.less

@@ -19,13 +19,15 @@
     -webkit-box-flex: 1;
 
     &.horizontal {
-        overflow-x: scroll;
-        overflow-y: hidden !important;
-
+        overflow-x:scroll;
+        overflow-y:hidden;
+        white-space:nowrap;
+        /*
         & > * {
             min-width: 4096px;
             & > * { float: left; }
         }
+        */
     }
 
     // FIXES: position: relative childrens

src/stylesheets/Lungo.widgets.loading.less

@@ -79,7 +79,7 @@
     }
 }
 
-section.current .loading, .notification .loading {
+section.show .loading, section.current .loading, .notification .loading {
     -webkit-animation:  rotatingLoader .6s  infinite linear;
     -moz-animation:  rotatingLoader .6s  infinite linear;
 }

src/stylesheets/css/Lungo.layout.aside.css

@@ -104,27 +104,19 @@ aside.small nav .bubble {
   top: 4px;
   left: -22px;
 }
+/*
+@TODO: Tablets & TV on final release
 @media handheld, only screen and (min-width: 768px) {
-  .autohide[data-target="aside"] {
-    display: none !important;
-  }
-  section.aside {
-    width: auto !important;
-    left: 256px;
-    right: 0px !important;
-    -webkit-transform: translate3d(0px, 0, 0);
-    -moz-transform: translate3d(0px, 0, 0);
-    -ms-transform: translate3d(0px, 0, 0);
-    -o-transform: translate3d(0px, 0, 0);
-    transform: translate3d(0px, 0, 0);
-    -webkit-transform: translate3d(0px, 0, 0);
-    -moz-transform: translate3d(0px, 0, 0);
-    -ms-transform: translate3d(0px, 0, 0);
-    -o-transform: translate3d(0px, 0, 0);
-    transform: translate3d(0px, 0, 0);
-    -webkit-transition: none;
-  }
-  section.aside.small {
-    left: 64px;
-  }
-}
+    .autohide[data-target="aside"] {  display: none !important; }
+
+    section.aside {
+        width: auto !important;
+        left: @aside-width;
+        right: 0px !important;
+        .transform(translate3d(0px, 0, 0));
+        -webkit-transition: none;
+
+        &.small{ left: @aside-width-small; }
+    }
+}
+*/

src/stylesheets/css/Lungo.layout.nav.css

@@ -85,34 +85,34 @@ footer nav a {
   padding: 0;
   height: 44px;
 }
-footer nav a .icon {
+footer nav .icon {
   display: block;
   top: 0px;
   font-size: 2.0em !important;
   line-height: 44px;
 }
-footer nav a .bubble {
+footer nav .bubble {
   top: -42px;
   left: 4px;
 }
-footer nav a .bubble .loading {
+footer nav .bubble .loading {
   top: 0;
   font-size: 1.4em;
 }
-footer nav a abbr {
+footer nav abbr {
   display: none;
 }
-footer nav a .loading {
+footer nav .loading {
   top: .1em;
   font-size: 2.3em;
 }
-footer nav a.with-labels .icon {
+footer nav.with-labels .icon {
   line-height: 36px;
 }
-footer nav a.with-labels .bubble {
+footer nav.with-labels .bubble {
   top: -34px;
 }
-footer nav a.with-labels abbr {
+footer nav.with-labels abbr {
   display: block !important;
   position: absolute;
   top: 30px;

src/stylesheets/css/Lungo.widgets.css

@@ -15,13 +15,15 @@
 }
 .scroll.horizontal {
   overflow-x: scroll;
-  overflow-y: hidden !important;
-}
-.scroll.horizontal  > * {
-  min-width: 4096px;
-}
-.scroll.horizontal  > *  > * {
-  float: left;
+  overflow-y: hidden;
+  white-space: nowrap;
+  /*
+        & > * {
+            min-width: 4096px;
+            & > * { float: left; }
+        }
+        */
+
 }
 .scroll  > * {
   -webkit-transform: translate3d(0, 0, 0);

src/stylesheets/css/Lungo.widgets.loading.css

@@ -161,6 +161,7 @@
 .loading.white > span.top::before {
   background-color: rgba(255, 255, 255, 0.15);
 }
+section.show .loading,
 section.current .loading,
 .notification .loading {
   -webkit-animation: rotatingLoader .6s  infinite linear;