Merge from branch 1.0.4

CHANGES.md

@@ -1,6 +1,22 @@
 # LungoJS
 ### HTML5 Mobile Framework, and stuff.
 
+## Changes in Version 1.0.4
+
+- Optimized layout: No JavaScript resizes (full CSS3 selectors)
+- Better transformations between <sections> (with easeInOutCubic transform)
+- New Data-Attribute "count" (API JavaScript support)
+- New Optimized .toolbar
+- New system of forms with <ul> element
+- New <article> classes: indented & rounded
+- Discontinued <scroll> element becoming in the new .scrollable class
+- New Kitchen Sink 1.0.4 (in GitHub Repository)
+- Remove iScroll reference, now LungoJS uses iScroll-Lite
+- Remove Jasmine Test Framework
+- BUG Fixed:
+    - Scroll with form elements
+    - Multiple <aside>s
+
 ## Changes in Version 1.0.3
 
 - Fixed error in method List.create() when result is a object

LICENSE.txt

@@ -4,7 +4,7 @@ Copyright (c) 2011 TapQuo Inc (Javier Jimenez Villar)
 ===============================================================================
 
 OPEN SOURCE LICENSE FOR LUNGOJS
-Version 1.0.3
+Version 1.0.4
 
 LungoJS is an avid supporter of open source software. This is the appropriate
 option if you are creating an open source application with a license compatible
@@ -31,7 +31,7 @@ THE SOFTWARE IS LICENSED, NOT SOLD.
 ===============================================================================
 
 OPEN SOURCE LICENSE FAQ
-Version 1.0.3
+Version 1.0.4
 
 This document is for guidance purposes only and is not a legal document and is
 not legally binding. We encourage you to read the GPL v3 and the Quick Guide to
@@ -42,7 +42,7 @@ advice.
 ===============================================================================
 
 LUNGOJS AND THE GPL v3
-Version 1.0.3
+Version 1.0.4
 
 -------------------------------------------------------------------------------
 What is the GPL v3?

examples/kitchen-sink/app/app.js

@@ -0,0 +1,16 @@
+var App = (function(lng, undefined) {
+
+    lng.App.init({
+        name: 'Kitchen Sink',
+        version: '1.0.4'
+    });
+
+    lng.View.Element.count('#btn-one', 7);
+    lng.View.Element.count('#btn-three', 0);
+    lng.View.Element.count('#aside-one', 17);
+
+    return {
+
+    };
+
+})(LUNGO);

examples/kitchen-sink/app/data.js

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

examples/kitchen-sink/app/events.js

@@ -0,0 +1,51 @@
+App.Events = (function(lng, undefined) {
+
+    lng.Dom.Event.live('#event_touchstart', 'TOUCH_START', function(event) {
+        alert("TOUCH_START!");
+    });
+    
+    lng.Dom.Event.live('#event_touchend', 'TOUCH_END', function(event) {
+        alert("TOUCH_END!");
+    });
+    
+    lng.Dom.Event.live('#event_touchmove', 'TOUCH_MOVE', function(event) {
+        alert("TOUCH_MOVE!");
+    });
+    
+    lng.Dom.Event.live('#event_tap', 'TAP', function(event) {
+        alert("TAP!");
+    });
+    
+    lng.Dom.Event.live('#event_doubletap', 'DOUBLE_TAP', function(event) {
+        alert("DOUBLE_TAP!");
+    });
+    
+    lng.Dom.Event.live('#swipe', 'SWIPE', function(event) {
+        alert("SWIPE!");
+    });
+    
+    lng.Dom.Event.live('#swipe_left', 'SWIPE_LEFT', function(event) {
+        alert("SWIPE_LEFT!");
+    });
+    
+    lng.Dom.Event.live('#swipe_right', 'SWIPE_RIGHT', function(event) {
+        alert("SWIPE_RIGHT!");
+    });
+    
+    lng.Dom.Event.live('#swipe_up', 'SWIPE_UP', function(event) {
+        alert("SWIPE_UP!");
+    });
+    
+    lng.Dom.Event.live('#swipe_down', 'SWIPE_DOWN', function(event) {
+        alert("SWIPE_DOWN!");
+    });
+
+    lng.Dom.Event.delegate('body', '#load_list', 'TAP', function(event) {
+        App.Services.getMockList();
+    });
+
+    lng.Dom.Event.live('#load_scroll_mocks', 'TAP', function(event) {
+        App.View.scroll_mockup();
+    });
+
+})(LUNGO);

examples/kitchen-sink/app/services.js

@@ -0,0 +1,50 @@
+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 = {
+            container_id: 'list-plain',
+            template_id: 'profile-tmp',
+            data: profiles
+        };
+        lng.View.Template.List.create(parameters);
+
+        //Indented List
+        //parameters.container_id = 'list-indented-container';
+        //lng.View.Template.List.create(parameters);
+        lng.View.Template.Binding.create('list-indented-container', 'profile-tmp', profiles);
+
+        //Rounded List
+        //parameters.container_id = 'list-rounded';
+        //lng.View.Template.List.create(parameters);
+        lng.View.Template.Binding.create('list-rounded-container', 'profile-tmp', profiles);
+
+        //Ordered List
+        parameters.container_id = 'list-ordered';
+        parameters.order_field = 'name';
+        parameters.order_type = 'asc';
+        lng.View.Template.List.create(parameters);
+    };
+
+    mockProfiles();
+
+    return {
+        mockProfiles: mockProfiles
+    }
+
+})(LUNGO, App);

examples/kitchen-sink/app/view.js

@@ -0,0 +1,28 @@
+App.View = (function(lng, App, undefined) {
+
+    lng.View.Template.create(
+        'profile-tmp',
+        '<li class="{{anchor}}">\
+                <img src="{{avatar}}" />\
+                <div class="onright">{{name}}</div>\
+                {{name}}\
+                <small>{{description}}</small>\
+            </a>\
+        </li>'
+    );
+
+    var scroll_mockup = function(){
+        var _markup = '';
+        for (var i=0; i < 32; i++) {
+            _markup += '<li>'+i+'</li>';
+        }
+
+        lng.View.Scroll.update('scroll_vertical', _markup);
+        lng.View.Scroll.update('scroll_horizontal', _markup);
+    }
+
+    return{
+        scroll_mockup: scroll_mockup
+    }
+
+})(LUNGO, App);

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

@@ -0,0 +1,8 @@
+pre {
+    font-weight: normal;
+    font-size: 12px;
+    background: rgba(255,255,255,0.5);
+    border: 1px solid rgba(0,0,0,0.5);
+    margin-top: 10px;
+    padding: 10px;
+}

examples/kitchen-sink/index.html

@@ -0,0 +1,592 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>LungoJS - Kitchen Sink</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="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <!-- 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">
+    <!-- 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.list.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.theme.default.css">
+    <!-- App Stylesheet -->
+    <link rel="stylesheet" href="assets/stylesheets/app.css">
+
+</head>
+
+<body class="app">
+    <section id="login">
+        <article class="splash">
+            <div class="indented">
+                <h1>Kitchen<span class="semi-opacity">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 green" data-icon="key">Go to Kitchen Sink!</a>
+                <div class="copyright">Copyright TapQuo Inc, 2011</div>
+            </div>
+        </article>
+    </section>
+
+    <!-- ============================= kitchen-sink ============================= -->
+
+    <section id="kitchen-sink">
+        <header data-title="LungoJS Kitchen Sink">
+            <a href="#" class="button onleft aside" data-target="aside" data-icon="note"></a>
+        </header>
+
+        <aside id="kitchen-sink-scroll" class="scrollable">
+            <div>
+                <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
+                <a href="#authors" data-target="article" data-icon="group">Author & Contributors</a>
+                <a href="#navigation" data-target="section" data-icon="wifi">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="picture" data-count="6">Data Attributes</a>
+                <a href="#forms" data-target="section" data-icon="write" data-count="7">Form Elements</a>
+                <a href="#lists" data-target="section" data-icon="note" data-count="5">Lists</a>
+            </div>
+        </aside>
+
+        <article id="welcome" class="list scrollable">
+            <div class="indented">
+                <h1 class="title" data-icon="home">Welcome to LungoJS KitchenSink</h1>
+                <p class="text">
+                    The first Mobile Framework 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>
+
+        <article id="authors" class="list scrollable">
+            <div class="indented">
+                <ul>
+                    <li class="anchor" data-icon="key">Author</li>
+                    <li data-image="assets/images/avatars/soyjavi.jpg">
+                        Javi Jim&eacute;nez Villar
+                        <small>CEO & Creative Lead at Tapquo</small></li>
+                </ul>
+
+                <ul>
+                    <li class="anchor" data-icon="key">CoreTeam</li>
+                    <li data-image="assets/images/avatars/pasku.jpg">
+                        Guillermo Pascual
+                        <small>@pasku1</small></li>
+                    <li data-image="assets/images/avatars/ikalbeniz.jpg">
+                        Iker Perez Albeniz
+                        <small>@ikalneniz</small></li>
+                </ul>
+
+                <ul>
+                    <li class="anchor" data-icon="key">Contributors</li>
+                    <li 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
+                        <small>jorgecasar</small></li>
+                    <li 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
+                        <small>daithiw44</small></li>
+                    <li 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
+                        <small>GermanDZ</small></li>
+                    <li 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
+                        <small>nickel</small></li>
+                    <li 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
+                        <small>johnyma22</small></li>
+                </ul>
+            </div>
+        </article>
+
+        <!-- ============================= buttons ============================= -->
+
+        <article id="buttons" class="scrollable">
+            <div class="indented">
+                <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" data-icon="twitter">twitter</a>
+                <a href="#" class="button big facebook" data-icon="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="anchor mini">anchor</li>
+                    <li data-icon="box mini">box</li>
+                    <li data-icon="cloudup mini">cloudup</li>
+                    <li data-icon="deny mini">deny</li>
+                    <li data-icon="storm mini">storm</li>
+                    <li data-icon="feed mini">feed</li>
+                    <li data-icon="group mini">group</li>
+                    <li data-icon="help mini">help</li>
+                    <li data-icon="info mini">info</li>
+                    <li data-icon="join mini">join</li>
+                    <li data-icon="heart mini">heart</li>
+                    <li data-icon="index mini">index</li>
+                    <li data-icon="music mini">music</li>
+                    <li data-icon="note mini">note</li>
+                    <li data-icon="folder mini">folder</li>
+                    <li data-icon="pencil mini">pencil</li>
+                    <li data-icon="chat mini">chat</li>
+                    <li data-icon="reset mini">reset</li>
+                    <li data-icon="search mini">search</li>
+                    <li data-icon="time mini">time</li>
+                    <li data-icon="u mini">u</li>
+                    <li data-icon="camera mini">camera</li>
+                    <li data-icon="message mini">message</li>
+                    <li data-icon="setting mini">setting</li>
+                    <li data-icon="config mini">config</li>
+                    <li data-icon="label mini">label</li>
+
+                    <li data-icon="link mini">link</li>
+                    <li data-icon="twitter mini">twitter</li>
+                    <li data-icon="cloud mini">cloud</li>
+                    <li data-icon="cancel mini">cancel</li>
+                    <li data-icon="view mini">view</li>
+                    <li data-icon="document mini">document</li>
+                    <li data-icon="earth mini">earth</li>
+                    <li data-icon="home mini">home</li>
+                    <li data-icon="inbox mini">inbox</li>
+                    <li data-icon="compact mini">compact</li>
+                    <li data-icon="key mini">key</li>
+                    <li data-icon="radar mini">radar</li>
+                    <li data-icon="mail mini">mail</li>
+                    <li data-icon="wallpaper mini">wallpaper</li>
+                    <li data-icon="suitcase mini">suitcase</li>
+                    <li data-icon="picture mini">picture</li>
+                    <li data-icon="on mini">on</li>
+                    <li data-icon="external mini">external</li>
+                    <li data-icon="star mini">star</li>
+                    <li data-icon="plane mini">plane</li>
+                    <li data-icon="user mini">user</li>
+                    <li data-icon="video mini">video</li>
+                    <li data-icon="write mini">write</li>
+                    <li data-icon="truck mini">truck</li>
+                    <li data-icon="graph mini">graph</li>
+                    <li data-icon="piechart mini">piechart</li>
+
+                    <li data-icon="expand mini">expand</li>
+                    <li data-icon="redo mini">redo</li>
+                    <li data-icon="accept mini">accept</li>
+                    <li data-icon="check mini">check</li>
+                    <li data-icon="play mini">play</li>
+                    <li data-icon="pause mini">pause</li>
+                    <li data-icon="stop mini">stop</li>
+                    <li data-icon="forward mini">forward</li>
+                    <li data-icon="backward mini">backward</li>
+                    <li data-icon="player mini">player</li>
+                    <li data-icon="refresh mini">refresh</li>
+                    <li data-icon="minus mini">minus</li>
+                    <li data-icon="battery mini">battery</li>
+                    <li data-icon="left mini">left</li>
+                    <li data-icon="right mini">right</li>
+                    <li data-icon="calendar mini">calendar</li>
+                    <li data-icon="shuffle mini">shuffle</li>
+                    <li data-icon="wifi mini">wifi</li>
+                    <li data-icon="dashboard mini">dashboard</li>
+                    <li data-icon="points mini">points</li>
+                    <li data-icon="printer mini">printer</li>
+
+                    <li data-icon="download mini">download</li>
+                    <li data-icon="exclamation mini">exclamation</li>
+                    <li data-icon="pushpin mini">pushpin</li>
+                    <li data-icon="trash mini">trash</li>
+                    <li data-icon="cart mini">cart</li>
+                    <li data-icon="saving mini">saving</li>
+                    <li data-icon="flag mini">flag</li>
+                    <li data-icon="add mini">add</li>
+                    <li data-icon="multiply mini">multiply</li>
+                    <li data-icon="lock mini">lock</li>
+                    <li data-icon="unlock mini">unlock</li>
+                    <li data-icon="substract mini">substract</li>
+                    <li data-icon="plus mini">plus</li>
+                    <li data-icon="up mini">up</li>
+                    <li data-icon="down mini">down</li>
+                    <li data-icon="viewport mini">viewport</li>
+                    <li data-icon="alarm mini">alarm</li>
+                    <li data-icon="quote mini">quote</li>
+                    <li data-icon="volume_down mini">volume_down</li>
+                    <li data-icon="volume_up mini">volume_up</li>
+                    <li data-icon="help mini">help</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="onright" 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>
+
+    </section>
+
+    <!-- ============================= navigation ============================= -->
+
+    <section id="navigation">
+        <header data-back="home" data-title="Navigation">
+            <nav class="onright">
+                <a href="#back" data-target="section" data-icon="left"></a>
+                <a href="#navigation-secondary" data-target="section" data-icon="right"></a>
+            </nav>
+        </header>
+
+        <footer class="toolbar">
+            <nav>
+                <a href="#nav-1" data-target="article" class="current" data-icon="user"></a>
+                <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17"></a>
+                <a href="#nav-3" data-target="article" data-icon="mail"></a>
+                <a href="#nav-4" data-target="article" data-icon="twitter"></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>
+
+
+    <!-- ============================= navigation-extra ============================= -->
+
+    <section id="navigation-secondary">
+        <header data-back="left" data-title="Navigation"></header>
+
+        <footer>
+            <nav class="onright">
+                <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>
+
+    <!-- ============================= buttons extra ============================= -->
+
+    <section id="buttons-extra">
+        <header data-back="home" data-title="Example of buttons">
+            <a href="#" class="button red onright" data-icon="add">With icon</a>
+            <a href="#" class="button arcticblue onright">Text</a>
+        </header>
+
+        <footer>
+            <a href="#" class="button blue onleft">Text</a>
+            <a href="#" class="button yellow onleft" data-icon="left"></a>
+            <a href="#" class="button orange onright" data-icon="right">onright</a>
+        </footer>
+
+        <article></article>
+    </section>
+
+
+
+    <!-- ============================= header footer ============================= -->
+
+    <!-- ============================= forms ============================= -->
+
+    <section id="forms">
+        <header data-back="home" data-title="Form Elements">
+            <a href="#" class="button onleft aside" data-target="aside" data-icon="note"></a>
+        </header>
+
+        <aside id="forms-scroll" class="scrollable">
+            <div class="container">
+                <a href="#form-input" data-target="article" class="current" data-title="Inputs" data-icon="write">Inputs</a>
+                <a href="#form-search" data-target="article" data-title="Search" data-icon="search">Search</a>
+                <a href="#form-textarea" data-target="article" data-title="Textarea" data-icon="write">Textarea</a>
+                <a href="#form-select" data-target="article" data-title="Select" data-icon="box">Select</a>
+                <a href="#form-checkbox" data-target="article" data-title="Checkbox" data-icon="accept">Checkbox</a>
+                <a href="#form-radio" data-target="article" data-title="Radio" data-icon="radar">Radio</a>
+                <a href="#form-label" data-target="article" data-title="Labels, Anchors & Tips" data-icon="label">Labels, Anchors...</a>
+            </div>
+        </aside>
+
+        <article id="form-input" class="list">
+            <div class="container indented">
+                <ul class="form">
+                    <li class="anchor" data-icon="write">Example of inputs</li>
+                    <li>
+                        <label>type="text"</label>
+                        <input type="text" placeholder="Input text"/>
+                    </li>
+                    <li>
+                        <label>type="password"</label>
+                        <input type="password" placeholder="Input password"/>
+                    </li>
+                </ul>
+            </div>
+        </article>
+
+        <article id="form-search" class="list">
+            <div class="container indented">
+                <ul class="form">
+                    <li class="anchor" data-icon="write">Example of search</li>
+                    <li data-search="Type a search..."></li>
+                    <li class="tip darker" data-icon="help mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
+                </ul>
+            </div>
+        </article>
+
+        <article id="form-textarea" class="list">
+            <div class="container indented">
+                <ul class="form">
+                    <li class="anchor" data-icon="write">Example of textarea</li>
+                    <li><textarea placeholder="Textarea sample"></textarea></li>
+                </ul>
+            </div>
+        </article>
+
+        <article id="form-select" class="list">
+            <div class="container indented">
+                <ul class="form">
+                    <li class="anchor" data-icon="write">Example of select</li>
+                    <li>
+                        <label>Select a number:</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="tip darker" data-icon="help mini">It's a special form element you must set the label with class "select"</li>
+                </ul>
+            </div>
+        </article>
+
+        <article id="form-checkbox" class="list">
+            <div class="container indented">
+                <ul class="form">
+                    <li class="anchor" data-icon="write">Example of checkbox</li>
+                    <li style="height: 32px;">
+                        <label class="onleft" data-icon="twitter"></label>
+                        <label class="checkbox onleft"><input type="checkbox" id="checkbox-0"/></label>
+                    </li>
+                </ul>
+            </div>
+        </article>
+
+        <article id="form-radio" class="list">
+            <div class="container indented">
+                <ul class="form">
+                    <li class="anchor" data-icon="write">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-radio" class="list">
+            <div class="container indented">
+                <ul class="form">
+                    <li class="anchor" data-icon="write">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-label" class="list scrollable">
+            <div class="container indented" style="height: 512px;">
+                <h1 class="title">Tips examples</h1>
+                <ul class="form">
+                    <li class="anchor">Examples of tips</li>
+                    <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                    <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                    <li class="tip darker" data-icon="home mini">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>
+
+                <h1 class="title">Anchor & Label example</h1>
+                <ul class="form">
+                    <li class="anchor" data-icon="home">Example of anchor</li>
+                    <li><label>Example of label</label></li>
+                </ul>
+            </div>
+        </article>
+    </section>
+
+    <!-- ============================= lists ============================= -->
+
+    <section id="lists">
+        <header data-back="home" data-title="List"></header>
+        <footer class="toolbar">
+            <nav>
+                <a href="#list-plain" data-target="article" class="current" data-title="Normal List" data-icon="home"></a>
+                <a href="#list-ordered" data-target="article" data-title="Ordered List" data-icon="storm"></a>
+                <a href="#list-indented" data-target="article" data-title="Indented List" data-icon="stop"></a>
+                <a href="#list-rounded" data-target="article" data-title="Rounded List" data-icon="note"></a>
+                <a href="#list-grouped" data-target="article" data-title="Grouped List" data-icon="group"></a>
+            </nav>
+        </footer>
+
+        <article id="list-plain" class="list"></article>
+        <article id="list-ordered" class="list"></article>
+        <article id="list-indented" class="list scrollable">
+            <div class="indented"><ul id="list-indented-container"></ul></div>
+        </article>
+        <article id="list-rounded" class="list rounded scrollable">
+            <div class="indented"><ul id="list-rounded-container"></ul></div>
+        </article>
+        <article id="list-grouped" class="list">Coming Soon...</article>
+    </section>
+
+    <!-- ============================= forms ============================= -->
+
+    <!--
+    <section id="settings">
+        <header data-back="home" data-title="Settings">
+            <nav class="onright">
+                <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>
+    -->
+
+
+    <!-- Third parties dependencies -->
+    <script src="../../src/lib/zepto.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.Environment.js" ></script>
+    <script src="../../src/Lungo.Core.js"></script>
+    <script src="../../src/Lungo.Events.js"></script>
+    <script src="../../src/Lungo.Service.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>
+    <script src="../../src/view/Lungo.View.Template.List.js"></script>
+    <script src="../../src/dom/Lungo.Dom.js"></script>
+    <script src="../../src/dom/Lungo.Dom.Event.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/boot/Lungo.Boot.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 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>
+
+
+
+</body>
+</html>

examples/release-test/app/app.js

@@ -0,0 +1,14 @@
+var App = (function(lng, undefined) {
+
+    //Define your LungoJS Application Instance
+
+    lng.App.init({
+        name: 'Release-Test',
+        version: '1.0.4'
+    });
+
+    return {
+
+    };
+
+})(LUNGO);

examples/release-test/app/data.js

@@ -0,0 +1,7 @@
+App.Data = (function(lng, app, undefined) {
+
+    return {
+
+    }
+
+})(LUNGO, App);

examples/release-test/app/events.js

@@ -0,0 +1,7 @@
+App.Events = (function(lng, app, undefined) {
+
+    return {
+
+    }
+
+})(LUNGO, App);

examples/release-test/app/services.js

@@ -0,0 +1,7 @@
+App.Services = (function(lng, app, undefined) {
+
+    return {
+
+    }
+
+})(LUNGO, App);

examples/release-test/app/view.js

@@ -0,0 +1,7 @@
+App.View = (function(lng, app, undefined) {
+
+    return{
+
+    }
+
+})(LUNGO, App);

examples/release-test/index.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html manifest="index.appcache">
+<head>
+    <meta charset="utf-8">
+    <title>LungoJS</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="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <!-- 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">
+    <!-- Main Stylesheet -->
+    <link rel="stylesheet" href="../../release/lungo-1.0.4.min.css">
+    <link rel="stylesheet" href="../../release/lungo-1.0.4.min.icons.css">
+    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
+</head>
+
+<body class="app">
+    <!--
+        First, you have to do is create a LungoJS Application instance in the file app.js.
+        ...and use a Webkit browser as Chrome or Safari.
+    -->
+    <section id="hello_world">
+        <header data-title="Hello world!"></header>
+
+        <footer></footer>
+
+        <aside></aside>
+
+        <article></article>
+    </section>
+
+    <!-- LungoJS (Production mode) -->
+    <script src="../../release/lungo-1.0.4.packed.js"></script>
+    <!-- LungoJS - Sandbox App -->
+    <script src="app/app.js"></script>
+    <script src="app/data.js"></script>
+    <script src="app/events.js"></script>
+    <script src="app/services.js"></script>
+    <script src="app/view.js"></script>
+</body>
+</html>

examples/todo.js/index.html

@@ -18,7 +18,8 @@
     <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
     <link rel="apple-touch-startup-image" href="assets/images/default.png">
     <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="../../release/lungo-1.0.3.min.css">
+    <link rel="stylesheet" href="../../release/lungo-1.0.4.min.css">
+    <link rel="stylesheet" href="../../release/lungo-1.0.4.min.icons.css">
     <link rel="stylesheet" href="../../release/lungo.theme.default.css">
     <!-- Sugars :) -->
     <link rel="stylesheet" href="assets/sugars/lungo.sugar.growl.css">
@@ -128,7 +129,7 @@
 	</section>
 
     <!-- LungoJS (Production mode) -->
-    <script src="../../release/lungo-1.0.3.packed.js"></script>+
+    <script src="../../release/lungo-1.0.4.packed.js"></script>
 
     <script src="assets/sugars/lungo.sugar.growl.js"></script>
     <!-- LungoJS - Sandbox App -->

release/LICENSE.txt

@@ -4,7 +4,7 @@ Copyright (c) 2011 TapQuo Inc (Javier Jimenez Villar)
 ===============================================================================
 
 OPEN SOURCE LICENSE FOR LUNGOJS
-Version 1.0.3
+Version 1.0.4
 
 LungoJS is an avid supporter of open source software. This is the appropriate
 option if you are creating an open source application with a license compatible
@@ -31,7 +31,7 @@ THE SOFTWARE IS LICENSED, NOT SOLD.
 ===============================================================================
 
 OPEN SOURCE LICENSE FAQ
-Version 1.0.3
+Version 1.0.4
 
 This document is for guidance purposes only and is not a legal document and is
 not legally binding. We encourage you to read the GPL v3 and the Quick Guide to
@@ -42,7 +42,7 @@ advice.
 ===============================================================================
 
 LUNGOJS AND THE GPL v3
-Version 1.0.3
+Version 1.0.4
 
 -------------------------------------------------------------------------------
 What is the GPL v3?

release/lungo.theme.default.css

@@ -0,0 +1,166 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+.app {
+  background: #000000;
+}
+/* @group <header> & <footer> & <article> */
+header {
+  background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
+  border-top: 1px solid #6dc0a1;
+  border-bottom: 1px solid #063322;
+}
+footer {
+  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
+  border-top: 1px inset #1c1c1c;
+}
+.title {
+  color: #fff;
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
+}
+article {
+  background-color: #e2e2e2;
+}
+article .title {
+  color: #797979;
+  text-shadow: 0px 1px 0px #fff;
+}
+/* @end */
+/* @group <nav> */
+nav a {
+  color: rgba(0, 0, 0, 0.5);
+}
+nav a.current {
+  color: #fff;
+}
+.toolbar a.current {
+  background: #1c1c1c;
+  box-shadow: inset 0px 0px 8px #101010;
+  text-shadow: 0px 1px 4px #000;
+}
+/* @end */
+/* @group <aside> */
+aside {
+  background: #252525;
+}
+aside a {
+  color: #fff;
+  text-shadow: 0px 1px 0px #000;
+  border-bottom: 1px inset #101010;
+  border-top: 1px inset #868686;
+}
+aside a.current {
+  background: #1c1c1c;
+  box-shadow: inset 0px 0px 8px #101010;
+  border-top: 1px inset #1c1c1c;
+}
+aside a .icon {
+  text-shadow: none;
+  color: #7a7a7a;
+}
+aside .anchor {
+  background: #101010;
+  color: #7a7a7a;
+}
+aside ~ article {
+  box-shadow: -1px 0px 4px #000000;
+}
+/* @end */
+/* @group .list */
+.list, .list li:not(.toolbar) a {
+  color: #333;
+}
+.list li {
+  background: #fff;
+  border-bottom: 1px inset #e6e6e6;
+}
+.list li:last-child {
+  border-bottom: none;
+}
+.indented ul {
+  border: 1px solid #c5c5c5;
+}
+.list .darker {
+  background-color: #2c2c2d;
+  color: #fff;
+  text-shadow: 0px 1px 0px #000;
+}
+.list li.darker a {
+  color: #fff !important;
+}
+.list .dark {
+  background-color: #f4f4f4;
+  box-shadow: inset 0px 1px 0px #fff;
+  text-shadow: 0px 1px 0px #fff;
+}
+.list small, .list .onright:not(.bubble) {
+  color: #999;
+}
+.list .tip {
+  color: #7a7a7a;
+}
+.list li.anchor {
+  background: #f4f4f4;
+  color: #222;
+}
+.list .toolbar {
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+.list .arrow:before {
+  color: #a9a9a9;
+}
+.list .toolbar a {
+  box-shadow: 1px 0px 0px #d9d9d9;
+}
+.list .toolbar a:last-child {
+  box-shadow: none;
+}
+.list .toolbar a.current {
+  background: transparent;
+  color: #333;
+  text-shadow: none !important;
+}
+/* @end */
+/* @group widgets */
+.splash {
+  background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
+  color: #fff;
+  text-shadow: 0px 1px 1px #000;
+}
+/* @group <inputs> */
+input, textarea, select {
+  border: 1px solid #c5c5c5;
+  background: #ffffff -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(0.25, #ffffff));
+}
+.rounded input, textarea, select {
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+input:focus, textarea:focus, select:focus {
+  border: 1px solid #058cf5;
+  -webkit-box-shadow: 0px 0px 4px 0px #058cf5;
+  box-shadow: 0px 0px 4px 0px #058cf5;
+  background: #e8fefe;
+}
+.select:after {
+  background: #ccc;
+  color: white;
+}
+/* @end */
+.bubble {
+  color: #fff;
+  text-shadow: none;
+  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.7);
+}
+.bubble.count {
+  background: #e33100;
+}
+/* @end */

src/Lungo.Events.js

@@ -1,6 +1,6 @@
-/** 
+/**
  * Lungo UI events Manager
- * 
+ *
  * @namespace LUNGO
  * @class Event
  * @requires Zepto
@@ -21,12 +21,12 @@ LUNGO.Events = (function(lng, undefined) {
             ORIENTATION_CHANGE: 'orientationchange'
         },
         desktop: {
-            TOUCH_START: 'click',
+            TOUCH_START: 'mousedown',
             TOUCH_MOVE: 'mousemove',
             TOUCH_END: 'mouseup',
             TAP: 'click',
             DOUBLE_TAP: 'dblclick',
-            ORIENTATION_CHANGE: 'orientationchange'
+            ORIENTATION_CHANGE: 'resize'
         }
     };
 

src/Lungo.js

@@ -23,7 +23,7 @@
 
 var LUNGO = LUNGO || {};
 
-LUNGO.VERSION = '1.0.3';
+LUNGO.VERSION = '1.0.4';
 
 LUNGO.Attributes || (LUNGO.Attributes = {});
 LUNGO.Data || (LUNGO.Data = {});

src/attributes/Lungo.Attributes.Data.js

@@ -1,6 +1,6 @@
-/** 
+/**
  * Object with data-attributes (HTML5) with a special <markup>
- * 
+ *
  * @namespace LUNGO.Attributes
  * @class Data
  *
@@ -9,24 +9,39 @@
  */
 
 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>'
-     },
-     icon: {
-         tag: 'icon',
-         selector: '*',
-         html: '<span class="icon {{value}}"></span>'
-     },
-     title: {
-         tag: 'title',
-         selector: 'header, footer',
-         html: '<h1 class="title">{{value}}</h1>'
-     },
-     back: {
-         tag: 'back',
-         selector: 'header, footer',
-         html: '<a href="#back" data-target="section" class="back onleft button icon {{value}}"></a>'
-     }
+    Search: {
+        tag: 'search',
+        selector: '.list',
+        html: '<li class="search {{value}}"><input type="search" placeholder="Search..."><a href="#" class="button" data-icon="search"></a></li>'
+    },
+    Count: {
+        tag: 'count',
+        selector: '*',
+        html: '<span class="bubble count">{{value}}</span>'
+    },
+    Search: {
+        tag: 'search',
+        selector: '*',
+        html: '<input type="search" placeholder="{{value}}"/><a href="#" class="button" data-icon="search"></a>'
+    },
+    Icon: {
+        tag: 'icon',
+        selector: '*',
+        html: '<span class="icon {{value}}"></span>'
+    },
+    Image: {
+        tag: 'image',
+        selector: '*',
+        html: '<img src="{{value}}" class="icon" />'
+    },
+    Title: {
+        tag: 'title',
+        selector: 'header, footer, article',
+        html: '<h1 class="title">{{value}}</h1>'
+    },
+    Back: {
+        tag: 'back',
+        selector: 'header, footer',
+        html: '<a href="#back" data-target="section" class="back onleft button icon {{value}}"></a>'
+    }
 };

src/boot/Lungo.Boot.Article.js

@@ -13,7 +13,7 @@ LUNGO.Boot.Article = (function(lng, undefined) {
 
     var SELECTORS = {
         LIST_IN_ARTICLE: 'article.list',
-        SCROLL_IN_ARTICLE: 'scroll',
+        SCROLL_IN_ARTICLE: '.scrollable',
         CHECKBOX_IN_ARTICLE: '.checkbox, .radio'
     };
 

src/boot/Lungo.Boot.Events.js

@@ -19,18 +19,19 @@ LUNGO.Boot.Events = (function(lng, undefined) {
     var start = function() {
         var touch_move_event  = 'TOUCH_MOVE';
         var touch_start_event = 'TOUCH_START';
+        var tap = 'TAP';
         var orientation_change = 'ORIENTATION_CHANGE';
         var target_selector = 'a[href][data-target]';
-        var target_selector_from_aside = 'ASIDE a[href][data-target]';
+        var target_selector_from_aside = 'aside a[href][data-target]';
 
         lng.Dom.Event.listener(document, touch_move_event, _iScroll);
         lng.Dom.Event.listener(window, orientation_change, _changeOrientation);
         lng.Dom.Event.live(target_selector_from_aside, touch_start_event, _toggleAside);
-        lng.Dom.Event.live(target_selector, touch_start_event, _loadTarget);
+        lng.Dom.Event.live(target_selector, tap, _loadTarget);
     };
 
-    var _iScroll = function(event_handler) {
-        event_handler.preventDefault();
+    var _iScroll = function(event) {
+        event.preventDefault();
     };
 
     var _changeOrientation = function(event) {
@@ -38,19 +39,18 @@ LUNGO.Boot.Events = (function(lng, undefined) {
     };
 
     var _toggleAside = function(event) {
-        event.preventDefault();
-
         var link = lng.Dom.query(this);
         var section_id =  _getParentIdOfElement(link);
-
         lng.View.Aside.toggle(section_id);
-    };
 
-    var _loadTarget = function(event) {
         event.preventDefault();
+    };
 
+    var _loadTarget = function(event) {
         var link = lng.Dom.query(this);
         _selectTarget(link);
+
+        event.preventDefault();
     };
 
     var _selectTarget = function(link) {

src/boot/Lungo.Boot.Section.js

@@ -25,13 +25,12 @@ LUNGO.Boot.Section = (function(lng, undefined) {
      */
     var start = function() {
         var sections = lng.Dom.query(SELECTORS.SECTION);
-        var easing_transition = '-webkit-transform 0.3s ease-in-out';
 
         _initFirstSection(sections);
         _initAllSections(sections);
+        _initAllAsides();
 
         lng.View.Resize.toolbars();
-        _allocateEasingTransition(sections, easing_transition);
     };
 
     var _initFirstSection = function(sections) {
@@ -39,38 +38,24 @@ LUNGO.Boot.Section = (function(lng, undefined) {
         var first_section_id = '#' + first_section.attr('id');
 
         first_section.addClass(ACTIVE_CLASS);
-
         lng.Router.History.add(first_section_id);
     };
 
     var _initAllSections = function(sections) {
         for (var i = 0, len = sections.length; i < len; i++) {
             var section = lng.Dom.query(sections[i]);
-            _initSection(section);
             _initFirstArticle(section);
         }
     };
 
-    var _initSection = function(section) {
-        var section_attributes = lng.Attributes.Section;
-
-        for (var attribute in section_attributes) {
-            if (lng.Core.isOwnProperty(section_attributes, attribute)) {
-                var property = section_attributes[attribute];
-                lng.View.Resize.article(section, property.name, property.bind, property.reference);
-            }
-        }
-    };
-
-    var _allocateEasingTransition = function(sections, easing) {
-        var transition_property = { '-webkit-transition': easing };
-        sections.css(transition_property);
-    };
-
     var _initFirstArticle = function(section) {
         section.children(SELECTORS.ARTICLE).first().addClass(ACTIVE_CLASS);
     };
 
+    var _initAllAsides = function() {
+        lng.Dom.query('aside').addClass('show');
+    };
+
     return {
         start: start
     };

src/data/Lungo.Data.Sql.js

@@ -1,6 +1,6 @@
-/** 
+/**
  * Wrapper for using WebSql (HTML5 feature)
- * 
+ *
  * @namespace LUNGO.Data
  * @class Sql
  *
@@ -43,7 +43,7 @@ LUNGO.Data.Sql = (function(lng, undefined) {
      * @method select
      *
      * @param {string} Name of the table in the database
-     * @param {object} [OPTIONAL] Object selection condition 
+     * @param {object} [OPTIONAL] Object selection condition
      * @param {Function} Callback when the process is complete
      */
     var select = function(table, where_obj, callback) {
@@ -54,7 +54,6 @@ LUNGO.Data.Sql = (function(lng, undefined) {
             for (var i = 0, len = rs.rows.length; i < len; i++) {
                 result.push(rs.rows.item(i));
             }
-			if (result.length === 1) result = result[0]; 
 
             _callbackResponse(callback, result);
         });
@@ -68,7 +67,7 @@ LUNGO.Data.Sql = (function(lng, undefined) {
      * @param {string} Name of the table in the database
      * @param {object} Data object to insert in table
      */
-    var insert = function(table, data_obj) {
+    var insert = function(table, data_obj, callback) {
         var fields = '';
         var values = '';
 
@@ -92,9 +91,9 @@ LUNGO.Data.Sql = (function(lng, undefined) {
      *
      * @param {string} Name of the table in the database
      * @param {object} Data object to update in table
-     * @param {object} [OPTIONAL] Object selection condition 
+     * @param {object} [OPTIONAL] Object selection condition
      */
-    var update = function(table, data_obj, where_obj) {
+    var update = function(table, data_obj, where_obj, callback) {
         var sql = 'UPDATE ' + table + ' SET ' + _convertToSql(data_obj, ',');
         if (where_obj) sql += ' WHERE ' + _convertToSql(where_obj, 'AND');
 
@@ -107,9 +106,9 @@ LUNGO.Data.Sql = (function(lng, undefined) {
      * @method drop
      *
      * @param {string} Name of the table in the database
-     * @param {object} [OPTIONAL] Object selection condition 
+     * @param {object} [OPTIONAL] Object selection condition
      */
-    var drop = function(table, where_obj) {
+    var drop = function(table, where_obj, callback) {
         var where = (where_obj) ? ' WHERE ' + _convertToSql(where_obj, 'AND') : '';
 
         execute('DELETE FROM ' + table + where + ';');

src/lib/iscroll-lite.js

@@ -0,0 +1,594 @@
+/*!
+ * iScroll Lite base on iScroll v4.1.6 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
+ * Released under MIT license, http://cubiq.org/license
+ */
+
+(function(){
+var m = Math,
+	mround = function (r) { return r >> 0; },
+	vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
+		(/firefox/i).test(navigator.userAgent) ? 'Moz' :
+		'opera' in window ? 'O' : '',
+
+    // Browser capabilities
+    isAndroid = (/android/gi).test(navigator.appVersion),
+    isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
+    isPlaybook = (/playbook/gi).test(navigator.appVersion),
+    isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
+
+    has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(),
+    hasTouch = 'ontouchstart' in window && !isTouchPad,
+    hasTransform = vendor + 'Transform' in document.documentElement.style,
+    hasTransitionEnd = isIDevice || isPlaybook,
+
+	nextFrame = (function() {
+	    return window.requestAnimationFrame
+			|| window.webkitRequestAnimationFrame
+			|| window.mozRequestAnimationFrame
+			|| window.oRequestAnimationFrame
+			|| window.msRequestAnimationFrame
+			|| function(callback) { return setTimeout(callback, 17); }
+	})(),
+	cancelFrame = (function () {
+	    return window.cancelRequestAnimationFrame
+			|| window.webkitCancelAnimationFrame
+			|| window.webkitCancelRequestAnimationFrame
+			|| window.mozCancelRequestAnimationFrame
+			|| window.oCancelRequestAnimationFrame
+			|| window.msCancelRequestAnimationFrame
+			|| clearTimeout
+	})(),
+
+	// Events
+	RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
+	START_EV = hasTouch ? 'touchstart' : 'mousedown',
+	MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
+	END_EV = hasTouch ? 'touchend' : 'mouseup',
+	CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
+
+	// Helpers
+	trnOpen = 'translate' + (has3d ? '3d(' : '('),
+	trnClose = has3d ? ',0)' : ')',
+
+	// Constructor
+	iScroll = function (el, options) {
+		var that = this,
+			doc = document,
+			i;
+
+		that.wrapper = typeof el == 'object' ? el : doc.getElementById(el);
+		that.wrapper.style.overflow = 'hidden';
+		that.scroller = that.wrapper.children[0];
+
+		// Default options
+		that.options = {
+			hScroll: true,
+			vScroll: true,
+			x: 0,
+			y: 0,
+			bounce: true,
+			bounceLock: false,
+			momentum: true,
+			lockDirection: true,
+			useTransform: true,
+			useTransition: false,
+
+			// Events
+			onRefresh: null,
+			onBeforeScrollStart: function (e) { e.preventDefault(); },
+			onScrollStart: null,
+			onBeforeScrollMove: null,
+			onScrollMove: null,
+			onBeforeScrollEnd: null,
+			onScrollEnd: null,
+			onTouchEnd: null,
+			onDestroy: null
+		};
+
+		// User defined options
+		for (i in options) that.options[i] = options[i];
+
+		// Set starting position
+		that.x = that.options.x;
+		that.y = that.options.y;
+
+		// Normalize options
+		that.options.useTransform = hasTransform ? that.options.useTransform : false;
+		that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
+		that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
+		that.options.useTransition = hasTransitionEnd && that.options.useTransition;
+
+		// Set some default styles
+		that.scroller.style[vendor + 'TransitionProperty'] = that.options.useTransform ? '-' + vendor.toLowerCase() + '-transform' : 'top left';
+		that.scroller.style[vendor + 'TransitionDuration'] = '0';
+		that.scroller.style[vendor + 'TransformOrigin'] = '0 0';
+		if (that.options.useTransition) that.scroller.style[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)';
+		
+		if (that.options.useTransform) that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose;
+		else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px';
+
+		that.refresh();
+
+		that._bind(RESIZE_EV, window);
+		that._bind(START_EV);
+		if (!hasTouch) that._bind('mouseout', that.wrapper);
+	};
+
+// Prototype
+iScroll.prototype = {
+	enabled: true,
+	x: 0,
+	y: 0,
+	steps: [],
+	scale: 1,
+	
+	handleEvent: function (e) {
+		var that = this;
+		switch(e.type) {
+			case START_EV:
+				if (!hasTouch && e.button !== 0) return;
+				that._start(e);
+				break;
+			case MOVE_EV: that._move(e); break;
+			case END_EV:
+			case CANCEL_EV: that._end(e); break;
+			case RESIZE_EV: that._resize(); break;
+			case 'mouseout': that._mouseout(e); break;
+			case 'webkitTransitionEnd': that._transitionEnd(e); break;
+		}
+	},
+
+	_resize: function () {
+		this.refresh();
+	},
+	
+	_pos: function (x, y) {
+		x = this.hScroll ? x : 0;
+		y = this.vScroll ? y : 0;
+
+		if (this.options.useTransform) {
+			this.scroller.style[vendor + 'Transform'] = trnOpen + x + 'px,' + y + 'px' + trnClose + ' scale(' + this.scale + ')';
+		} else {
+			x = mround(x);
+			y = mround(y);
+			this.scroller.style.left = x + 'px';
+			this.scroller.style.top = y + 'px';
+		}
+
+		this.x = x;
+		this.y = y;
+	},
+
+	_start: function (e) {
+		var that = this,
+			point = hasTouch ? e.touches[0] : e,
+			matrix, x, y;
+
+		if (!that.enabled) return;
+
+		if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
+		
+		if (that.options.useTransition) that._transitionTime(0);
+
+		that.moved = false;
+		that.animating = false;
+		that.zoomed = false;
+		that.distX = 0;
+		that.distY = 0;
+		that.absDistX = 0;
+		that.absDistY = 0;
+		that.dirX = 0;
+		that.dirY = 0;
+
+		if (that.options.momentum) {
+			if (that.options.useTransform) {
+				// Very lame general purpose alternative to CSSMatrix
+				matrix = getComputedStyle(that.scroller, null)[vendor + 'Transform'].replace(/[^0-9-.,]/g, '').split(',');
+				x = matrix[4] * 1;
+				y = matrix[5] * 1;
+			} else {
+				x = getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '') * 1;
+				y = getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '') * 1;
+			}
+			
+			if (x != that.x || y != that.y) {
+				if (that.options.useTransition) that._unbind('webkitTransitionEnd');
+				else cancelFrame(that.aniTime);
+				that.steps = [];
+				that._pos(x, y);
+			}
+		}
+
+		that.startX = that.x;
+		that.startY = that.y;
+		that.pointX = point.pageX;
+		that.pointY = point.pageY;
+
+		that.startTime = e.timeStamp || Date.now();
+
+		if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
+
+		that._bind(MOVE_EV);
+		that._bind(END_EV);
+		that._bind(CANCEL_EV);
+	},
+	
+	_move: function (e) {
+		var that = this,
+			point = hasTouch ? e.touches[0] : e,
+			deltaX = point.pageX - that.pointX,
+			deltaY = point.pageY - that.pointY,
+			newX = that.x + deltaX,
+			newY = that.y + deltaY,
+			timestamp = e.timeStamp || Date.now();
+
+		if (that.options.onBeforeScrollMove) that.options.onBeforeScrollMove.call(that, e);
+
+		that.pointX = point.pageX;
+		that.pointY = point.pageY;
+
+		// Slow down if outside of the boundaries
+		if (newX > 0 || newX < that.maxScrollX) {
+			newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX;
+		}
+		if (newY > 0 || newY < that.maxScrollY) { 
+			newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= 0 || that.maxScrollY >= 0 ? 0 : that.maxScrollY;
+		}
+
+		if (that.absDistX < 6 && that.absDistY < 6) {
+			that.distX += deltaX;
+			that.distY += deltaY;
+			that.absDistX = m.abs(that.distX);
+			that.absDistY = m.abs(that.distY);
+
+			return;
+		}
+
+		// Lock direction
+		if (that.options.lockDirection) {
+			if (that.absDistX > that.absDistY + 5) {
+				newY = that.y;
+				deltaY = 0;
+			} else if (that.absDistY > that.absDistX + 5) {
+				newX = that.x;
+				deltaX = 0;
+			}
+		}
+
+		that.moved = true;
+		that._pos(newX, newY);
+		that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
+		that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
+
+		if (timestamp - that.startTime > 300) {
+			that.startTime = timestamp;
+			that.startX = that.x;
+			that.startY = that.y;
+		}
+		
+		if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
+	},
+	
+	_end: function (e) {
+		if (hasTouch && e.touches.length != 0) return;
+
+		var that = this,
+			point = hasTouch ? e.changedTouches[0] : e,
+			target, ev,
+			momentumX = { dist:0, time:0 },
+			momentumY = { dist:0, time:0 },
+			duration = (e.timeStamp || Date.now()) - that.startTime,
+			newPosX = that.x,
+			newPosY = that.y,
+			newDuration;
+
+		that._unbind(MOVE_EV);
+		that._unbind(END_EV);
+		that._unbind(CANCEL_EV);
+
+		if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
+
+		if (!that.moved) {
+			if (hasTouch) {
+				// Find the last touched element
+				target = point.target;
+				while (target.nodeType != 1) target = target.parentNode;
+
+				if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
+					ev = document.createEvent('MouseEvents');
+					ev.initMouseEvent('click', true, true, e.view, 1,
+						point.screenX, point.screenY, point.clientX, point.clientY,
+						e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+						0, null);
+					ev._fake = true;
+					target.dispatchEvent(ev);
+				}
+			}
+
+			that._resetPos(200);
+
+			if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+			return;
+		}
+
+		if (duration < 300 && that.options.momentum) {
+			momentumX = newPosX ? that._momentum(newPosX - that.startX, duration, -that.x, that.scrollerW - that.wrapperW + that.x, that.options.bounce ? that.wrapperW : 0) : momentumX;
+			momentumY = newPosY ? that._momentum(newPosY - that.startY, duration, -that.y, (that.maxScrollY < 0 ? that.scrollerH - that.wrapperH + that.y : 0), that.options.bounce ? that.wrapperH : 0) : momentumY;
+
+			newPosX = that.x + momentumX.dist;
+			newPosY = that.y + momentumY.dist;
+
+ 			if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 };
+ 			if ((that.y > 0 && newPosY > 0) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 };
+		}
+
+		if (momentumX.dist || momentumY.dist) {
+			newDuration = m.max(m.max(momentumX.time, momentumY.time), 10);
+
+			that.scrollTo(mround(newPosX), mround(newPosY), newDuration);
+
+			if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+			return;
+		}
+
+		that._resetPos(200);
+		if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+	},
+	
+	_resetPos: function (time) {
+		var that = this,
+			resetX = that.x >= 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x,
+			resetY = that.y >= 0 || that.maxScrollY > 0 ? 0 : that.y < that.maxScrollY ? that.maxScrollY : that.y;
+
+		if (resetX == that.x && resetY == that.y) {
+			if (that.moved) {
+				if (that.options.onScrollEnd) that.options.onScrollEnd.call(that);		// Execute custom code on scroll end
+				that.moved = false;
+			}
+
+			return;
+		}
+
+		that.scrollTo(resetX, resetY, time || 0);
+	},
+	
+	_mouseout: function (e) {
+		var t = e.relatedTarget;
+
+		if (!t) {
+			this._end(e);
+			return;
+		}
+
+		while (t = t.parentNode) if (t == this.wrapper) return;
+		
+		this._end(e);
+	},
+
+	_transitionEnd: function (e) {
+		var that = this;
+
+		if (e.target != that.scroller) return;
+
+		that._unbind('webkitTransitionEnd');
+		
+		that._startAni();
+	},
+
+	/**
+	 *
+	 * Utilities
+	 *
+	 */
+	_startAni: function () {
+		var that = this,
+			startX = that.x, startY = that.y,
+			startTime = Date.now(),
+			step, easeOut,
+			animate;
+
+		if (that.animating) return;
+
+		if (!that.steps.length) {
+			that._resetPos(400);
+			return;
+		}
+
+		step = that.steps.shift();
+
+		if (step.x == startX && step.y == startY) step.time = 0;
+
+		that.animating = true;
+		that.moved = true;
+
+		if (that.options.useTransition) {
+			that._transitionTime(step.time);
+			that._pos(step.x, step.y);
+			that.animating = false;
+			if (step.time) that._bind('webkitTransitionEnd');
+			else that._resetPos(0);
+			return;
+		}
+		
+		animate = function () {
+			var now = Date.now(),
+				newX, newY;
+
+			if (now >= startTime + step.time) {
+				that._pos(step.x, step.y);
+				that.animating = false;
+				if (that.options.onAnimationEnd) that.options.onAnimationEnd.call(that);			// Execute custom code on animation end
+				that._startAni();
+				return;
+			}
+
+			now = (now - startTime) / step.time - 1;
+			easeOut = m.sqrt(1 - now * now);
+			newX = (step.x - startX) * easeOut + startX;
+			newY = (step.y - startY) * easeOut + startY;
+			that._pos(newX, newY);
+			if (that.animating) that.aniTime = nextFrame(animate);
+		};
+		
+		animate();
+	},
+
+	_transitionTime: function (time) {
+		this.scroller.style[vendor + 'TransitionDuration'] = time + 'ms';
+	},
+	
+	_momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
+		var deceleration = 0.0006,
+			speed = m.abs(dist) / time,
+			newDist = (speed * speed) / (2 * deceleration),
+			newTime = 0, outsideDist = 0;
+
+		// Proportinally reduce speed if we are outside of the boundaries 
+		if (dist > 0 && newDist > maxDistUpper) {
+			outsideDist = size / (6 / (newDist / speed * deceleration));
+			maxDistUpper = maxDistUpper + outsideDist;
+			speed = speed * maxDistUpper / newDist;
+			newDist = maxDistUpper;
+		} else if (dist < 0 && newDist > maxDistLower) {
+			outsideDist = size / (6 / (newDist / speed * deceleration));
+			maxDistLower = maxDistLower + outsideDist;
+			speed = speed * maxDistLower / newDist;
+			newDist = maxDistLower;
+		}
+
+		newDist = newDist * (dist < 0 ? -1 : 1);
+		newTime = speed / deceleration;
+
+		return { dist: newDist, time: mround(newTime) };
+	},
+
+	_offset: function (el) {
+		var left = -el.offsetLeft,
+			top = -el.offsetTop;
+			
+		while (el = el.offsetParent) {
+			left -= el.offsetLeft;
+			top -= el.offsetTop;
+		} 
+
+		return { left: left, top: top };
+	},
+
+	_bind: function (type, el, bubble) {
+		(el || this.scroller).addEventListener(type, this, !!bubble);
+	},
+
+	_unbind: function (type, el, bubble) {
+		(el || this.scroller).removeEventListener(type, this, !!bubble);
+	},
+
+
+	/**
+	 *
+	 * Public methods
+	 *
+	 */
+	destroy: function () {
+		var that = this;
+
+		that.scroller.style[vendor + 'Transform'] = '';
+
+		// Remove the event listeners
+		that._unbind(RESIZE_EV, window);
+		that._unbind(START_EV);
+		that._unbind(MOVE_EV);
+		that._unbind(END_EV);
+		that._unbind(CANCEL_EV);
+		that._unbind('mouseout', that.wrapper);
+		if (that.options.useTransition) that._unbind('webkitTransitionEnd');
+		
+		if (that.options.onDestroy) that.options.onDestroy.call(that);
+	},
+
+	refresh: function () {
+		var that = this,
+			offset;
+
+		that.wrapperW = that.wrapper.clientWidth;
+		that.wrapperH = that.wrapper.clientHeight;
+
+		that.scrollerW = that.scroller.offsetWidth;
+		that.scrollerH = that.scroller.offsetHeight;
+		that.maxScrollX = that.wrapperW - that.scrollerW;
+		that.maxScrollY = that.wrapperH - that.scrollerH;
+		that.dirX = 0;
+		that.dirY = 0;
+
+		that.hScroll = that.options.hScroll && that.maxScrollX < 0;
+		that.vScroll = that.options.vScroll && (!that.options.bounceLock && !that.hScroll || that.scrollerH > that.wrapperH);
+
+		offset = that._offset(that.wrapper);
+		that.wrapperOffsetLeft = -offset.left;
+		that.wrapperOffsetTop = -offset.top;
+
+
+		that.scroller.style[vendor + 'TransitionDuration'] = '0';
+
+		that._resetPos(200);
+	},
+
+	scrollTo: function (x, y, time, relative) {
+		var that = this,
+			step = x,
+			i, l;
+
+		that.stop();
+
+		if (!step.length) step = [{ x: x, y: y, time: time, relative: relative }];
+		
+		for (i=0, l=step.length; i<l; i++) {
+			if (step[i].relative) { step[i].x = that.x - step[i].x; step[i].y = that.y - step[i].y; }
+			that.steps.push({ x: step[i].x, y: step[i].y, time: step[i].time || 0 });
+		}
+
+		that._startAni();
+	},
+
+	scrollToElement: function (el, time) {
+		var that = this, pos;
+		el = el.nodeType ? el : that.scroller.querySelector(el);
+		if (!el) return;
+
+		pos = that._offset(el);
+		pos.left += that.wrapperOffsetLeft;
+		pos.top += that.wrapperOffsetTop;
+
+		pos.left = pos.left > 0 ? 0 : pos.left < that.maxScrollX ? that.maxScrollX : pos.left;
+		pos.top = pos.top > 0 ? 0 : pos.top < that.maxScrollY ? that.maxScrollY : pos.top;
+		time = time === undefined ? m.max(m.abs(pos.left)*2, m.abs(pos.top)*2) : time;
+
+		that.scrollTo(pos.left, pos.top, time);
+	},
+
+	disable: function () {
+		this.stop();
+		this._resetPos(0);
+		this.enabled = false;
+
+		// If disabled after touchstart we make sure that there are no left over events
+		this._unbind(MOVE_EV);
+		this._unbind(END_EV);
+		this._unbind(CANCEL_EV);
+	},
+	
+	enable: function () {
+		this.enabled = true;
+	},
+	
+	stop: function () {
+		cancelFrame(this.aniTime);
+		this.steps = [];
+		this.moved = false;
+		this.animating = false;
+	}
+};
+
+if (typeof exports !== 'undefined') exports.iScroll = iScroll;
+else window.iScroll = iScroll;
+
+})();

src/stylesheets/css/Lungo.layout.css

@@ -1,33 +1,37 @@
-body{height:100%;}
-section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
-section:first-child{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
-section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
-section.show{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
-section.static.hide{-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
-section.popup{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
-section.popup.show{-webkit-transform:translate3d(0, 0%, 0);-moz-transform:translate3d(0, 0%, 0);-ms-transform:translate3d(0, 0%, 0);-o-transform:translate3d(0, 0%, 0);transform:translate3d(0, 0%, 0);}
-section.popup.hide{-webkit-transform:translate3d(0, -100%, 0);-moz-transform:translate3d(0, -100%, 0);-ms-transform:translate3d(0, -100%, 0);-o-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);}
-header,footer{position:absolute;left:0px;width:100%;height:40px;display:block;z-index:2;line-height:40px;}
+section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
+section:first-child{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);z-index:1;}
+section.hide{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);z-index:0;}
+section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);z-index:1;}
+header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:38px;}
 header{top:0px;}
 footer{bottom:0px;}
 header .title,footer .title{float:left;margin:0 8px;font-size:1.3em;}
 header .title{position:absolute;left:0px;width:100%;margin:0px auto;text-align:center;z-index:-1;}
-section header a.button,section footer a.button{margin:4px 3px auto;}
+section header a.button,section footer a.button{margin:3px 3px auto 4px;}
 section header a.button.icon,section footer a.button.icon{width:17px;font-size:1.5em;font-weight:normal;}
-nav{height:inherit;text-align:center;font-weight:normal;}
-nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0em;}
-nav a abbr{position:relative;bottom:3px;margin-left:2px;display:none;font-size:0.5em;font-weight:bold;}
-nav a.current abbr{display:inline;}
-nav a.current{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
-aside{position:absolute;top:0px;bottom:0px;height:auto;width:0px;}
-aside.show{width:256px;}
+aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;opacity:0;}
+aside.show{opacity:1;}
 header~aside{padding-top:40px;}
 footer~aside{padding-bottom:40px;}
-aside~article{-webkit-transition:left 0.3s ease-in-out;left:0px;}
+aside~article{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
 aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:1.1em;font-weight:bold;line-height:40px;}
-aside a .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
-@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{width:256px;} aside~article{left:256px;}}article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
+aside .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
+aside .anchor{font-weight:bold;padding:3px 10px 4px;}
+aside .bubble{float:right;margin:12px 4px 0 0;}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{opacity:1;} aside~article{width:auto !important;left:256px;right:0px !important;}}article{position:absolute;width:inherit;height:inherit;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
+header~article{top:40px;}
+footer~article{bottom:40px;}
 article.current{z-index:1;opacity:1;}
-.toolbar{height:48px;line-height:44px;display:block;}
-.toolbar a{float:left;padding:0;font-size:2.0em;}
-article.aside{left:256px !important;}
+article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}
+@media handheld, only screen and (min-width: 768px){article.aside{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}}article .title{font-size:1.1em;margin:0px 0 4px;}
+article .title .icon{margin-right:4px;}
+article .text{margin:4px 0 8px;display:block;font-size:0.9em;font-weight:normal;line-height:1.4em;}
+nav{height:inherit;text-align:center;font-weight:normal;}
+nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0em;line-height:38px;}
+nav a abbr{position:relative;bottom:3px;margin-left:2px;display:none;font-size:0.5em;font-weight:bold;}
+nav a.current abbr{display:inline;}
+.toolbar{height:48px;display:block;}
+.toolbar a{float:left;padding:0;font-size:2.2em;}
+.toolbar .icon{display:block;line-height:52px;}
+nav .bubble{position:relative;top:-10px;left:-10px;margin-right:-16px;font-size:0.4em;}
+.toolbar .bubble{top:-60px;left:12px;padding:1px 4px;}

src/stylesheets/css/Lungo.layout.list.css

@@ -1,17 +1,17 @@
-.list li:not(.toolbar){padding:8px 6px;list-style-type:none;}
-.list li:not(.toolbar) a{width:auto;display:block;}
-.list li:not(.toolbar) img,.list li:not(.toolbar) .icon{float:left;width:32px;height:32px;margin-right:6px;font-size:36px;font-weight:normal;line-height:32px;}
-.list strong,.list small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
-.list strong{width:75%;font-size:1.1em;}
-.list small{display:block;font-size:0.9em;font-style:normal;}
-.list li.anchor{font-size:0.9em;font-weight:bold;padding-top:3px;padding-bottom:3px;}
-.list .anchor a{padding:0px;}
-.list .anchor .icon{width:14px !important;height:14px !important;margin-right:4px !important;font-size:1.3em !important;font-weight:normal;line-height:16px !important;}
+.list{width:inherit;font-size:1.2em;line-height:1.05em;font-weight:bold;}
+.list li:not(.toolbar){padding:8px 6px 8px 8px;list-style-type:none;}
+.list a{display:block;}
+.list li:not(.toolbar) img,.list li:not(.toolbar) .icon{float:left;width:32px;height:32px;margin-right:6px;font-size:36px;font-weight:normal;}
+.list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.85em;font-weight:normal;}
+.list .icon{display:inline-block;}
+.list .tip{font-size:0.85em;font-weight:bold;}
+.list .light{font-size:0.9em;font-weight:normal;}
+.list li.anchor{font-size:0.75em;padding:3px 6px !important;}
+.list .anchor .icon{width:14px !important;height:14px !important;margin-right:4px !important;font-size:1.3em !important;line-height:16px !important;}
 .list .anchor .bubble{display:none;}
-.list li.info{min-height:48px;}
-.list li.info img,.list li.info .icon{height:48px;width:48px;line-height:48px;}
 .list .search input{width:88%;}
 .list .search a{float:right;height:30px;margin:0px;padding:0px;}
 .list .search a .icon{height:12px;width:30px;margin:0px;font-size:1.2em;font-weight:normal;}
 .list a.arrow:before{float:right;content:">";position:relative;top:6px;font-size:16px;font-family:"Courier New",Courier,mono;font-weight:bold;}
-.list .bubble{position:relative;right:2px;top:6px;float:right;padding:2px 3px 3px;line-height:1.0em;font-weight:bold;font-size:0.85em;}
+.list .onright{font-size:0.85em;}
+.list .onright .icon{font-size:1.2em !important;height:12px !important;width:12px !important;margin:0px;}

src/stylesheets/css/Lungo.widgets.colour.css

@@ -1,5 +1,7 @@
-a.grey,.grey{background-color:#ccc;}
+a.grey,.grey{background-color:#cccccc;}
 a.grey:active{background-color:#b5b5b5;}
+a.black,.grey{background-color:#000000;}
+a.black:active{background-color:#000000;}
 a.red,.red{background-color:#e33100;}
 a.red:active{background-color:#c5280f;}
 a.lightgreen,.lightgreen{background-color:#91bd09;}
@@ -24,3 +26,17 @@ a.twitter,.twitter:not(span){background-color:#35cdff;}
 a.twitter:active{background-color:#2bafda;}
 a.facebook,.facebook:not(span){background-color:#3b5998;}
 a.facebook:active{background-color:#2c4579;}
+li.grey{box-shadow:inset 3px 0px 0px #cccccc;}
+li.black{box-shadow:inset 3px 0px 0px #000000;}
+li.red{box-shadow:inset 3px 0px 0px #e33100;}
+li.lightgreen{box-shadow:inset 3px 0px 0px #91bd09;}
+li.green{box-shadow:inset 3px 0px 0px #009600;}
+li.blue{box-shadow:inset 3px 0px 0px #237fd7;}
+li.arcticblue{box-shadow:inset 3px 0px 0px #2daebf;}
+li.orange{box-shadow:inset 3px 0px 0px #ff5c00;}
+li.purple{box-shadow:inset 3px 0px 0px #7b658d;}
+li.magenta{box-shadow:inset 3px 0px 0px #a9014b;}
+li.pink{box-shadow:inset 3px 0px 0px #ff007f;}
+li.yellow{box-shadow:inset 3px 0px 0px #ffb515;}
+li.twitter{box-shadow:inset 3px 0px 0px #35cdff;}
+li.facebook{box-shadow:inset 3px 0px 0px #3b5998;}

src/stylesheets/css/Lungo.widgets.css

@@ -1,11 +1,17 @@
-.scroll,scroll{position:relative;display:block;width:100%;height:100%;}
-section.copyright{margin-top:128px;z-index:1000;background:#000;text-align:center;font-size:24px;}
-section.copyright img{max-height:128px;}
+.scrollable{position:absolute;display:block;width:100%;height:100%;}
 .scroll{overflow:scroll;-webkit-overflow-scrolling:touch;}
-.hidden{display:none;}
 .onleft{float:left;}
 .onright{float:right;}
-.framed{border:2px solid #fff;}
-.rounded{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-.semi-opacity{opacity:0.5;}
+.indented{width:auto;height:auto;padding:10px 10px 0px;}
+.indented ul{margin-bottom:10px;height:auto;width:inherit;}
+.rounded ul{-webkit-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
+.rounded li:first-child{-webkit-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;-webkit-background-clip:padding-box;background-clip:padding-box;}
+.rounded li:last-child{-webkit-border-radius:0px 0px 4px 4px;border-radius:0px 0px 4px 4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
 .margin-top-4{margin-top:4px;}
+.hidden{display:none;}
+.semi-opacity{opacity:0.5;}
+.size32{font-size:32px;height:32px;width:32px;line-height:32px;}
+.mini{font-size:20px !important;height:16px !important;width:16px !important;line-height:16px !important;}
+.framed{border:2px solid #fff;}
+.round{-webkit-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
+.bubble{padding:2px 4px 3px;-webkit-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;background-clip:padding-box;font-size:0.8em;font-weight:bold;line-height:1.0em;}

src/stylesheets/css/Lungo.widgets.form.css

@@ -1,12 +1,14 @@
-.form,form{position:relative;margin:8px;font-size:1.15em;font-weight:bold;}
-input:not([type=checkbox]),textarea,select{display:inline-block;padding:6px 6px 5px;width:95%;margin-bottom:8px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
-input[type=search]{width:100%;z-index:1;margin:0px;}
-input[type=search]:before{content:"hola";}
+.form,form{font-size:0.95em;width:inherit !important;}
+label:not(.checkbox){display:block;margin-bottom:2px;}
+input:not([type=checkbox]),textarea,select{display:inline-block;padding:5px;width:95%;margin-bottom:2px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
+input[type=search]{width:86%;}
+input[type=search]+.button{float:right;padding:0px;width:32px;}
+input[type=search]+.button .icon{font-size:20px !important;}
 select{width:100%;}
 label.select{position:relative;display:inline-block;width:100%;}
 .select:after{padding:0 7px;position:absolute;top:0;right:0;bottom:0;height:30px;content:"▼";pointer-events:none;font-size:60%;line-height:32px;}
 .no-pointer-events .select:after{content:none;}
-input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:1;}
+input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:2;}
 input[type="checkbox"]+span::after,input[type="radio"]+span::after{content:"off";}
 input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{content:"on";}
 .iphone-toggle-buttons{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
@@ -18,9 +20,9 @@ input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type=
 input[type="checkbox"],input[type="radio"],input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after{position:absolute;}
 input[type="checkbox"],input[type="radio"]{filter:alpha(opacity=0);-moz-opacity:0;-webkit-opacity:0;opacity:0;}
 input[type="checkbox"]+span,input[type="radio"]+span{width:74px;margin-bottom:8px;height:30px;font:bold 14px/30px Arial,Sans-serif;color:#8c8c8c;text-transform:uppercase;border:solid 1px #bcbbbb;background:#c8c8c8 -webkit-gradient(linear, left top, left bottom, color-stop(0, #c8c8c8), color-stop(1, #f3f3f3));position:relative;text-indent:-9999px;}
-input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";width:29px;height:29px;border-top:solid 1px #fff;border-right:solid 1px #bebebe;background:#cfcfcf -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfcfcf), color-stop(1, #f9f9f9));-webkit-box-shadow:1px 0 1px #bebebe;-moz-box-shadow:1px 0 1px #bebebe;box-shadow:1px 0 1px #bebebe;}
+input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";width:29px;height:29px;border-top:solid 1px #fff;border-right:solid 1px #bebebe;background:#cfcfcf -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfcfcf), color-stop(1, #f9f9f9));-webkit-box-shadow:1px 0 1px #bebebe;box-shadow:1px 0 1px #bebebe;}
 input[type="checkbox"]+span::after,input[type="radio"]+span::after{text-indent:0;width:56px;height:32px;text-align:center;}
 input[type="checkbox"]:checked+span,input[type="radio"]:checked+span{background:#5d96ea -webkit-gradient(linear, left top, left bottom, color-stop(0, #1b45bd), color-stop(1, #5d96ea));color:#fff;text-shadow:-1px -1px #0d2046;}
-input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;-webkit-box-shadow:-2px 0 1px #3a5e91;-webkit-box-shadow:-2px 0 1px #3a5e91;-moz-box-shadow:-2px 0 1px #3a5e91;box-shadow:-2px 0 1px #3a5e91;}
-input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{border-top:solid 1px #0f2a4f;border-bottom:solid 1px #0f2a4f;border-left:solid 1px #2c5496;height:30px;top:-1px;left:-1px;-webkit-border-radius:16px 0 0 16px;-moz-border-radius:16px 0 0 16px;border-radius:16px 0 0 16px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;-webkit-box-shadow:-2px 0 1px #3a5e91;-webkit-box-shadow:-2px 0 1px #3a5e91;box-shadow:-2px 0 1px #3a5e91;}
+input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{border-top:solid 1px #0f2a4f;border-bottom:solid 1px #0f2a4f;border-left:solid 1px #2c5496;height:30px;top:-1px;left:-1px;-webkit-border-radius:16px 0 0 16px;border-radius:16px 0 0 16px;-webkit-background-clip:padding-box;background-clip:padding-box;}
 @media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}

src/stylesheets/css/Lungo.widgets.splash.css

@@ -1,4 +1,5 @@
-.splash article{height:100%;text-align:center;}
-.splash img{max-width:206px;margin:128px auto 32px;}
-.splash h1{margin:128px auto 16px;font-size:2.5em;font-weight:bold;}
-.splash .copyright{position:absolute;width:100%;bottom:4px;font-style:normal;}
+.splash{text-align:center;font-size:1.2em;}
+.splash img{max-width:206px;margin:92px auto 32px;}
+.splash h1{margin:92px auto 16px;font-size:2.2em;font-weight:bold;}
+.splash .button.big{margin-top:16px;}
+.splash .copyright{position:fixed;width:100%;bottom:8px;left:0px;font-size:0.8em;font-style:normal;}

src/stylesheets/less/Lungo.layout.less

@@ -9,51 +9,35 @@
 
 @import "mixins.less";
 
-/* @group <section> */
-body {
-	height: 100%;
-}
+@defaultTrasition : @easeOutSine;
 
+/* @group <section> */
 section{
 	position: absolute;
 	position: fixed;
 	width: 100%;
 	height: inherit;
 	z-index: 0;
-	-webkit-backface-visibility: hidden;
+	
 	.transform(translate3d(100%, 0, 0));
+	-webkit-backface-visibility: hidden;
+	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
 }
 
-section:first-child  {
-	z-index: 1;
+section:first-child {
 	.transform(translate3d(0%, 0, 0));
+	z-index: 1;
 }
 
-section.hide  {
-	z-index: 0;
+section.hide {
 	.transform(translate3d(-100%, 0, 0));
+	z-index: 0;
+	
 }
-section.show  {
-	 z-index: 1;
-	.transform(translate3d(0%, 0, 0));
-}
-
-section.static.hide  {
+section.show {
 	.transform(translate3d(0%, 0, 0));
+	 z-index: 1;
 }
-
-section.popup  {
-	.transform(translate3d(0, 100%, 0));
-}
-
-section.popup.show  {
-	.transform(translate3d(0, 0%, 0));
-}
-
-section.popup.hide  {
-	.transform(translate3d(0, -100%, 0));
-}
-
 /* @end */
 
 
@@ -62,10 +46,10 @@ header, footer  {
 	position: absolute;
 	left: 0px;
 	width: 100%;
-	height: 40px;
+	height: 38px;
 	display: block;
 	z-index: 2;
-	line-height: 40px;
+	line-height: 38px;
 }
 
 header  {
@@ -92,7 +76,7 @@ header .title {
 }
 
 section header a.button, section footer a.button  {
-	margin: 4px 3px auto;
+	margin: 3px 3px auto 4px;
 }
 
 section header a.button.icon, section footer a.button.icon  {
@@ -102,49 +86,18 @@ section header a.button.icon, section footer a.button.icon  {
 }
 /* @end */
 
-/* @group <nav> */
-nav  {
-	height: inherit;
-	text-align: center;
-	font-weight: normal;
-}
-
-nav a  {
-	display: inline-block;
-	padding: 0 6px;
-	height: inherit;
-	float: left;
-	font-size: 2.0em;
-}
-
-nav a abbr {
-	position: relative;
-	bottom: 3px;
-	margin-left: 2px;
-	display: none;
-	font-size: 0.5em;
-	font-weight: bold;
-}
-
-nav a.current abbr {
-	display: inline;
-}
-
-nav a.current {
-	.transition(all 0.3s ease-in-out);
-}
-/* @end */
-
 /* @group <aside> */
 aside {
 	position: absolute;
 	top: 0px;
 	bottom: 0px;
 	height: auto;
-	width: 0px;
+	width: 256px;
+	opacity: 0;
 }
+
 	aside.show {
-		width: 256px;
+		opacity: 1;
 	}
 
 header ~ aside {
@@ -155,12 +108,12 @@ footer ~ aside {
 	padding-bottom: 40px;
 }
 
-aside ~ article{
-	-webkit-transition: left 0.3s ease-in-out;
-	left: 0px;
+aside ~ article {
+	.transform(translate3d(0px, 0, 0));
+	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
 }
 
-aside a{
+aside a {
 	display: block;
 	width: 244px;
 	height: 40px;
@@ -171,7 +124,7 @@ aside a{
 	line-height: 40px;
 }
 
-	aside a .icon {
+	aside .icon {
 		width: 28px;
 		height: 28px;
 		float: left;
@@ -181,6 +134,16 @@ aside a{
 	    line-height: 1.0em;
 	    text-align: center;
 	}
+	
+	aside .anchor {
+		font-weight: bold;
+    	padding: 3px 10px 4px;
+	}
+	
+	aside .bubble {
+    	float: right;
+		margin: 12px 4px 0 0;
+	}
 
 @media handheld, only screen and (min-width: 768px) {
 	[data-target="aside"] {
@@ -188,11 +151,13 @@ aside a{
 	}
 
 	aside {
-		width: 256px;
+		opacity: 1;
 	}
 
 	aside ~ article{
+		width: auto !important;
     	left: 256px;
+    	right:  0px !important;
 	}
 }
 /* @end */
@@ -200,33 +165,115 @@ aside a{
 /* @group <article> */
 article {
 	position: absolute;
-	width: 100%;
-	height: auto;
+	width: inherit;
+	height: inherit;
 	top: 0px;
 	bottom: 0px;
 	display: block;
 	z-index: 0;
 	opacity: 0;
 }
+	
+	header ~ article { top: 40px; }	
+	
+	footer ~ article { bottom: 40px; }
 
-article.current {
-	z-index: 1;
-	opacity: 1;
+	article.current {
+		z-index: 1;
+		opacity: 1;
+	}
+	
+	article.aside { .transform(translate3d(256px, 0, 0)); }
+	
+	@media handheld, only screen and (min-width: 768px) {
+		article.aside { .transform(translate3d(0px, 0, 0)); }
+	}
+	
+	article .title {
+		font-size: 1.1em;
+		 margin: 0px 0 4px;
+	}
+		
+		article .title .icon { margin-right: 4px; }
+	
+	article .text {
+		margin: 4px 0 8px;
+		display: block;
+    	font-size: 0.9em;
+    	font-weight: normal;
+    	line-height: 1.4em;
+	}			
+/* @end */
+
+/* @group <nav> */
+nav  {
+	height: inherit;
+	text-align: center;
+	font-weight: normal;
 }
 
-.toolbar{
-	height:48px;
-	line-height:44px;
-	display:block;
+nav a  {
+	display: inline-block;
+	padding: 0 6px;
+	height: inherit;
+	float: left;
+	font-size: 2.0em;
+	line-height: 38px;
 }
 
-.toolbar a{
-	float:left;
-	padding:0;
-	font-size:2.0em;
+nav .icon {
+    
 }
 
-article.aside {
-    left: 256px !important;
+nav a abbr {
+	position: relative;
+	bottom: 3px;
+	margin-left: 2px;
+	display: none;
+	font-size: 0.5em;
+	font-weight: bold;
+}
+
+nav a.current abbr {
+	display: inline;
+}
+
+/*
+nav a.current {
+	.transition(all 0.3s @easeInOutCubic);
 }
-/* @end */
+*/
+
+
+.toolbar {
+	height: 48px;
+	display: block;
+}
+
+.toolbar a {
+	float: left;
+	padding: 0;
+	font-size: 2.2em;
+}
+
+.toolbar .icon {
+	display: block;
+	
+	line-height: 52px;
+}
+
+nav .bubble {
+    position: relative;
+    top:  -10px;
+    left: -10px;
+    margin-right: -16px;       
+    font-size: 0.4em;    
+}
+
+.toolbar .bubble {
+    top:  -60px;
+    left: 12px;
+    padding: 1px 4px;
+}
+
+/* @end */

src/stylesheets/less/Lungo.layout.list.less

@@ -7,79 +7,69 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
  
-.list li:not(.toolbar) {
-	padding: 8px 6px;
-	list-style-type: none;
-}
-
-.list li:not(.toolbar) a {
-	width: auto; 
-	display: block;
-}
-
-.list li:not(.toolbar) img, .list li:not(.toolbar) .icon {
-	float: left;
-	width: 32px;
-	height: 32px;
-	margin-right: 6px;	
-	font-size: 36px;
-	font-weight: normal;
-	line-height: 32px;
-}
+ @import "mixins.less";
+ 
+.list {
+    width: inherit;
+    font-size: 1.2em;
+    line-height: 1.05em;
+    font-weight: bold;
+}
+	.list li:not(.toolbar) {
+		padding: 8px 6px 8px 8px;
+		list-style-type: none;
+	}
 	
-.list strong, .list small {
-	overflow: hidden;  
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
+	.list a {
+	    display: block;
+	}
 	
-.list strong {
-	width: 75%;
-	font-size: 1.1em;
-}
-
-.list small {
-	display: block;
-	font-size: 0.9em;
-	font-style: normal;
-}
-
-/* @group .anchor */
-.list li.anchor { 	
-	font-size: 0.9em; 
-	font-weight: bold;
-	padding-top: 3px;
-	padding-bottom: 3px;
-}
+	.list li:not(.toolbar) img, .list li:not(.toolbar) .icon {
+		float: left;
+		width: 32px;
+		height: 32px;
+		margin-right: 6px;	
+		font-size: 36px;
+		font-weight: normal;
+	}
 	
-.list .anchor a {
-	padding: 0px;
-}
-
-.list .anchor .icon {
-	width: 14px !important;
-	height: 14px !important;	
-	margin-right: 4px !important; 	
-	font-size:  1.3em !important;
-	font-weight: normal;
-	line-height: 16px !important;	
-}
-
-.list .anchor .bubble {
-	display: none;
-}
-/* @end */
+	.list small {
+		display: block;
+		overflow: hidden;  
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		font-size: 0.85em;
+		font-weight: normal;
+	}
+	
+	
+	.list .icon {
+	    display: inline-block;
+	}
+	
+	.list .tip {
+    	font-size: 0.85em;
+    	font-weight: bold;
+	}
+	
+	.list .light {
+    	font-size: 0.9em;
+    	font-weight: normal;
+	}
 
-/* @group .info */
-.list li.info {
-	min-height: 48px;
-}
+	.list li.anchor { 	
+		font-size: 0.75em;
+		padding: 3px 6px !important;
+	}
+		.list .anchor .icon {
+			width: 14px !important;
+			height: 14px !important;	
+			margin-right: 4px !important; 	
+			font-size:  1.3em !important;
+			line-height: 16px !important;	
+		}
 
-.list li.info img, .list li.info .icon {
-	height: 48px;
-	width: 48px;
-	line-height: 48px;
-}
+		.list .anchor .bubble { display: none; }
 /* @end */
 
 /* @group .search */
@@ -115,15 +105,14 @@
 }
 /* @end */
 
-/* @group .bubble */
-.list .bubble { 
-	position: relative; 
-	right: 2px;
-	top: 6px;
-	float: right;
-	padding: 2px 3px 3px;	
-	line-height: 1.0em;
-	font-weight: bold; 
+/* @group .onright */
+.list .onright {
 	font-size: 0.85em;
 }
-/* @end */
+	.list .onright .icon {
+    	font-size: 1.2em !important;
+    	height: 12px !important;
+    	width: 12px !important;
+    	margin: 0px;
+	}
+/* @end */

src/stylesheets/less/Lungo.widgets.button.less

@@ -13,17 +13,17 @@ a.button {
 	display: inline-block;
 	height: 31px;
 	padding: 0 9px 0 8px;
-	color: white;
+	color: #fff !important;
 	outline: none;
 	.user-select(none);
-	.border-radius(3px);
-	/* @ToDo >> mixins.less */
-	background: #666 -webkit-gradient(linear,left top,left bottom,color-stop(.2, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0)));
+	.border-radius(2px);
+	
+	background: #2c2c2d -webkit-gradient(linear,left top,left bottom,color-stop(.2, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0)));
 	-webkit-box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
 	box-shadow: inset 0 1px 0 rgba(34,57,100,0.6), inset 1px 0 0 rgba(34,57,100,0.4), inset -1px 0 0 rgba(34,57,100,0.5), inset 0 -1px 0 rgba(34,57,100,0.6),inset 0 2px 0 rgba(255,255,255,.3),inset 0 0 4px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.29);
 		
 	font-size: 1.0em;
-	font-weight: bold;
+	font-weight: bold !important;
 	line-height: 32px;
 	text-align: center; 
 	text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
@@ -32,19 +32,13 @@ a.button {
 
 a.button:active {
   -webkit-box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
-  -moz-box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
   box-shadow:inset 0 1px 0 rgba(10,10,10,0.5), inset 1px 0 0 rgba(10,10,10,0.3), inset -1px 0 0 rgba(10,10,10,0.4), inset 0 -1px 0 rgba(10,10,10,0.5),inset 0 1px 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255, 0.3);
 }
 
-/* @group .button */
-a.button{background-color: #1d563f;}
-a.button:active{background-color: rgba(0,0,0,0.5);}
-/* @end */
-  
 a.button:disabled, a.button.disabled {
 	background: rgba(255,255,255,0.2);
-	border: 1px solid rgba(0,0,0,0.3);
-	color: rgba(0,0,0,0.5); 
+	border: 1px solid #999;
+	color: #999 !important; 
 	.box-shadow(inset 0 -5px 5px rgba(40,40,40,0.1));	
 	text-shadow: none;
 }
@@ -63,6 +57,7 @@ a.button.big {
 	width: 100%; 
 	margin-bottom: 4px;
 	padding: 6px 0;
+	
 	font-size: 16px;
 	line-height: 31px;
 }

src/stylesheets/less/Lungo.widgets.colour.less

@@ -6,30 +6,49 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
- 
-a.grey, .grey{background-color: #ccc;}
-a.grey:active{background-color: #b5b5b5;}
-a.red, .red{background-color: #e33100;}
-a.red:active{background-color: #c5280f;}
-a.lightgreen, .lightgreen{background-color: #91bd09;}
-a.lightgreen:active{background-color: #7ea41a;}
-a.green, .green{background-color: #009600;}
-a.green:active{background-color: #00770e;}
-a.blue, .blue{background-color: #237fd7;}
-a.blue:active{background-color: #1a69b6;}
-a.arcticblue, .arcticblue{background-color: #2daebf;}
-a.arcticblue:active{background-color: #238e9e;}
-a.orange, .orange{background-color: #ff5c00;}
-a.orange:active{background-color: #da4e15;}
-a.purple, .purple{background-color: #7b658d;}
-a.purple:active{background-color: #574765;}
-a.magenta, .magenta{background-color: #a9014b;}
-a.magenta:active{background-color: #831239;}
-a.pink, .pink{background-color: #ff007f;}
-a.pink:active{background-color: #de2870;}
-a.yellow, .yellow{background-color: #ffb515;}
-a.yellow:active{background-color: #dfa020;}
-a.twitter, .twitter:not(span){background-color: #35cdff;}
-a.twitter:active{background-color: #2bafda;}
-a.facebook, .facebook:not(span){background-color: #3b5998;}
-a.facebook:active{background-color: #2c4579;}
+
+@import "mixins.less";
+
+a.grey, .grey{background-color: @grey;}
+a.grey:active{background-color: @grey-active;}
+a.black, .grey{background-color: @black;}
+a.black:active{background-color: @black-active;}
+a.red, .red{background-color: @red;}
+a.red:active{background-color: @red-active;}
+a.lightgreen, .lightgreen{background-color: @lightgreen;}
+a.lightgreen:active{background-color: @lightgreen-active;}
+a.green, .green{background-color: @green;}
+a.green:active{background-color: @green-active;}
+a.blue, .blue{background-color: @blue;}
+a.blue:active{background-color: @blue-active;}
+a.arcticblue, .arcticblue{background-color: @arcticblue;}
+a.arcticblue:active{background-color: @arcticblue-active;}
+a.orange, .orange{background-color: @orange;}
+a.orange:active{background-color: @orange-active;}
+a.purple, .purple{background-color: @purple;}
+a.purple:active{background-color: @purple-active;}
+a.magenta, .magenta{background-color: @magenta;}
+a.magenta:active{background-color: @magenta-active;}
+a.pink, .pink{background-color: @pink;}
+a.pink:active{background-color: @pink-active;}
+a.yellow, .yellow{background-color: @yellow;}
+a.yellow:active{background-color: @yellow-active;}
+a.twitter, .twitter:not(span){background-color: @twitter;}
+a.twitter:active{background-color: @twitter-active;}
+a.facebook, .facebook:not(span){background-color: @facebook;}
+a.facebook:active{background-color: @facebook-active;}
+
+li.grey{ box-shadow: inset 3px 0px 0px @grey;}
+li.black{ box-shadow: inset 3px 0px 0px @black;}
+li.red{ box-shadow: inset 3px 0px 0px @red;}
+li.lightgreen{ box-shadow: inset 3px 0px 0px @lightgreen;}
+li.green{ box-shadow: inset 3px 0px 0px @green;}
+li.blue{ box-shadow: inset 3px 0px 0px @blue;}
+li.arcticblue{ box-shadow: inset 3px 0px 0px @arcticblue;}
+li.orange{ box-shadow: inset 3px 0px 0px @orange;}
+li.purple{ box-shadow: inset 3px 0px 0px @purple;}
+li.magenta{ box-shadow: inset 3px 0px 0px @magenta;}
+li.pink{ box-shadow: inset 3px 0px 0px @pink;}
+li.yellow{ box-shadow: inset 3px 0px 0px @yellow;}
+li.twitter{ box-shadow: inset 3px 0px 0px @twitter;}
+li.facebook{ box-shadow: inset 3px 0px 0px @facebook;}

src/stylesheets/less/Lungo.widgets.form.less

@@ -9,18 +9,21 @@
 
 @import "mixins.less";
 
-.form, form { 
-	position: relative; 
-	margin: 8px; 
-	font-size: 1.15em;
-	font-weight: bold;
+.form, form {
+	font-size: 0.95em;
+	width: inherit !important;
+}
+
+label:not(.checkbox) {
+    display: block;
+    margin-bottom: 2px;
 }
 
 input:not([type=checkbox]), textarea, select {  
 	display: inline-block; 
-	padding: 6px 6px 5px;
-	width: 95%; 
-	margin-bottom: 8px; 
+	padding: 5px;
+	width: 95%;
+	margin-bottom: 2px;
 	
 	outline: none; 	
 	-webkit-appearance: none;
@@ -29,17 +32,24 @@ input:not([type=checkbox]), textarea, select {
 	font-weight: bold;
 	line-height: 1.25em;
 }
-	
 
+/* @group search */
 input[type=search] {
-	width: 100%;
-	z-index: 1;
-	margin: 0px;
+	width: 86%;
 }
+	input[type=search] + .button {
+	    float: right;
+	    padding: 0px;
+	    width: 32px;
+	}
+	input[type=search] + .button .icon{
+	    font-size: 20px !important;
+	}
 
-input[type=search]:before {
-	content:"hola";
-}
+
+
+
+/* @end */
 
 select{ 
 	width: 100%;
@@ -74,7 +84,7 @@ label.select {
 input[type="checkbox"], input[type="radio"]{
 	width: 74px;
 	float: left;
-	z-index: 1;
+	z-index: 2;
 }
 
 input[type="checkbox"] + span::after,

src/stylesheets/less/Lungo.widgets.less

@@ -9,44 +9,81 @@
 
 @import "mixins.less";
 
-.scroll, scroll { 
-	position: relative; 
-	display: block; 
-	width: 100%; 
+/* @group scroll */
+
+.scrollable { 
+	position: absolute;
+	display: block;
+	width: 100%;
 	height: 100%;
+	
 }
 
-section.copyright {
-	margin-top: 128px;
-	z-index: 1000;
-	background: #000;
-	text-align: center;	
-	font-size: 24px;
+.scroll {
+  	overflow: scroll;
+  	-webkit-overflow-scrolling: touch;
 }
 
-section.copyright img{
-	max-height: 128px;
+.scroll .vertical {
+    
 }
+/* @end */
 
-/* @group .classes */
-.scroll {
-  	overflow: scroll;
-  	-webkit-overflow-scrolling: touch;
+/* @group .position */
+.onleft { float: left; }
+
+.onright { float: right;}
+	
+.indented {
+    width: auto;
+    height: auto;
+	padding: 10px 10px 0px;
 }
-.hidden { 
-	display: none; }
-.onleft { 
-	float: left; }
-.onright { 
-	float: right;}
-.framed{
-	border: 2px solid #fff;}
-.rounded{
-	.border-radius(4px);}
-.semi-opacity{
-	opacity: 0.5;
+
+.indented ul {
+		margin-bottom: 10px;
+		height: auto;
+		width: inherit;
+		
+	}
+	.rounded ul { .border-radius(4px); }	
+	.rounded li:first-child { .border-radius(4px 4px 0px 0px); }
+	.rounded li:last-child { .border-radius(0px 0px 4px 4px); }
+
+.margin-top-4{ margin-top: 4px; }
+/* @end */
+
+/* @group .visibility */
+.hidden { display: none; }
+.semi-opacity{ opacity: 0.5; }
+/* @end */
+
+/* @group .sizing */
+.size32 {
+	font-size: 32px;
+    height: 32px;
+    width: 32px;
+    line-height: 32px;
 }
-.margin-top-4{
-	margin-top: 4px;
+
+.mini {
+	font-size: 20px !important;
+    height: 16px !important;
+    width: 16px !important;
+    line-height: 16px !important;
 }
 /* @end */
+
+.framed { border: 2px solid #fff;}
+
+.round { .border-radius(4px); }
+
+/* @end */
+
+.bubble {
+	padding: 2px 4px 3px;
+	.border-radius(2px);		
+	font-size: 0.8em;
+	font-weight: bold;		
+	line-height: 1.0em;
+}

src/stylesheets/less/Lungo.widgets.splash.less

@@ -7,26 +7,32 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
  
-.splash article { 
-	height: 100%;
+.splash{ 
 	text-align: center;
+	font-size: 1.2em;
 }
 
 .splash img {
 	max-width: 206px;
-	margin: 128px auto 32px;
+	margin: 92px auto 32px;
 }
 	
 .splash h1 {
-	margin: 128px auto 16px;
+	margin: 92px auto 16px;
 	
-	font-size: 2.5em; 
+	font-size: 2.2em; 
 	font-weight: bold;
 }
-	
+
+.splash .button.big {
+    margin-top: 16px;
+}
+
 .splash .copyright { 
-	position: absolute; 
+	position: fixed; 
 	width: 100%; 
-	bottom: 4px;
+	bottom: 8px;
+	left: 0px;
+	font-size: 0.8em;
 	font-style: normal; 
 }

src/stylesheets/less/mixins.less

@@ -10,22 +10,50 @@
 //============================================================
 // Variables
 //
-// Grays
+
 @white:             #fff;
-@grayLighter:       #ccc;
-@grayLight:         #777;
-@gray:              #555;
-@grayDark:          #333;
-@black:             #000;
-
-// Accent Colors
-@blue:              #08b5fb;
-@green:             #46a546;
-@red:               #9d261d;
-@yellow:            #ffc40d;
-@orange:            #f89406;
-@pink:              #c3325f;
-@purple:            #7a43b6;
+@black:				#000;
+@black-active:		#000;
+
+@grey:       		#ccc;
+@grey-active:		#b5b5b5;
+
+@red:         		#e33100;
+@red-active:        #c5280f;
+
+@lightgreen:        #91bd09;
+@lightgreen-active: #7ea41a;
+
+@green:         	#009600;
+@green-active:      #00770e;
+
+@blue:         		#237fd7;
+@blue-active:       #1a69b6;
+
+@arcticblue:        #2daebf;
+@arcticblue-active: #238e9e;
+
+@orange:         	#ff5c00;
+@orange-active:     #da4e15;
+
+@purple:         	#7b658d;
+@purple-active:     #574765;
+
+@magenta:         	#a9014b;
+@magenta-active:    #831239;
+
+@pink:         		#ff007f;
+@pink-active:       #de2870;
+
+@yellow:         	#ffb515;
+@yellow-active:     #dfa020;
+
+@twitter:        	#35cdff;
+@twitter-active:    #2bafda;
+
+@facebook:         	#3b5998;
+@facebook-active:   #2c4579;
+
 //============================================================
 
 //============================================================
@@ -43,11 +71,9 @@
 
 .border-radius() {
 	-webkit-border-radius: @arguments;
-		-moz-border-radius: @arguments;
 		border-radius: @arguments;
 
 	-webkit-background-clip: padding-box;
-		-moz-background-clip: padding;
 		background-clip: padding-box;
 }
 
@@ -70,7 +96,6 @@
 
 .box-shadow() {
     -webkit-box-shadow: @arguments;
-       -moz-box-shadow: @arguments;
             box-shadow: @arguments;
 }
 
@@ -91,9 +116,6 @@
 //============================================================
 .transform() {
     -webkit-transform: @arguments;
-       -moz-transform: @arguments;
-        -ms-transform: @arguments;
-         -o-transform: @arguments;
             transform: @arguments;
 }
 
@@ -112,10 +134,7 @@
 
 .translate() {
     -webkit-transform: translate(@arguments);
-       -moz-transform: translate(@arguments);
-        -ms-transform: translate(@arguments);
-         -o-transform: translate(@arguments);
-            transform: translate(@arguments);
+		transform: translate(@arguments);
 }
 
 
@@ -133,9 +152,6 @@
 
 .scale() {
     -webkit-transform: scale(@arguments);
-       -moz-transform: scale(@arguments);
-        -ms-transform: scale(@arguments);
-         -o-transform: scale(@arguments);
             transform: scale(@arguments);
 }
 
@@ -153,9 +169,6 @@
 
 .rotate() {
     -webkit-transform: rotate(@arguments);
-       -moz-transform: rotate(@arguments);
-        -ms-transform: rotate(@arguments);
-         -o-transform: rotate(@arguments);
             transform: rotate(@arguments);
 }
 
@@ -173,9 +186,6 @@
 
 .backface-visibility() {
     -webkit-backface-visibility: @arguments;
-       -moz-backface-visibility: @arguments;
-        -ms-backface-visibility: @arguments;
-         -o-backface-visibility: @arguments;
             backface-visibility: @arguments;
 }
 
@@ -196,9 +206,6 @@
 
 .transition() {
     -webkit-transition: @arguments;
-       -moz-transition: @arguments;
-        -ms-transition: @arguments;
-         -o-transition: @arguments;
             transition: @arguments;
 }
 
@@ -218,9 +225,6 @@
 
 .user-select() {
 	-webkit-user-select: @arguments; 
-	   -moz-user-select: @arguments;
-	    -ms-user-select: @arguments;
-         -o-user-select: @arguments;
             user-select: @arguments;
 }
 

src/view/Lungo.View.Aside.js

@@ -2,7 +2,7 @@
  * Initialize the <articles> layout of a certain <section>
  *
  * @namespace LUNGO.View
- * @class Article
+ * @class Aside
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  * @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
@@ -11,31 +11,10 @@
 LUNGO.View.Aside = (function(lng, undefined) {
 
     var toggle = function(section_id) {
-        if (_isVisible(section_id)) {
-            _hide(section_id);
-        } else {
-            _show(section_id);
-        }
-    };
-
-    var _show = function(section_id) {
-        lng.Dom.query(section_id + ' aside').addClass('show');
-
-        var articles = lng.Dom.query(section_id + ' article');
-        articles.toggleClass('aside');
-    };
-
-    var _hide = function(section_id) {
         var articles = lng.Dom.query(section_id + ' article');
         articles.toggleClass('aside');
     };
 
-    var _isVisible = function(section_id) {
-        var isVisible = lng.Dom.query(section_id + ' aside').hasClass('show');
-
-        return isVisible;
-    };
-
     return {
         toggle: toggle
     };

src/view/Lungo.View.Element.js

@@ -0,0 +1,49 @@
+/**
+ * Initialize the <articles> layout of a certain <section>
+ *
+ * @namespace LUNGO.View
+ * @class Element
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+LUNGO.View.Element = (function(lng, undefined) {
+
+    var SELECTORS = {
+        BUBBLE: '.bubble.count'
+    };
+    var BINDING_START = '{{';
+    var BINDING_END = '}}';
+
+
+    var count = function(selector, count) {
+        var element = lng.Dom.query(selector);
+
+        if (element ) {
+            if (count > 0) {
+                _setBubble (element, count);
+            } else {
+                element.children(SELECTORS.BUBBLE).remove();
+            }
+        }
+    };
+
+    var _setBubble = function(element, count) {
+        var bubbles = element.children(SELECTORS.BUBBLE);
+        var total_bubbles = bubbles.length;
+
+        if (total_bubbles > 0) {
+            bubbles.html(count);
+        } else {
+            var count_html = LUNGO.Attributes.Data.Count.html;
+            var html_binded = count_html.replace(BINDING_START + 'value' + BINDING_END, count);
+
+            element.append(html_binded);
+        }
+    }
+
+    return {
+        count: count
+    };
+
+})(LUNGO);

src/view/Lungo.View.Scroll.js

@@ -1,6 +1,6 @@
-/** 
+/**
  * Wrapper of the third library iScroll
- * 
+ *
  * @namespace LUNGO.View
  * @class Scroll
  * @requires Zepto
@@ -27,6 +27,8 @@ LUNGO.View.Scroll = (function(lng, undefined) {
 
     var CACHE_KEY = 'scrolls';
 
+    var HEADER_FOOTER_BLEEDING = 90;
+
     /**
      * Creates a new iScroll element.
      *
@@ -38,13 +40,15 @@ LUNGO.View.Scroll = (function(lng, undefined) {
     var create = function(id, properties) {
         if (id) {
             var scroll = lng.Dom.query('#' + id);
-            var scroll_children = scroll.children();
-            var need_scroll = (scroll_children.height() >= scroll.height());
 
-            if (scroll_children.length > 0 && need_scroll) {
-                properties = _mixProperties(scroll, properties);
-                _saveScrollInCache(id, properties);
-            }
+            //ToDo >> Refactor
+            setTimeout(function() {
+                if (_needScroll(scroll)) {
+                    properties = _mixProperties(scroll, properties);
+                    _saveScrollInCache(id, properties);
+                }
+            }, 100);
+
         } else {
             lng.Core.log(3, 'ERROR: Impossible to create a <scroll> without ID');
         }
@@ -97,6 +101,24 @@ LUNGO.View.Scroll = (function(lng, undefined) {
         return (scroll.hasClass(HORIZONTAL_CLASS)) ? true : false;
     };
 
+    var _needScroll = function(scroll) {
+        var is_necessary = false;
+
+        var element = scroll[0];
+        if (element.clientHeight < element.scrollHeight) {
+            is_necessary = true;
+            var child_height = element.scrollHeight + HEADER_FOOTER_BLEEDING;
+            _resizeChildContainer(element, child_height);
+        }
+
+        return is_necessary;
+    };
+
+    var _resizeChildContainer = function(element, height) {
+        var child_container = lng.Dom.query(element).children().first();
+        child_container.css('height', height + 'px');
+    };
+
     var _saveScrollInCache = function(id, properties) {
         _createScrollIndexInCache();
 

src/view/Lungo.View.Template.List.js

@@ -73,7 +73,7 @@ LUNGO.View.Template.List = (function(lng, undefined) {
 
     var _createScroll = function() {
         var container_id_for_scroll = lng.Dom.query('#' + _config.container_id).parent().attr('id');
-        var list_config = {snap:'li'};
+        var list_config = { snap: 'li' };
 
         lng.View.Scroll.create(container_id_for_scroll, list_config);
     };

vendor/build.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-VERSION="1.0.3"
+VERSION="1.0.4"
 
 #define paths
 COMPILER=google-compiler/compiler.jar
@@ -43,7 +43,7 @@ if [[ $WISH == "Y" || $WISH == "y" ]] ; then
     #View
     DIR=$LUNGO_SOURCES"view/"$LUNGO_NAMESPACE"View."
     echo -e "\033[33m  [DIR]: "$LUNGO_SOURCES"view/"
-    FILES=(Article.js Resize.js Template.js Template.Binding.js Template.List.js Scroll.js Aside.js)
+    FILES=(Article.js Resize.js Template.js Template.Binding.js Template.List.js Scroll.js Aside.js Element.js)
     for file in "${FILES[@]}"
     do
         FILES_TO_COMPILE=$FILES_TO_COMPILE" --js "$DIR$file
@@ -63,7 +63,7 @@ if [[ $WISH == "Y" || $WISH == "y" ]] ; then
     #Attributes
     DIR=$LUNGO_SOURCES"attributes/"$LUNGO_NAMESPACE"Attributes."
     echo -e "\033[33m  [DIR]: "$LUNGO_SOURCES"attributes/"
-    FILES=(Data.js Section.js)
+    FILES=(Data.js)
     for file in "${FILES[@]}"
     do
         FILES_TO_COMPILE=$FILES_TO_COMPILE" --js "$DIR$file
@@ -99,7 +99,7 @@ if [[ $WISH == "Y" || $WISH == "y" ]] ; then
     echo -e "\033[32m  [BUILD]: lungo-"$VERSION.$MINIFIED.js"\033[0m"
 
     #PACKED Version
-    FILES_TO_COMPILE=" --js "$LUNGO_SOURCES"lib/zepto.js --js "$LUNGO_SOURCES"lib/iscroll.js"$FILES_TO_COMPILE
+    FILES_TO_COMPILE=" --js "$LUNGO_SOURCES"lib/zepto.js --js "$LUNGO_SOURCES"lib/iscroll-lite.js"$FILES_TO_COMPILE
     java -jar $COMPILER $FILES_TO_COMPILE --js_output_file $BUILDPATH/lungo-$VERSION.$PACKED.js
     echo -e "\033[32m  [BUILD]: lungo-"$VERSION.$PACKED.js"\033[0m"
 fi
@@ -122,7 +122,8 @@ if [[ $WISH == "Y" || $WISH == "y" ]] ; then
 
         FILES_TO_COMPRESS=$FILES_TO_COMPRESS" "$DIR$LUNGO_NAMESPACE$file".css"
     done
-    FILES_TO_COMPRESS=$FILES_TO_COMPRESS" "$DIR$LUNGO_NAMESPACE"widgets.icon.css"
+    #FILES_TO_COMPRESS=$FILES_TO_COMPRESS" "$DIR$LUNGO_NAMESPACE"widgets.icon.css"
+    cat $DIR$LUNGO_NAMESPACE"widgets.icon.css" > $BUILDPATH/lungo-$VERSION.$MINIFIED.icons.css
 	cat $FILES_TO_COMPRESS > $BUILDPATH/lungo-$VERSION.$MINIFIED.css
 
     #for file in "${FILES[@]}"