Refactor in labels

example/app/events.touch.js

@@ -5,10 +5,10 @@
     "pinch", "pinchIn", "pinchOut",
     "drag", "dragLeft", "dragRight", "dragUp", "dragDown"].forEach(function(type) {
     $$("section#touchevents #gestures").on(type, function(event) {
-        $$(this).siblings('#console').append(' | ' + type);
+        $$(this).siblings('.console.output').append(' | ' + type);
     });
 });
 
 $$("[data-action=clean_console]").tap(function(event) {
-    $$('#console').html("");
+    $$('.console.output').html("");
 });

example/app/scaffold.coffee

@@ -46,7 +46,7 @@ section_main =
         nav:
             position: "left"
             items: [
-                href:"back", icon:"home", label:"return"
+                href:"Back", icon:"home", label:"return"
             ]
 
     footer:

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>
+            <a href="#back" data-router="section" data-label="Back"></a>
         </nav>
     </header>
     <article id="aside-example" class="active indented">

example/app/sections/carousel.html

@@ -1,7 +1,7 @@
 <section id="carousel" data-transition="slide">
     <header>
         <nav class="box">
-            <a href="#back" data-router="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="Back"></a>
         </nav>
 
         <div class="centered title">Photo Nº<span>1</span></div>

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>
+            <a href="#back" data-router="section" data-label="Back"></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>
+            <a href="#back" data-router="section" data-label="Back"></a>
         </nav>
     </header>
 

example/app/sections/form.html

@@ -1,7 +1,7 @@
 <section id="form" data-transition="slide">
     <header data-title="Form Elements">
         <nav class="box">
-            <a href="#back" data-router="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="Back"></a>
         </nav>
         <nav class="right">
             <a href="#" class="button" data-icon="share" data-label="Share"></a>

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>
+            <a href="#back" data-router="section" data-label="Back"></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>
+            <a href="#back" data-router="section" data-label="Back"></a>
         </nav>
     </header>
 

example/app/sections/layout.html

@@ -1,7 +1,7 @@
 <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>
+            <a href="#back" data-router="section" data-label="Back"></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>

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>
+            <a href="#back" data-router="section" data-label="Back"></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>
+            <a href="#back" data-router="section" data-label="Back"></a>
         </nav>
     </header>
 

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>
+            <a href="#back" data-router="section" data-label="Back"></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>
+            <a href="#back" data-router="section" data-label="Back"></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>
+            <a href="#back" data-router="section" data-label="Back"></a>
         </nav>
     </header>
 

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>
+            <a href="#back" data-router="section" data-label="Back"></a>
         </nav>
     </header>
 

example/app/sections/touchevents.html

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

example/index.html

@@ -70,46 +70,7 @@
             </nav>
         </header>
 
-         <article id="form-extras" class="active scroll">
-        <form>
-            <fieldset data-icon="search">
-                <input type="search" placeholder="Search..."/>
-            </fieldset>
-        </form>
-        <form  class="margined">
-            <div class="six columns">
-                <label>Address</label>
-                <input type="text" placeholder="placeholder"/>
-            </div>
-            <div class="three columns right">
-                <label>Pin Code</label>
-                <input type="password" value="value" disabled/>
-            </div>
-
-            <label>Select your skill</label>
-            <label class="select">
-                <select class="custom">
-                    <option value="1">HTML5 Jedi</option>
-                    <option value="2">Two</option>
-                    <option value="3">Three</option>
-                </select>
-            </label>
-
-            <label>Progress</label>
-            <div id="progress-normal" data-progress="25%"></div>
-
-            <label>Range</label>
-            <input type="range" placeholder="type your name" />
-
-            <label>Checkbox</label>
-            <br/>
-            <input type="range" min="0" max="1" class="checkbox active" value="1">
-
-            <a href="#form-normal" data-router="article" class="button anchor accept" data-label="Return to normal Elements"></a>
-        </form>
-    </article>
-
-        <article id="main-article" class="activse list indented scroll">
+        <article id="main-article" class="active list indented scroll">
             <ul>
                 <li class="dark">
                     <strong>