Example 2.1

example/app/asides/features.html

@@ -1,6 +1,6 @@
 <aside id="features" class="left">
     <header data-title="Features">
-        <nav class="right box">
+        <nav class="right">
             <a href="#" class="buttons" data-icon="settings"></a>
         </nav>
     </header>
@@ -79,12 +79,14 @@
             </li>
 
             <!-- Layout Events -->
+            <!--
             <li>
                 <a href="#layoutevents" data-router="section" data-async="app/sections/layoutevents.html">
                     <div class="tag right">2</div>
                     <strong>Layout Events</strong>
                 </a>
             </li>
+            -->
 
             <!-- Notifications -->
             <li>
@@ -126,13 +128,6 @@
                 </a>
             </li>
 
-            <!-- Grid System -->
-            <li>
-                <a href="#grid" data-router="section" data-async="app/sections/grid.html">
-                    <strong>Grid System</strong>
-                </a>
-            </li>
-
             <!-- Theme roller -->
             <li>
                 <a href="#themeroller" data-router="section" data-async="app/sections/themeroller.html">
@@ -140,6 +135,13 @@
                     <strong>Theme roller</strong>
                 </a>
             </li>
+
+            <!-- Grid System -->
+            <li>
+                <a href="#grid" data-router="section" data-async="app/sections/grid.html">
+                    <strong>Grid System</strong>
+                </a>
+            </li>
         </ul>
     </article>
 </aside>

example/app/events.touch.js

@@ -12,3 +12,7 @@
 $$("[data-action=clean_console]").tap(function(event) {
     $$('.console.output').html("");
 });
+
+$$("[data-action=twitter]").tap(function(event) {
+    window.open("https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps", "_blank");
+});

example/app/scaffold.coffee

@@ -1,66 +0,0 @@
-sections = [
-    id: "main"
-    transition: "slide"
-    header:
-        title: "hola"
-        back: true
-        nav:
-            position: "right"
-            items: [
-                href: "#", icon: "home", label: "Home", tap: App.Session
-            ,
-                href: "b", router: "section", label: "Section B"
-            ]
-    footer:
-        nav:
-            class: "with-labels"
-            items: [
-                href: "#", "data-icon": "home", "data-label": "ir"
-            ,
-                href: "#", "data-icon": "home", "data-label": "ir"
-            ]
-
-    articles: [
-        id: "main-article"
-    ,
-        id: "sksks"
-    ]
-,
-    id: "item"
-    header:
-        back: true
-    articles: [
-        id: "pending", class: "list scroll"
-    ,
-        id: "finished", class: "list scroll"
-    ]
-]
-
-
-section_main =
-    id: "main"
-    transition: "slide"
-    header:
-        title: "Lungo Scaffold"
-        subtitle: "definition"
-        nav:
-            position: "left"
-            items: [
-                href:"Back", icon:"home", label:"return"
-            ]
-
-    footer:
-        nav:
-            class: "with-labels"
-            items: [
-                href:"#", icon:"user", label: "Profile", callback: -> alert "user"
-            ,
-                href:"#", icon:"map", label:"Map", callback: -> alert "map"
-             ,
-                href:"#", icon:"settings", label:"Config", callback: -> alert "Congiguration"
-            ]
-
-section_login =
-    id: "login"
-    article:
-        class: "list scroll"

example/app/sections/aside.html

@@ -1,7 +1,7 @@
 <section id="aside" data-transition="slide">
     <header data-title="Asides">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
     <article id="aside-example" class="active indented">

example/app/sections/carousel.html

@@ -1,14 +1,13 @@
 <section id="carousel" data-transition="slide">
     <header>
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
-
         <div class="centered title">Photo Nº<span>1</span></div>
 
-        <nav class="right box">
-            <a href="#" data-action="carousel" data-direction="left" data-icon="left"></a>
-            <a href="#" data-action="carousel" data-direction="right" data-icon="right"></a>
+        <nav class="right">
+            <a href="#" data-action="carousel" data-direction="left" data-icon="left" class="button"></a>
+            <a href="#" data-action="carousel" data-direction="right" data-icon="right" class="button"></a>
         </nav>
     </header>
     <article id="carousel-article" class="active block" data-control="carousel">

example/app/sections/color.html

@@ -1,7 +1,7 @@
 <section id="color" data-transition="slide">
     <header data-title="Colors">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
     <article class="active scroll indented">

example/app/sections/data-attribute.html

@@ -1,7 +1,7 @@
 <section id="data" data-transition="slide">
     <header data-title="Data Attributes">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 
@@ -12,7 +12,7 @@
                 <small>Creates an icon Lungo vectorized</small>
             </li>
 
-            <li data-image="http://lungo.tapquo.com/resources/icon-144.png">
+            <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                 <strong>data-image</strong>
                 <small>Instance a &lt;img&gt; automatically</small>
             </li>

example/app/sections/form.html

@@ -1,10 +1,10 @@
 <section id="form" data-transition="slide">
     <header data-title="Form Elements">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
         <nav class="right">
-            <a href="#" class="button" data-icon="share" data-label="Share"></a>
+            <a href="#form-extras" data-router="article" class="button" data-label="Extras"></a>
         </nav>
     </header>
 
@@ -31,7 +31,6 @@
                 <textarea></textarea>
             </fieldset>
 
-            <a href="#form-extras" data-router="article" class="button anchor accept" data-label="View Extra Elements"></a>
         </div>
     </article>
 

example/app/sections/grid.html

@@ -1,7 +1,7 @@
 <section id="grid" data-transition="slide">
     <header data-title="Grid System">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 

example/app/sections/icon.html

@@ -1,7 +1,7 @@
 <section id="icon" data-transition="slide">
     <header class="extended" data-title="Icons Repository">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 

example/app/sections/layout.html

@@ -1,10 +1,10 @@
 <section id="layout" data-transition="slide">
     <header data-title="Layout" class="extended">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
         <nav class="right">
-            <a href="#splash" data-router="section" data-async="app/sections/splash.html" class="button" data-icon="user" data-label="Splash"></a>
+            <a href="#splash" data-router="section" data-async="app/sections/splash.html" data-icon="lock" class="button"></a>
         </nav>
     </header>
 

example/app/sections/layoutevents.html

@@ -1,7 +1,7 @@
 <section id="layoutevents" data-transition="slide">
     <header data-title="Layout Events">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 

example/app/sections/list.html

@@ -1,7 +1,7 @@
 <section id="list" data-transition="slide">
     <header data-title="Lists" class="extended">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 
@@ -105,11 +105,11 @@
             </li>
 
             <li class="anchor">With data-icon or data-image attribute</li>
-            <li data-image="http://lungo.tapquo.com/resources/icon-144.png">
+            <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                 <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
                 <small>&lt;small&gt;</small>
             </li>
-            <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon-144.png">
+            <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                 <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
                 <small>&lt;small&gt;</small>
             </li>
@@ -233,11 +233,11 @@
 
 
             <li class="anchor">With data-icon or data-image attribute</li>
-            <li data-image="http://lungo.tapquo.com/resources/icon-144.png">
+            <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                 <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
                 <small>&lt;small&gt;</small>
             </li>
-            <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon-144.png">
+            <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                 <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
                 <small>&lt;small&gt;</small>
             </li>

example/app/sections/notification.html

@@ -1,7 +1,7 @@
 <section id="notification" data-transition="slide">
     <header data-title="Notifications">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 

example/app/sections/pull.html

@@ -1,7 +1,7 @@
 <section id="pull" data-pull="normal" data-transition="slide">
     <header data-title="Pull & Refresh">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 

example/app/sections/scroll.html

@@ -1,7 +1,7 @@
 <section id="scroll" data-transition="slide">
     <header data-title="Scrolls">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 

example/app/sections/splash.html

@@ -1,11 +1,11 @@
 <section id="splash" data-transition="slide">
     <article class="active indented splash">
-        <img src="http://lungo.tapquo.com/resources/logo_splash.png"/>
-        <form class="rounded">
+        <img src="http://cdn.tapquo.com/lungo/logo.png"/>
+        <form class="roundeds">
             <input type="text" placeholder="Your username" id="txt-signup-name" value="">
             <input type="password" placeholder="Your password" id="txt-signup-password" value="">
-            <a href="#" class="button theme anchor" data-icon="checkmark" data-icon="user">Login</a>
-            <a href="#back" data-router="section" class="button accept anchor" data-icon="left">Return to Kichensink</a>
+            <a href="#" class="button theme anchor large" data-icon="lock" data-icon="user">Login</a>
+            <a href="#back" data-router="section" class="button secondary anchor" data-icon="home">Return to Kichensink</a>
         </form>
     </article>
 </section>

example/app/sections/themeroller.html

@@ -1,7 +1,7 @@
 <section id="themeroller" data-transition="slide">
     <header data-title="Theme roller">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 

example/app/sections/touchevents.html

@@ -1,7 +1,7 @@
 <section id="touchevents" data-transition="slide">
     <header data-title="Test Gestures">
-        <nav class="box">
-            <a href="#back" data-router="section" data-label="Back"></a>
+        <nav>
+            <a href="#back" data-router="section" data-icon="home"></a>
         </nav>
     </header>
 

example/components/lungo/lungo.css

@@ -28,8 +28,8 @@ section[data-transition="fade"]:hide{opacity:0}
 header,footer{position:absolute;left:0;width:100%;display:block;z-index:1}
 header{top:0;height:44px;line-height:44px;}
 header .title{margin-left:4px;float:left;z-index:-1;font-size:1.44em;}
-header .title img{height:24px}
 header .title.centered{position:absolute;left:32px;right:32px;text-align:center;display:inline-block}
+header img.title{height:26px;margin:9px auto}
 footer{bottom:0;height:44px}
 
 article{position:absolute;top:0;bottom:0;width:inherit;height:auto;visibility:hidden;display:none;z-index:0;}
@@ -103,12 +103,12 @@ aside.small nav a:first-child{margin-top:8px}
 nav.groupbar,footer nav{display:-webkit-box;display:-moz-box;display:box;-webkit-box-pack:justify;-moz-box-pack:justify;box-pack:justify;width:100%;}
 nav.groupbar > a,footer nav > a{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}
 header nav a{padding:0 11px !important;z-index:1000;float:left}
-header nav a.button{margin:6px 2px 0 2px;font-size:.9em;line-height:30px;}
-header nav a.button > .icon{font-size:1.3em;height:18px;display:inline-block}
+header nav .button,header nav button{margin:6px 2px 0 2px;line-height:31px !important;}
+header nav .button > .icon,header nav button > .icon{font-size:1.5em;position:relative;top:3px;height:20px;width:20px;line-height:20px;display:inline-block}
 header nav.right a.button:last-child{margin-right:6px}
 header nav:not(.right) a.button:first-child{margin-left:6px}
 header nav a:not(.button){height:44px;}
-header nav a:not(.button) > .icon{font-size:1.7em}
+header nav a:not(.button) > .icon{font-size:1.8em}
 header nav .tag{position:relative;top:-12px;left:-12px;margin-right:-20px}
 header nav abbr{font-size:.9em;font-weight:700}
 header nav .icon ~ abbr{margin-left:4px;float:right}
@@ -141,7 +141,7 @@ footer nav.with-labels abbr{display:block !important;margin-top:-8px;z-index:1;f
 .framed{border:2px solid #fff}
 .round{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
 .block{display:block}
-.tag{display:inline-block;padding:0 3px;font-size:11px;line-height:1.3em;text-align:center}
+.tag{display:inline-block;padding:0 3px;font-size:11px !important;line-height:1.25em;height:1.35em;text-align:center}
 .margin.bottom{margin-bottom:5px}
 [data-control=carousel]{overflow:hidden;list-style:none;margin:0}
 .text.thin{font-weight:300}
@@ -303,8 +303,8 @@ section.show > [data-control="pull"].rotate > .icon{-webkit-transform:rotate(180
 section.show > [data-control="pull"].refresh > .icon{display:none}
 section.show > [data-control="pull"].refresh > .loading{display:inline-block}
 
-.splash{text-align:center;font-size:1.2em;}
-.splash > form{margin:28px}
+.splash{text-align:center;}
+.splash > form{margin:24px 32px}
 .splash img{max-width:206px;margin:20% auto 0%}
 .splash h1{margin-top:20%;font-size:2.2em;font-weight:bold}
 .splash .button{margin-top:10px}

example/components/lungo/theme.green.css

@@ -83,17 +83,17 @@ aside > header {
 section > header > nav a {
   color: #fff;
 }
-section > header > nav.box:not(.right) a {
+section > header > nav:not(.right) a {
   -webkit-box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
   -moz-box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
   box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
 }
-section > header > nav.box.right a {
+section > header > nav.right a {
   -webkit-box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
   -moz-box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
   box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
 }
-section > header > nav.box a:active {
+section > header > nav a:active {
   background: #369a79;
 }
 section > nav.groupbar > a.active {
@@ -127,17 +127,17 @@ aside nav a.active .icon {
 aside nav a:not(.active) .icon {
   color: #888;
 }
-aside nav.box:not(.right) a {
+aside nav:not(.right) a {
   -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
   -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
   box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
 }
-aside nav.box.right a {
+aside nav.right a {
   -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
   -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
   box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
 }
-aside nav.box a:active {
+aside nav a:active {
   background: #141414;
 }
 /* -------------------------- LISTS -------------------------- */

example/components/lungo/theme.grey.css

@@ -82,17 +82,17 @@ aside > header {
 section > header > nav a {
   color: #fff;
 }
-section > header > nav.box:not(.right) a {
+section > header > nav:not(.right) a {
   -webkit-box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
   -moz-box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
   box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
 }
-section > header > nav.box.right a {
+section > header > nav.right a {
   -webkit-box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
   -moz-box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
   box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
 }
-section > header > nav.box a:active {
+section > header > nav a:active {
   background: #a2a2a2;
 }
 section > nav.groupbar > a.active {
@@ -126,17 +126,17 @@ aside nav a.active .icon {
 aside nav a:not(.active) .icon {
   color: #888;
 }
-aside nav.box:not(.right) a {
+aside nav:not(.right) a {
   -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
   -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
   box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
 }
-aside nav.box.right a {
+aside nav.right a {
   -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
   -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
   box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
 }
-aside nav.box a:active {
+aside nav a:active {
   background: #141414;
 }
 /* -------------------------- LISTS -------------------------- */

example/components/lungo/theme.lungo.css

@@ -39,6 +39,9 @@ section > header {
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
   box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #03b1ff, inset 0 -1px 0 #007db5;
   color: #fff;
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
 }
 section > footer,
 section nav.groupbar {
@@ -53,7 +56,7 @@ section > [data-control="pull"] {
 }
 section > article.splash,
 section > [data-control="pull"].splash {
-  background: #0093d5;
+  background: #222;
   color: #fff;
 }
 section.aside {
@@ -80,21 +83,14 @@ aside > header {
   box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
 }
 /* -------------------------- NAVIGATION -------------------------- */
-section > header > nav a {
-  color: #fff;
+section > header > nav a:not(.button) {
+  color: #00608a;
+  -webkit-text-shadow: 0 1px 0 #20baff;
+  -moz-text-shadow: 0 1px 0 #20baff;
+  text-shadow: 0 1px 0 #20baff;
 }
-section > header > nav.box:not(.right) a {
-  -webkit-box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5;
-  -moz-box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5;
-  box-shadow: 1px 0 0 #03b1ff, inset -1px 0 0 #007db5;
-}
-section > header > nav.box.right a {
-  -webkit-box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5;
-  -moz-box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5;
-  box-shadow: -1px 0 0 #03b1ff, inset 1px 0 0 #007db5;
-}
-section > header > nav.box a:active {
-  background: #007db5;
+section > header > nav a:not(.button):active {
+  color: #004a6b;
 }
 section > nav.groupbar > a.active {
   -webkit-box-shadow: inset 0 -3px 0 #0093d5;
@@ -121,24 +117,11 @@ section > footer > nav > a.active {
   -moz-box-shadow: inset 0 3px 0 #0093d5;
   box-shadow: inset 0 3px 0 #0093d5;
 }
-aside nav a.active .icon {
-  color: #fff;
-}
-aside nav a:not(.active) .icon {
-  color: #888;
-}
-aside nav.box:not(.right) a {
-  -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
-  -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
-  box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+aside nav a {
+  color: #4e4e4e;
 }
-aside nav.box.right a {
-  -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
-  -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
-  box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
-}
-aside nav.box a:active {
-  background: #141414;
+aside nav a:active {
+  color: #919191;
 }
 /* -------------------------- LISTS -------------------------- */
 section .list li {
@@ -304,8 +287,22 @@ footer .tag:not(.icon) {
   color: #fff;
 }
 /* -------------------------- BUTTONS -------------------------- */
-a.button,
-button {
+header .button,
+header button {
+  background-color: #007db5;
+  -webkit-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
+  -moz-box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
+  box-shadow: 0 1px 0 #03b1ff, inset 0 1px 0 #00608a;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+header .button:active,
+header button:active {
+  background-color: #005880;
+}
+article .button,
+article button {
   -webkit-border-radius: FORM-border-radius;
   -moz-border-radius: FORM-border-radius;
   border-radius: FORM-border-radius;
@@ -318,39 +315,39 @@ button {
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
   border: solid 1px rgba(0,0,0,0.1);
 }
-a.button:active,
-button:active {
+article .button:active,
+article button:active {
   -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
   -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
   box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
   border-color: none;
 }
-a.button.secondary,
-button.secondary {
+article .button.secondary,
+article button.secondary {
   color: #666 !important;
 }
-a.button[disabled],
-button[disabled] {
+article .button[disabled],
+article button[disabled] {
   background-color: #000;
 }
-button,
-.button,
-.tag:not(.icon) {
+article button,
+article .button,
+article .tag:not(.icon) {
   background-color: #007db5;
 }
-button.secondary,
-.button.secondary,
-.tag:not(.icon).secondary {
+article button.secondary,
+article .button.secondary,
+article .tag:not(.icon).secondary {
   background-color: #bfbfbf;
 }
-button.accept,
-.button.accept,
-.tag:not(.icon).accept {
+article button.accept,
+article .button.accept,
+article .tag:not(.icon).accept {
   background-color: #3fb58e;
 }
-button.cancel,
-.button.cancel,
-.tag:not(.icon).cancel {
+article button.cancel,
+article .button.cancel,
+article .tag:not(.icon).cancel {
   background-color: #ee6557;
 }
 /* -------------------------- BUTTONS -------------------------- */

example/components/lungo/theme.red.css

@@ -83,17 +83,17 @@ aside > header {
 section > header > nav a {
   color: #fff;
 }
-section > header > nav.box:not(.right) a {
+section > header > nav:not(.right) a {
   -webkit-box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
   -moz-box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
   box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
 }
-section > header > nav.box.right a {
+section > header > nav.right a {
   -webkit-box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
   -moz-box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
   box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
 }
-section > header > nav.box a:active {
+section > header > nav a:active {
   background: #ea3c2b;
 }
 section > nav.groupbar > a.active {
@@ -127,17 +127,17 @@ aside nav a.active .icon {
 aside nav a:not(.active) .icon {
   color: #888;
 }
-aside nav.box:not(.right) a {
+aside nav:not(.right) a {
   -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
   -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
   box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
 }
-aside nav.box.right a {
+aside nav.right a {
   -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
   -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
   box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
 }
-aside nav.box a:active {
+aside nav a:active {
   background: #141414;
 }
 /* -------------------------- LISTS -------------------------- */

example/firefox_os.webapp

@@ -3,7 +3,7 @@
   "description": "Lungo SDK Kitchen-Sink",
   "launch_path": "/index.html",
   "icons": {
-    "128": "http://lungo.tapquo.com/resources/icon-114.png"
+    "128": "http://cdn.tapquo.com/lungo/icon-114.png"
   },
   "developer": {
     "name": "Tapquo",

example/index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>KitchenSink - Lungo 2.0</title>
+    <title>Lungo 2.1 - SDK</title>
     <meta name="description" content="">
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
     <meta name="HandheldFriendly" content="True">
@@ -13,34 +13,34 @@
     <meta http-equiv="cleartype" content="on">
 
     <!-- iPhone -->
-    <link href="http://lungo.tapquo.com/resources/icon-57.png" sizes="57x57" rel="apple-touch-icon">
-    <link href="http://lungo.tapquo.com/resources/startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
+    <link href="http://cdn.tapquo.com/lungo/icon-57.png" sizes="57x57" rel="apple-touch-icon">
+    <link href="http://cdn.tapquo.com/lungo/startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
              and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
 
     <!-- iPhone (Retina) -->
-    <link href="http://lungo.tapquo.com/resources/icon-114.png" sizes="114x114" rel="apple-touch-icon">
-    <link href="http://lungo.tapquo.com/resources/startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
+    <link href="http://cdn.tapquo.com/lungo/icon-114.png" sizes="114x114" rel="apple-touch-icon">
+    <link href="http://cdn.tapquo.com/lungo/startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
              and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
     <!-- iPhone 5 -->
-    <link href="http://lungo.tapquo.com/resources/startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
+    <link href="http://cdn.tapquo.com/lungo/startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
              and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
     <!-- iPad -->
-    <link href="http://lungo.tapquo.com/resources/icon-72.png" sizes="72x72" rel="apple-touch-icon">
-    <link href="http://lungo.tapquo.com/resources/startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
+    <link href="http://cdn.tapquo.com/lungo/icon-72.png" sizes="72x72" rel="apple-touch-icon">
+    <link href="http://cdn.tapquo.com/lungo/startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
              and (orientation: portrait)
              and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
-    <link href="http://lungo.tapquo.com/resources/startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
+    <link href="http://cdn.tapquo.com/lungo/startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
              and (orientation: landscape)
              and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
 
     <!-- iPad (Retina) -->
-    <link href="http://lungo.tapquo.com/resources/icon-144.png" sizes="144x144" rel="apple-touch-icon">
-    <link href="http://lungo.tapquo.com/resources/startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
+    <link href="http://cdn.tapquo.com/lungo/icon-144.png" sizes="144x144" rel="apple-touch-icon">
+    <link href="http://cdn.tapquo.com/lungo/startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
              and (orientation: portrait)
              and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
-    <link href="http://lungo.tapquo.com/resources/startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
+    <link href="http://cdn.tapquo.com/lungo/startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
              and (orientation: landscape)
              and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
@@ -57,16 +57,15 @@
 </head>
 
 <body class="app">
-    <section id="main" data-transition="slide">
+    <section id="main" data-transition="">
         <header>
-            <nav class="left box">
+            <nav class="left">
                 <a href="#features" data-router="aside" data-icon="menu"></a>
             </nav>
-            <div class="left">
-                <div class="centered title">Lungo Framework</div>
-            </div>
-            <nav class="right box">
-                <a href="#" data-icon="share"></a>
+            <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
+            <nav class="right">
+                <a href="#" data-action="twitter" class="button theme" data-icon="brand twitter"></a>
+                <!-- <a href="#" class="button theme" data-icon="share" data-label="Share"></a> -->
             </nav>
         </header>
 
@@ -81,10 +80,6 @@
                     <strong>HTML5 Optimized Apps</strong>
                     Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
                 </li>
-                <li class="feature">
-                    <strong>Open Source Project</strong>
-                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
-                </li>
                 <li class="feature">
                     <strong>Powerfull JavaScript API</strong>
                     Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
@@ -93,7 +88,10 @@
                     <strong>Multi-Device full support</strong>
                     Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
                 </li>
-
+                <li class="feature">
+                    <strong>Open Source Project</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
                 <li>
                     <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
                 </li>