Changes in Kitchensink

example/app/app.js

@@ -1,8 +1,15 @@
 var App = (function(lng, undefined) {
 
-    triggerCapture = function(event) {
+    sectionTrigger = function(event) {
         event.stopPropagation();
-        lng.Notification.success("Event: " + event.type, "Layout events manager", "info", 2);
+        setTimeout(function() {
+            lng.Notification.success("Event: " + event.type, "Layout events manager", "info", 2);
+        }, 500);
+    };
+
+    articleTrigger = function(event) {
+        event.stopPropagation();
+        console.error(event);
     };
 
     environment = function(event) {
@@ -19,8 +26,151 @@ var App = (function(lng, undefined) {
     };
 
     return {
-        triggerCapture: triggerCapture,
+        sectionTrigger: sectionTrigger,
+        articleTrigger: articleTrigger,
         environment: environment
     };
 
 })(Lungo);
+
+App.carousel = {prev: null, next: null};
+
+Lungo.Events.init({
+    'load section#layoutevents'     : App.sectionTrigger,
+
+    'unload section#layoutevents'   : App.sectionTrigger,
+
+    'load article#environment'      : App.environment,
+
+    'load article#touchevents'      : function(event) {
+
+        ["singleTap", "doubleTap", "hold",
+            "swipe", "-swiping", "swipeLeft", "swipeRight", "swipeUp", "swipeDown",
+            "rotate", "rotateLeft", "rotateRight",
+            "pinch", "pinchIn", "pinchOut",
+            "drag", "dragLeft", "dragRight", "dragUp", "dragDown"].forEach(function(type) {
+            $$("article#touchevents #gestures").on(type, function(event) {
+                $$(this).siblings('.console.output').append(' | ' + type);
+            });
+        });
+
+        $$("[data-action=clean_console]").tap(function(event) {
+            $$('.console.output').html("");
+        });
+
+        $$("[data-action=twitter]").tap(function(event) {
+            window.open("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", "_blank");
+        });
+
+    },
+
+
+    'load section#carousel': function(event) {
+        App.carousel = Lungo.Element.Carousel($$('[data-control=carousel]')[0], function(index, element) {
+            Lungo.dom("section#carousel .title span").html(index + 1);
+        });
+    },
+
+    'tap section#carousel > header [data-direction=left]':  App.carousel.prev,
+
+    'tap section#carousel > header [data-direction=right]': App.carousel.next,
+
+    'tap #themeroller li': function(event) {
+        var link = $$("#theme-stylesheet");
+        var url = link.attr("href");
+        var new_url = url.split("/").slice(0, -1);
+        new_url.push($$(this).attr("data-theme"));
+        link.attr('href', new_url.join("/"));
+    },
+
+    'load section#pull': function(event) {
+        App.pull = new Lungo.Element.Pull('section#pull article', {
+            onPull: "Pull down to refresh",
+            onRelease: "Release to get new data",
+            onRefresh: "Refreshing...",
+            callback: function() {
+                alert("Pull & Refresh completed!");
+                App.pull.hide();
+            }
+        });
+    },
+
+
+    'tap article#notification a[data-action=normal]': function() {
+        Lungo.Notification.show('Title', 'message', 2);
+    },
+
+    'tap article#notification a[data-action=loading]': function() {
+        Lungo.Notification.show();
+        setTimeout(Lungo.Notification.hide, 3000);
+    },
+
+    'tap article#notification a[data-action=success]': function() {
+        Lungo.Notification.success('Title', 'Description', 'message', 2);
+    },
+
+    'tap article#notification a[data-action=error]': function() {
+        Lungo.Notification.error('Title', 'Description', 'message', 2);
+    },
+
+    'tap article#notification a[data-action=confirm]': function() {
+        Lungo.Notification.confirm({
+            icon: 'user',
+            title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
+            accept: {
+                icon: 'checkmark',
+                label: 'Accept',
+                callback: function(){ alert("Yes!"); }
+            },
+            cancel: {
+                icon: 'close',
+                label: 'Cancel',
+                callback: function(){ alert("No!"); }
+            }
+        });
+    },
+
+    'tap article#notification a[data-action=html]': function() {
+        Lungo.Notification.html('<h1>Hello World</h1>', true);
+    },
+
+    'tap article#notification a[data-action=chaining]': function() {
+        Lungo.Notification.show('Title', 'message', 2, function() {
+            Lungo.Notification.error('Title 2', 'Description 2', 'message',  2, function() {
+                Lungo.Notification.show('Title 3', 'Description 3', 'message', false, 2, function() {
+                    Lungo.Notification.html('<h1>Hello World</h1>', true);
+                    // Lungo.Notification.hide();
+                });
+            });
+        });
+    }
+
+});
+
+Lungo.ready(function() {
+    Lungo.Aside.show();
+    // App.environment();
+    // Lungo.Router.section("notification");
+
+    // Lungo.Notification.show();
+    // Lungo.Notification.show("Please wait", "user", 2, function(){ alert(1); });
+    // Lungo.Notification.error('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel');
+    // Lungo.Notification.success('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel', 2, function(){alert(1)});
+    // Lungo.Notification.confirm({
+    //     icon: 'user',
+    //     title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
+    //     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
+    //     accept: {
+    //         icon: 'checkmark',
+    //         label: 'Accept',
+    //         callback: function(){ alert("Yes!"); }
+    //     },
+    //     cancel: {
+    //         icon: 'close',
+    //         label: 'Cancel',
+    //         callback: function(){ alert("No!"); }
+    //     }
+    // });
+
+});

example/app/articles/buttons.html

@@ -0,0 +1,19 @@
+<article id="buttons" class="scroll indented">
+    <div>
+        <h1>Sizes</h1>
+        <p class="margin bottom">
+            <a href="#" class="button small">small</a>
+            <a href="#" class="button">default</a>
+            <a href="#" class="button large">large</a>
+        </p>
+        <a href="#" class="button anchor margin bottom">anchor</a>
+        <h1>Colors</h1>
+        <p>
+            <a href="#" class="button anchor margin bottom">default</a>
+            <a href="#" class="button anchor secondary margin bottom">secondary</a>
+            <a href="#" class="button anchor accept margin bottom">accept</a>
+            <a href="#" class="button anchor cancel margin bottom">cancel</a>
+            <a href="#" class="button anchor margin bottom" disabled=true>disabled</a>
+        </p>
+    </div>
+</article>

example/app/articles/data.html

@@ -0,0 +1,50 @@
+<article id="data" class="list scroll indented">
+    <ul>
+        <li data-icon="user">
+            <strong>data-icon</strong>
+            <small>Creates an icon Lungo vectorized</small>
+        </li>
+
+        <li data-image="http://cdn.tapquo.com/lungo/icon-144.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>
+        <form  data-search="Type your search..."></form>
+
+        <li>
+            <strong>data-progress</strong>
+            <small>Creates a progress element</small>
+        </li>
+        <form data-progress="25%"></form>
+
+        <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>

example/app/articles/environment.html

@@ -0,0 +1,16 @@
+<article id="environment" class="list">
+    <ul>
+        <li id="os" class="dark" data-icon="mobile">
+            <strong>Desktop</strong>
+            <small>unknown</small>
+        </li>
+        <li id="resolution" data-icon="picture">
+            <strong>0p x 0p</strong>
+            <small>Screen Resolution</small>
+        </li>
+        <li id="navigator" data-icon="brand html5">
+            <strong>webkit</strong>
+            <small>Mobile: </small>
+        </li>
+    </ul>
+</article>

example/app/articles/grid.html

@@ -0,0 +1,17 @@
+<article id="grid" class="active"  style="font-size:0.7em;">
+    <div class="four rows">class="four rows"</div>
+    <div class="one row blue">class="one row blue"</div>
+    <div class="one row">class="one row"</div>
+    <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>

example/app/articles/icon.html

@@ -0,0 +1,624 @@
+<nav data-control="groupbar" data-article="icons">
+    <a href="#" data-view-article="icons" data-label="Normal" data-count="72"></a>
+    <a href="#" data-view-article="icons-brands" data-label="Brands" data-count="37" ></a>
+</nav>
+
+<article id="icons" 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>

example/app/articles/list.html

@@ -0,0 +1,297 @@
+
+<nav data-control="groupbar" data-article="list list-indented list-examples">
+    <a href="#" data-view-article="list" data-icon="checkmark" data-label="Normal"></a>
+    <a href="#" data-view-article="list-indented" data-label="Indented"></a>
+    <a href="#" data-view-article="list-examples" data-label="Examples"></a>
+</nav>
+
+<article id="list" class="active list scroll">
+    <ul>
+        <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">colors</li>
+
+        <li class="dark">
+            <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+
+        <li class="theme">
+            <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+
+        <li class="arrow light">
+            <strong>&lt;li .arrow.light&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>
+            <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="#">
+                <strong>&lt;strong&gt; element</strong>
+                <small>with &lt;small&gt; element</small>
+                <div class="right">.right</div>
+            </a>
+        </li>
+
+        <li>
+            <a href="#">
+                <div class="right tag blue">.right.tag</div>
+                <strong>&lt;strong&gt; element</strong>
+                <small>with &lt;small&gt; element</small>
+            </a>
+        </li>
+
+        <li>
+            <a href="#">
+                <div class="right tag blue" data-icon="clock">.right data-icon</div>
+                <strong>&lt;strong&gt; element</strong>
+                <small>with &lt;small&gt; element</small>
+            </a>
+        </li>
+
+        <li>
+            <a href="#">
+                <a href="#" class="button small red right" data-label="button"></a>
+                <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://cdn.tapquo.com/lungo/icon-144.png">
+            <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+        <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.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="accept">
+            <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+        <li class="cancel">
+            <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+        <li class="secondary">
+            <strong>&lt;li .secondary&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+    </ul>
+</article>
+
+<article id="list-indented" class="list scroll indented">
+    <ul>
+        <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">colors</li>
+
+        <li class="dark">
+            <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+
+        <li class="theme">
+            <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+
+        <li class="arrow light">
+            <strong>&lt;li .arrow.light&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>
+            <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="#">
+                <strong>&lt;strong&gt; element</strong>
+                <small>with &lt;small&gt; element</small>
+                <div class="right">.right</div>
+            </a>
+        </li>
+
+        <li>
+            <a href="#">
+                <div class="right tag blue">.right.tag</div>
+                <strong>&lt;strong&gt; element</strong>
+                <small>with &lt;small&gt; element</small>
+            </a>
+        </li>
+
+        <li>
+            <a href="#">
+                <div class="right tag blue" data-icon="clock">.right data-icon</div>
+                <strong>&lt;strong&gt; element</strong>
+                <small>with &lt;small&gt; element</small>
+            </a>
+        </li>
+
+        <li>
+            <a href="#">
+                <a href="#" class="button small red right" data-label="button"></a>
+                <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://cdn.tapquo.com/lungo/icon-144.png">
+            <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+        <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.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="theme">
+            <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+        <li class="accept">
+            <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+        <li class="cancel">
+            <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+        <li class="secondary">
+            <strong>&lt;li .secondary&gt; + &lt;strong&gt; </strong>
+            <small>&lt;small&gt;</small>
+        </li>
+    </ul>
+</article>
+
+<article id="list-examples" class="list scroll">
+    <ul>
+        <li class="feature">
+            <div class="right  ">15:49</div>
+            <strong class="text bold">Javi Jimenez Villar</strong>
+            <div class="text small">[JavaScript] [JOB] FrontEnd Developer</div>
+            <small>
+                <div class="right tag ">theme</div>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus unde.
+            </small>
+        </li>
+        <li class="feature">
+            <div class="right ">15:49</div>
+            <strong class="text normal">Ignacio Olalde</strong>
+            <small class="text small">[Python] [JOB] BackEnd Developer</small>
+            <small>
+                <div class="right tag cancel">important</div>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus unde.
+            </small>
+        </li>
+        <li class="feature">
+            <div class="right tag accept">sended</div>
+            <strong class="text bold">Open Source Project</strong>
+            <p class="text thin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos officia dolore in perferendis eum ducimus molestias...</p>
+        </li>
+        <li class="feature">
+            <strong>Lorem ipsum dolor sit amet</strong>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut corporis sint facilis cupiditate adipisci ab blanditiis porro dolorem nam velit saepe sed unde minima in nesciunt nostrum laboriosam fugit.
+        </li>
+    </ul>
+</article>

example/app/articles/notification.html

@@ -0,0 +1,13 @@
+<article id="notification" class="active list scroll indented">
+    <div>
+        <a href="#" class="button anchor" data-label="Normal" data-action="normal"></a>
+        <a href="#" class="button anchor" data-label="Loading" data-label="Loading" data-action="loading"></a>
+        <a href="#" class="button anchor" data-label="Confirm" data-action="confirm"></a>
+        <a href="#" class="button anchor" data-label="Html" data-action="html"></a>
+
+        <a href="#" class="button anchor accept" data-label="Success" data-action="success"></a>
+        <a href="#" class="button anchor cancel" data-label="Error" data-action="error"></a>
+
+        <a href="#" class="button anchor " data-label="Chaining" data-action="chaining"></a>
+    </div>
+</article>

example/app/articles/theme.html

@@ -0,0 +1,20 @@
+<article id="themeroller" class="list indented">
+    <ul>
+         <li class="theme" data-icon="eye" data-theme="theme.lungo.css">
+            <strong>Default theme</strong>
+            <small>This element has an associated event</small>
+        </li>
+        <li class="cancel" data-icon="eye" data-theme="theme.red.css">
+            <strong>Theme: Red</strong>
+            <small>#EE6557</small>
+        </li>
+        <li class="accept" data-icon="eye" data-theme="theme.green.css">
+            <strong>Theme: Green</strong>
+            <small>#3FB58E</small>
+        </li>
+        <li class="secondary" data-icon="eye" data-theme="theme.grey.css">
+            <strong>Theme: Grey</strong>
+            <small>#BFBFBF</small>
+        </li>
+    </ul>
+</article>

example/app/articles/touchevents.html

@@ -0,0 +1,5 @@
+<article id="touchevents">
+    <div class="seven rows" id="gestures" style="height: 256px;"></div>
+    <div class="two rows scroll console output" id="console" ></div>
+    <div class="one row console"><a href="#" class="button anchor" data-action="clean_console">Clean Console</a></div>
+</article>

example/app/asides/features.html

@@ -9,18 +9,22 @@
         <ul>
             <!-- Basic Layout -->
             <li class="active" data-view-article="main-article" data-title="Lungo Framework">
-                <strong>Meet the framework</strong>
+                <a href="#">
+                    <strong>Meet the framework</strong>
+                </a>
             </li>
 
             <!-- Layout & Navigation -->
             <li data-view-section="layout" data-async="app/sections/layout.html">
-                <strong>Layout</strong>
-                <div class="tag right">5</div>
+                <a href="#">
+                    <strong>Layout</strong>
+                    <div class="tag right">5</div>
+                </a>
             </li>
 
             <!-- List -->
             <li>
-                <a href="#list" data-router="section" data-async="app/sections/list.html">
+                <a href="#" data-view-article="list" data-async="app/articles/list.html">
                     <strong>Lists</strong>
                     <div class="tag right">22</div>
                 </a>
@@ -28,7 +32,7 @@
 
             <!-- Forms -->
             <li>
-                <a href="#form" data-router="section" data-async="app/sections/form.html">
+                <a href="#" data-view-section="form" data-async="app/sections/form.html">
                     <div class="tag right">8</div>
                     <strong>Form Elements</strong>
                 </a>
@@ -36,7 +40,7 @@
 
             <!-- Asides -->
             <li>
-                <a href="#aside" data-router="section" data-async="app/sections/aside.html">
+                <a href="#" data-view-section="aside" data-async="app/sections/aside.html">
                     <div class="tag right">8</div>
                     <strong>Asides</strong>
                 </a>
@@ -44,7 +48,7 @@
 
             <!-- Menu -->
             <li>
-                <a href="#menu" data-router="section" data-async="app/sections/menu.html">
+                <a href="#" data-view-section="menu" data-async="app/sections/menu.html">
                     <div class="tag right">1</div>
                     <strong>Menu</strong>
                 </a>
@@ -52,7 +56,7 @@
 
             <!-- Data-Attributes -->
             <li>
-                <a href="#data" data-router="section" data-async="app/sections/data-attribute.html">
+                <a href="#" data-view-article="data" data-async="app/articles/data.html">
                     <div class="tag right">9</div>
                     <strong>Data-attributes</strong>
                 </a>
@@ -60,7 +64,7 @@
 
             <!-- Icons -->
             <li>
-                <a href="#icon" data-router="section" data-async="app/sections/icon.html">
+                <a href="#" data-view-article="icons" data-async="app/articles/icon.html">
                     <div class="tag right">109</div>
                     <strong>Icons</strong>
                 </a>
@@ -76,25 +80,23 @@
 
             <!-- Touch Events -->
             <li>
-                <a href="#touchevents" data-router="section">
+                <a href="#" data-view-article="touchevents" data-async="app/articles/touchevents.html">
                     <div class="tag right">19</div>
                     <strong>Touch Events</strong>
                 </a>
             </li>
 
             <!-- Layout Events -->
-            <!--
             <li>
-                <a href="#layoutevents" data-router="section" data-async="app/sections/layoutevents.html">
+                <a href="#" data-view-section="layoutevents" data-async="app/sections/layoutevents.html">
                     <div class="tag right">2</div>
                     <strong>Layout Events</strong>
                 </a>
             </li>
-            -->
 
             <!-- Notifications -->
             <li>
-                <a href="#notification" data-router="section">
+                <a href="#" data-view-article="notification" data-async="app/articles/notification.html">
                     <div class="tag right">8</div>
                     <strong>Notifications</strong>
                 </a>
@@ -102,7 +104,7 @@
 
             <!-- Pull & Refresh -->
             <li>
-                <a href="#pull" data-router="section" >
+                <a href="#" data-view-section="pull" data-async="app/sections/pull.html">
                     <div class="tag right">1</div>
                     <strong>Pull & Refresh</strong>
                 </a>
@@ -110,7 +112,7 @@
 
             <!-- Carousel -->
             <li>
-                <a href="#carousel" data-router="section" >
+                <a href="#" data-view-section="carousel" data-async="app/sections/carousel.html">
                     <div class="tag right">1</div>
                     <strong>Carousel</strong>
                 </a>
@@ -118,7 +120,7 @@
 
             <!-- Environment -->
             <li>
-                <a href="#environment" data-router="article" data-title="Environment">
+                <a href="#" data-view-article="environment" data-async="app/articles/environment.html">
                     <div class="tag right">1</div>
                     <strong>Environment</strong>
                 </a>
@@ -126,7 +128,7 @@
 
             <!-- Buttons & Colours -->
             <li>
-                <a href="#color" data-router="section" data-async="app/sections/color.html">
+                <a href="#" data-view-article="buttons" data-async="app/articles/buttons.html">
                     <div class="tag right">14</div>
                     <strong>Buttons & Colours</strong>
                 </a>
@@ -134,7 +136,7 @@
 
             <!-- Theme roller -->
             <li>
-                <a href="#themeroller" data-router="section" data-async="app/sections/themeroller.html">
+                <a href="#" data-view-article="themeroller" data-async="app/articles/theme.html">
                     <div class="tag right">4</div>
                     <strong>Theme roller</strong>
                 </a>
@@ -142,7 +144,7 @@
 
             <!-- Grid System -->
             <li>
-                <a href="#grid" data-router="section" data-async="app/sections/grid.html">
+                <a href="#" data-view-article="grid" data-async="app/articles/grid.html">
                     <strong>Grid System</strong>
                 </a>
             </li>

example/app/events.carousel.js

@@ -1,8 +0,0 @@
-var carousel_example = Lungo.Element.Carousel($$('[data-control=carousel]')[0], function(index, element) {
-    Lungo.dom("section#carousel .title span").html(index + 1);
-});
-
-Lungo.Events.init({
-    'tap section#carousel > header [data-direction=left]':  carousel_example.prev,
-    'tap section#carousel > header [data-direction=right]': carousel_example.next
-});

example/app/events.notification.js

@@ -1,53 +0,0 @@
-
-Lungo.Events.init({
-    'tap section#notification a[data-action=normal]': function() {
-        Lungo.Notification.show('Title', 'message', 2);
-    },
-
-    'tap section#notification a[data-action=loading]': function() {
-        Lungo.Notification.show();
-        setTimeout(Lungo.Notification.hide, 3000);
-    },
-
-    'tap section#notification a[data-action=success]': function() {
-        Lungo.Notification.success('Title', 'Description', 'message', 2);
-    },
-
-    'tap section#notification a[data-action=error]': function() {
-        Lungo.Notification.error('Title', 'Description', 'message', 2);
-    },
-
-    'tap section#notification a[data-action=confirm]': function() {
-        Lungo.Notification.confirm({
-            icon: 'user',
-            title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
-            accept: {
-                icon: 'checkmark',
-                label: 'Accept',
-                callback: function(){ alert("Yes!"); }
-            },
-            cancel: {
-                icon: 'close',
-                label: 'Cancel',
-                callback: function(){ alert("No!"); }
-            }
-        });
-    },
-
-    'tap section#notification a[data-action=html]': function() {
-        Lungo.Notification.html('<h1>Hello World</h1>', true);
-    },
-
-    'tap section#notification a[data-action=chaining]': function() {
-        Lungo.Notification.show('Title', 'message', 2, function() {
-            Lungo.Notification.error('Title 2', 'Description 2', 'message',  2, function() {
-                Lungo.Notification.show('Title 3', 'Description 3', 'message', false, 2, function() {
-                    Lungo.Notification.html('<h1>Hello World</h1>', true);
-                    // Lungo.Notification.hide();
-                });
-            });
-        });
-    }
-});
-

example/app/events.pull.js

@@ -1,9 +0,0 @@
-var pull_example = new Lungo.Element.Pull('section#pull article', {
-    onPull: "Pull down to refresh",
-    onRelease: "Release to get new data",
-    onRefresh: "Refreshing...",
-    callback: function() {
-        alert("Pull & Refresh completed!");
-        pull_example.hide();
-    }
-});

example/app/events.themeroller.js

@@ -1,7 +0,0 @@
-$$("#themeroller li").tap(function() {
-    var link = $$("#theme-stylesheet");
-    var url = link.attr("href");
-    var new_url = url.split("/").slice(0, -1);
-    new_url.push($$(this).attr("data-theme"));
-    link.attr('href', new_url.join("/"));
-});

example/app/events.touch.js

@@ -1,18 +0,0 @@
-
-["singleTap", "doubleTap", "hold",
-    "swipe", "-swiping", "swipeLeft", "swipeRight", "swipeUp", "swipeDown",
-    "rotate", "rotateLeft", "rotateRight",
-    "pinch", "pinchIn", "pinchOut",
-    "drag", "dragLeft", "dragRight", "dragUp", "dragDown"].forEach(function(type) {
-    $$("section#touchevents #gestures").on(type, function(event) {
-        $$(this).siblings('.console.output').append(' | ' + type);
-    });
-});
-
-$$("[data-action=clean_console]").tap(function(event) {
-    $$('.console.output').html("");
-});
-
-$$("[data-action=twitter]").tap(function(event) {
-    window.open("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", "_blank");
-});

example/app/events.trigger.js

@@ -1,32 +0,0 @@
-
-Lungo.Events.init({
-    'load section#layoutevents': App.triggerCapture,
-    'unload section#layoutevents': App.triggerCapture
-});
-
-Lungo.ready(function() {
-    // Lungo.View.Aside.show('features');
-    App.environment();
-    // Lungo.Router.section("notification");
-
-    // Lungo.Notification.show();
-    // Lungo.Notification.show("Please wait", "user", 2, function(){ alert(1); });
-    // Lungo.Notification.error('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel');
-    // Lungo.Notification.success('Lorem ipsum dolor sit amet, consectetur adipisicing.', "tap to continue", 'cancel', 2, function(){alert(1)});
-    // Lungo.Notification.confirm({
-    //     icon: 'user',
-    //     title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
-    //     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
-    //     accept: {
-    //         icon: 'checkmark',
-    //         label: 'Accept',
-    //         callback: function(){ alert("Yes!"); }
-    //     },
-    //     cancel: {
-    //         icon: 'close',
-    //         label: 'Cancel',
-    //         callback: function(){ alert("No!"); }
-    //     }
-    // });
-
-});

example/app/sections/aside.html

@@ -1,13 +1,13 @@
 <section id="aside" data-transition="slide">
-    <header data-title="Asides">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
+    <header data-title="Asides" data-back="home">
+        <nav class="right">
+            <a href="#" data-view="aside" data-async="app/asides/left.html" data-icon="left" class="button anchor blue">Example of normal aside</a>
+            <a href="#" data-router="aside" data-async="app/asides/right.html" data-icon="right" class="button anchor red">Example of mini right aside</a>
         </nav>
     </header>
     <article id="aside-example" class="active indented">
         <div>
-            <a href="#left" data-router="aside" data-async="app/asides/left.html" data-icon="left" class="button anchor blue">Example of normal aside</a>
-            <a href="#right" data-router="aside" data-async="app/asides/right.html" data-icon="right" class="button anchor red">Example of mini right aside</a>
+
         </div>
     </article>
 </section>

example/app/sections/color.html

@@ -1,26 +0,0 @@
-<section id="color" data-transition="slide">
-    <header data-title="Colors">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
-    <article class="active scroll indented">
-        <div>
-            <h1>Sizes</h1>
-            <p class="margin bottom">
-                <a href="#" class="button small">small</a>
-                <a href="#" class="button">default</a>
-                <a href="#" class="button large">large</a>
-            </p>
-            <a href="#" class="button anchor margin bottom">anchor</a>
-            <h1>Colors</h1>
-            <p>
-                <a href="#" class="button anchor margin bottom">default</a>
-                <a href="#" class="button anchor secondary margin bottom">secondary</a>
-                <a href="#" class="button anchor accept margin bottom">accept</a>
-                <a href="#" class="button anchor cancel margin bottom">cancel</a>
-                <a href="#" class="button anchor margin bottom" disabled=true>disabled</a>
-            </p>
-        </div>
-    </article>
-</section>

example/app/sections/data-attribute.html

@@ -1,58 +0,0 @@
-<section id="data" data-transition="slide">
-    <header data-title="Data Attributes">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
-
-    <article id="data-attributes" class="active list scroll indented">
-        <ul>
-            <li data-icon="user">
-                <strong>data-icon</strong>
-                <small>Creates an icon Lungo vectorized</small>
-            </li>
-
-            <li data-image="http://cdn.tapquo.com/lungo/icon-144.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>
-            <form  data-search="Type your search..."></form>
-
-            <li>
-                <strong>data-progress</strong>
-                <small>Creates a progress element</small>
-            </li>
-            <form data-progress="25%"></form>
-
-            <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>

example/app/sections/form.html

@@ -1,10 +1,7 @@
 <section id="form" data-transition="slide">
-    <header data-title="Form Elements">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
+    <header data-title="Form Elements" data-back="home">
         <nav class="right">
-            <a href="#form-extras" data-router="article" class="button" data-label="Extras"></a>
+            <button data-view-article="form-extras" data-label="Extras" data-article="form-normal"></button>
         </nav>
     </header>
 
@@ -69,7 +66,7 @@
             <br/>
             <input type="range" min="0" max="1" class="checkbox active" value="1">
 
-            <a href="#form-normal" data-router="article" class="button anchor accept" data-label="Return to normal Elements"></a>
+            <button data-view-article="form-normal" class="anchor accept" data-label="Return to normal Elements"></button>
         </form>
     </article>
 </section>

example/app/sections/grid.html

@@ -1,28 +0,0 @@
-<section id="grid" data-transition="slide">
-    <header data-title="Grid System">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
-
-    <article id="grid-basic" class="active"  style="font-size:0.7em;">
-        <div class="four rows">class="four rows"</div>
-        <div class="one row blue">class="one row blue"</div>
-        <div class="one row">class="one row"</div>
-        <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>

example/app/sections/icon.html

@@ -1,632 +0,0 @@
-<section id="icon" data-transition="slide">
-    <header class="extended" data-title="Icons Repository">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
-
-    <nav class="groupbar">
-        <a href="#icons-default" data-router="article" data-label="Normal" data-count="72" class="active"></a>
-        <a href="#icons-brands" data-router="article" data-label="Brands" data-count="37" ></a>
-    </nav>
-
-    <article id="icons-default" class="active 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>

example/app/sections/layout.html

@@ -1,11 +1,11 @@
 <section id="layout" data-transition="slide">
     <header data-title="Layout" class="extended" data-back="home">
         <nav class="right">
-            <a href="#" data-view-section="splash" data-async="app/sections/splash.html" data-icon="lock" class="button"></a>
+            <button data-view-section="splash" data-async="app/sections/splash.html" data-label="splash"></button>
         </nav>
     </header>
 
-    <nav class="groupbar">
+    <nav data-control="groupbar">
         <a href="#" data-view-article="layout-art1" data-label="Profile" class="active"></a>
         <a href="#" data-view-article="layout-art2" data-label="Inbox" data-count="19"></a>
         <a href="#" data-view-article="layout-art3" data-label="Map"></a>

example/app/sections/layoutevents.html

@@ -1,11 +1,6 @@
 <section id="layoutevents" data-transition="slide">
-    <header data-title="Layout Events">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
-
-    <article class="active list indented">
+    <header data-title="Layout Events" data-back="home"></header>
+    <article class="list indented">
         <ul>
             <li class="dark">
                 <strong>Lungo gives you the possibility to subscribe to events generated by your layout, for example you'll know when a section/article is loaded or unloaded.</strong>

example/app/sections/menu.html

@@ -1,19 +1,30 @@
 <section id="menu" data-transition="slide">
     <header data-title="data-control=menu">
-        <nav class="left">
-            <a href="#options" data-router="menu" data-icon="map"></a>
+        <nav>
+            <a href="#" data-view-menu="options" data-icon="map"></a>
+        </nav>
+        <nav class="right">
+            <a href="#" data-view-menu="options-icons" data-icon="map"></a>
         </nav>
     </header>
 
     <nav id="options" data-control="menu">
-        <a href="#home-menu" data-router="article" data-icon="map">Home</a>
-        <a href="#explore-menu" data-router="article" data-icon="eye">Explore</a>
-        <a href="#activity-menu" data-router="article" data-icon="chat">Activity</a>
-        <a href="#profile-menu" data-router="article" data-icon="user">Profile</a>
-        <a href="#back" data-router="section" data-icon="home">Return</a>
+        <a href="#" data-view-article="home-menu" data-icon="map">Home</a>
+        <a href="#" data-view-article="explore-menu" data-icon="eye">Explore</a>
+        <a href="#" data-view-article="activity-menu" data-icon="chat">Activity</a>
+        <a href="#" data-view-article="profile-menu" data-icon="user">Profile</a>
+        <a href="#" data-view-section="back" data-icon="left">Return</a>
+    </nav>
+
+    <nav id="options-icons" data-control="menu" class="icons">
+        <a href="#" data-view-article="home-menu" data-icon="map">Home</a>
+        <a href="#" data-view-article="explore-menu" data-icon="eye">Explore</a>
+        <a href="#" data-view-article="activity-menu" data-icon="chat">Activity</a>
+        <a href="#" data-view-article="profile-menu" data-icon="user">Profile</a>
+        <a href="#" data-view-section="back" data-icon="left">Return</a>
     </nav>
 
-    <article id="home-menu" class="active indented">
+    <article id="home-menu" class="indented">
         Home
     </article>
     <article id="explore-menu" class="indented">
@@ -25,4 +36,5 @@
     <article id="profile-menu" class="indented">
         Profile
     </article>
+
 </section>

example/app/sections/notification.html

@@ -1,21 +0,0 @@
-<section id="notification" data-transition="slide">
-    <header data-title="Notifications">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
-
-    <article class="active list scroll indented">
-        <div>
-            <a href="#" class="button anchor" data-label="Normal" data-action="normal"></a>
-            <a href="#" class="button anchor" data-label="Loading" data-label="Loading" data-action="loading"></a>
-            <a href="#" class="button anchor" data-label="Confirm" data-action="confirm"></a>
-            <a href="#" class="button anchor" data-label="Html" data-action="html"></a>
-
-            <a href="#" class="button anchor accept" data-label="Success" data-action="success"></a>
-            <a href="#" class="button anchor cancel" data-label="Error" data-action="error"></a>
-
-            <a href="#" class="button anchor " data-label="Chaining" data-action="chaining"></a>
-        </div>
-    </article>
-</section>

example/app/sections/pull.html

@@ -1,9 +1,5 @@
 <section id="pull" data-pull="normal" data-transition="slide">
-    <header data-title="Pull & Refresh">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
+    <header data-title="Pull & Refresh" data-back="home"></header>
 
     <article class="active list indented">
         <ul>
@@ -30,7 +26,6 @@
                 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>

example/app/sections/themeroller.html

@@ -1,30 +0,0 @@
-<section id="themeroller" data-transition="slide">
-    <header data-title="Theme roller">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
-
-    <article class="active list indented">
-        <ul>
-             <li class="theme" data-icon="eye" data-theme="theme.lungo.css">
-                <strong>Default theme</strong>
-                <small>This element has an associated event</small>
-            </li>
-            <li class="cancel" data-icon="eye" data-theme="theme.red.css">
-                <strong>Theme: Red</strong>
-                <small>#EE6557</small>
-            </li>
-            <li class="accept" data-icon="eye" data-theme="theme.green.css">
-                <strong>Theme: Green</strong>
-                <small>#3FB58E</small>
-            </li>
-            <li class="secondary" data-icon="eye" data-theme="theme.grey.css">
-                <strong>Theme: Grey</strong>
-                <small>#BFBFBF</small>
-            </li>
-        </ul>
-
-    </article>
-
-</section>

example/app/sections/touchevents.html

@@ -1,14 +0,0 @@
-<section id="touchevents" data-transition="slide">
-    <header data-title="Test Gestures">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
-
-    <article id="example" class="active">
-        <div class="seven rows" id="gestures"></div>
-        <div class="two rows scroll console output" id="console" ></div>
-        <div class="one row console"><a href="#" class="button anchor" data-action="clean_console">Clean Console</a></div>
-
-    </article>
-</section>

example/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);

example/flexbox.html

@@ -46,7 +46,7 @@
             </nav>
         </header>
 
-        <nav id="options" data-control="menu" class="iconss ">
+        <nav id="options" data-control="menu" class="icons">
             <a href="#" data-view-article="folks" data-icon="users" data-title="Folks">Folks</a>
             <a href="#" data-view-article="products" data-icon="eye" data-title="Explore">Explore</a>
             <a href="#" data-view-article="article" data-icon="chat">Activity</a>

example/index.html

@@ -45,21 +45,22 @@
              and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
     <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="components/lungo/lungo.css">
-    <link rel="stylesheet" href="components/lungo/lungo.icon.css">
-    <link rel="stylesheet" href="components/lungo/lungo.icon.brand.css">
-    <link rel="stylesheet" href="components/lungo/lungo.css">
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.icon.css">
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.icon.brand.css">
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
-    <link rel="stylesheet" href="components/lungo/theme.lungo.css" id="theme-stylesheet">
+    <link rel="stylesheet" href="components/lungo.brownie/theme.lungo.css" id="theme-stylesheet">
 
     <!-- App Stylesheet -->
     <link rel="stylesheet" href="stylesheets/app.css">
 </head>
 
 <body class="app">
+
     <section id="main" data-transition="" data-aside="features">
         <header>
-            <nav class="left">
+            <nav>
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
             </nav>
             <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
@@ -96,47 +97,20 @@
                 </li>
             </ul>
         </article>
-
-        <article id="environment" class="list">
-            <ul>
-                <li id="os" class="dark" data-icon="mobile">
-                    <strong>Desktop</strong>
-                    <small>unknown</small>
-                </li>
-                <li id="resolution" data-icon="picture">
-                    <strong>0p x 0p</strong>
-                    <small>Screen Resolution</small>
-                </li>
-                <li id="navigator" data-icon="brand html5">
-                    <strong>webkit</strong>
-                    <small>Mobile: </small>
-                </li>
-            </ul>
-        </article>
     </section>
 
     <!-- Lungo dependencies -->
     <script src="components/quojs/quo.js"></script>
-    <script src="components/lungo/lungo.js"></script>
+    <script src="components/lungo.brownie/lungo.js"></script>
 
     <!-- LungoJS - Sandbox App -->
     <script>
         Lungo.init({
             name: 'Kitchen Sink',
-            version: '2.1',
-            resources: ['app/sections/pull.html',
-                        'app/sections/notification.html',
-                        'app/sections/carousel.html',
-                        'app/sections/touchevents.html',
-                        'app/asides/features.html']
+            version: '2.1.0222',
+            resources: ['app/asides/features.html']
         });
     </script>
     <script src="app/app.js"></script>
-    <script src="app/events.notification.js"></script>
-    <script src="app/events.touch.js"></script>
-    <script src="app/events.pull.js"></script>
-    <script src="app/events.carousel.js"></script>
-    <script src="app/events.trigger.js"></script>
-    <script src="app/events.themeroller.js"></script>
 </body>
 </html>