Change kitchen-sink with new theme

example/index.html

@@ -60,8 +60,9 @@
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
             </nav>
             <img src="static/images/logo.png" class="title centered">
+            <h1 class="title"> <span class="tag count">2.2</span></h1>
 
-            <nav class="right">
+            <nav class="on-right">
                 <a href="#" data-action="twitter" class="button" data-icon="brand twitter" data-article="main-article"></a>
                 <!--
                 <a href="#" data-action="twitter" class="button" data-icon="brand twitter" data-article="main-article" data-label="twitter"></a>

example/navigation.html

@@ -34,7 +34,7 @@
             <nav class="left">
                 <button data-icon="list" data-view-aside="a"></button>
             </nav>
-            <nav class="right">
+            <nav class="on-right">
                 <button data-icon="arrow-right" data-view-section="one"></button>
             </nav>
         </header>
@@ -42,11 +42,11 @@
     </section>
 
     <section id="one" data-transition="slide" data-children="two" data-aside="b">
-        <header data-title="One" data-back="home">
+        <header data-title="One" data-back="chevron-left">
             <nav class="left">
                 <button data-icon="list" data-view-aside="b"></button>
             </nav>
-            <nav class="right">
+            <nav class="on-right">
                 <button data-icon="arrow-right" data-view-section="two"></button>
             </nav>
         </header>
@@ -54,8 +54,8 @@
     </section>
 
     <section id="two" data-transition="slide" data-children="three">
-        <header data-back="home" data-title="Two">
-            <nav class="right">
+        <header data-back="chevron-left" data-title="Two">
+            <nav class="on-right">
                 <button data-icon="arrow-right" data-view-section="three"></button>
             </nav>
         </header>
@@ -63,8 +63,8 @@
     </section>
 
     <section id="three" data-transition="slide" data-children="four">
-        <header data-back="home" data-title="Three">
-            <nav class="right">
+        <header data-back="chevron-left" data-title="Three">
+            <nav class="on-right">
                 <button data-icon="arrow-down" data-view-section="four"></button>
             </nav>
         </header>
@@ -72,7 +72,7 @@
     </section>
 
     <section id="four" data-transition="cover">
-        <header data-back="home" data-title="Four"></header>
+        <header data-back="chevron-left" data-title="Four"></header>
         <article id="four-1"></article>
     </section>
 

example/static/articles/data.html

@@ -38,7 +38,7 @@
             <small>Creates label in a determinate nav element</small>
         </li>
         <li>
-            <div class="right" data-count="23 units"></div>
+            <div class="on-right" data-count="23 units"></div>
             <strong>data-count</strong>
             <small>Creates counters in different &lt;elements&gt;</small>
         </li>

example/static/asides/features.html

@@ -1,6 +1,6 @@
 <aside id="features">
     <header data-title="Features">
-        <nav class="right">
+        <nav class="on-right">
             <a href="#" class="buttons" data-icon="settings"></a>
         </nav>
     </header>
@@ -8,108 +8,108 @@
     <article class="list scroll active">
         <ul>
             <!-- Basic Layout -->
-            <li data-view-article="main-article" data-title="Lungo Framework">
+            <li data-view-article="main-article">
                 <strong>Meet the framework</strong>
                 <small>Real Cross-Device</small>
             </li>
 
             <!-- Layout & Navigation -->
-            <li data-view-section="layout" data-async="static/sections/layout.html">
+            <li data-view-section="layout" data-async="static/sections/layout.html" data-icon="user">
+                <div class="tag on-right">5</div>
                 <strong>Layout</strong>
-                <div class="tag right">5</div>
             </li>
 
             <!-- List -->
-            <li data-view-article="list" data-async="static/articles/list.html">
+            <li data-view-article="list" data-async="static/articles/list.html" data-icon="list">
+                <div class="tag on-right">22</div>
                 <strong>Lists</strong>
-                <div class="tag right">22</div>
             </li>
 
             <!-- Forms -->
-            <li data-view-section="form">
-                <div class="tag right">8</div>
+            <li data-view-section="form" data-icon="check">
+                <div class="tag on-right">8</div>
                 <strong>Form Elements</strong>
             </li>
 
             <!-- Asides -->
-            <li data-view-section="aside" data-async="static/sections/aside.html">
+            <li data-view-section="aside" data-async="static/sections/aside.html" data-icon="signout">
                 <strong>Aside</strong>
             </li>
 
             <!-- Menu -->
-            <li data-view-section="menu" data-async="static/sections/menu.html">
-                <div class="tag right">2</div>
+            <li data-view-section="menu" data-async="static/sections/menu.html" data-icon="menu">
+                <div class="tag on-right">2</div>
                 <strong>Menu</strong>
             </li>
 
             <!-- Data-Attributes -->
-            <li data-view-article="data" data-async="static/articles/data.html">
-                <div class="tag right">9</div>
+            <li data-view-article="data" data-async="static/articles/data.html" data-icon="tag">
+                <div class="tag on-right">9</div>
                 <strong>Data-attributes</strong>
             </li>
 
             <!-- Icons -->
-            <li data-view-article="icon-symbol" data-async="static/articles/icon-symbol.html">
-                <div class="tag right">+250</div>
+            <li data-view-article="icon-symbol" data-async="static/articles/icon-symbol.html" data-icon="check-empty">
+                <div class="tag on-right">+250</div>
                 <strong>Icons</strong>
             </li>
 
             <!-- Scrolls -->
-            <li data-view-section="scroll" data-async="static/sections/scroll.html">
-                <div class="tag right">2</div>
+            <li data-view-section="scroll" data-async="static/sections/scroll.html" data-icon="download">
+                <div class="tag on-right">2</div>
                 <strong>Scrolls</strong>
             </li>
 
             <!-- Touch Events -->
-            <li data-view-article="touchevents" data-async="static/articles/touchevents.html">
-                <div class="tag right">19</div>
+            <li data-view-article="touchevents" data-async="static/articles/touchevents.html" data-icon="magic">
+                <div class="tag on-right">19</div>
                 <strong>Touch Events</strong>
             </li>
 
             <!-- Layout Events -->
-            <li data-view-section="layoutevents" data-async="static/sections/layoutevents.html">
-                <div class="tag right">2</div>
+            <li data-view-section="layoutevents" data-async="static/sections/layoutevents.html" data-icon="link">
+                <div class="tag on-right">2</div>
                 <strong>Layout Events</strong>
             </li>
 
             <!-- Notifications -->
-            <li data-view-article="notification" data-async="static/articles/notification.html">
-                <div class="tag right">8</div>
+            <li data-view-article="notification" data-async="static/articles/notification.html"  data-icon="info-sign">
+                <div class="tag on-right">8</div>
                 <strong>Notifications</strong>
             </li>
 
             <!-- Pull & Refresh -->
-            <li  data-view-section="pull" data-async="static/sections/pull.html">
-                <div class="tag right">1</div>
+            <li  data-view-section="pull" data-async="static/sections/pull.html" data-icon="resize-vertical">
+                <div class="tag on-right">1</div>
                 <strong>Pull & Refresh</strong>
             </li>
 
             <!-- Carousel -->
-            <li data-view-section="carousel" data-async="static/sections/carousel.html">
-                <div class="tag right">1</div>
+            <li data-view-section="carousel" data-async="static/sections/carousel.html" data-icon="picture">
+                <div class="tag on-right">1</div>
                 <strong>Carousel</strong>
             </li>
 
             <!-- Environment -->
-            <li data-view-article="environment" data-async="static/articles/environment.html">
-                <div class="tag right">1</div>
+            <li data-view-article="environment" data-async="static/articles/environment.html" data-icon="mobile-phone">
+                <div class="tag on-right">1</div>
                 <strong>Environment</strong>
             </li>
 
             <!-- Buttons & Colours -->
-            <li data-view-article="buttons" data-async="static/articles/buttons.html">
-                <div class="tag right">14</div>
+            <li data-view-article="buttons" data-async="static/articles/buttons.html" data-icon="tint">
+                <div class="tag on-right">14</div>
                 <strong>Buttons & Colours</strong>
             </li>
 
             <!-- Theme roller -->
-            <li  data-view-article="themeroller" data-async="static/articles/theme.html">
-                <div class="tag right">4</div>
+            <li  data-view-article="themeroller" data-async="static/articles/theme.html" data-icon="adjust">
+                <div class="tag on-right">4</div>
                 <strong>Theme roller</strong>
             </li>
 
             <!-- Grid System -->
-            <li data-view-article="grid" data-async="static/articles/grid.html">
+            <li data-view-article="grid" data-async="static/articles/grid.html" data-icon="grid">
                 <strong>Grid System</strong>
             </li>
         </ul>

example/static/asides/right.html

@@ -1,4 +1,4 @@
-<aside id="right" class="right">
+<aside id="right" class="on-right">
     <header data-title="Example of Aside"></header>
     <article class="list active">
         <ul>

example/static/sections/aside.html

@@ -1,6 +1,6 @@
 <section id="aside" data-transition="slide" data-aside="right">
-    <header data-title="Asides" data-back="home">
-        <nav class="right">
+    <header data-title="Asides" data-back="chevron-left">
+        <nav class="on-right">
             <button data-view-aside="right" data-label="Show Aside"></button>
         </nav>
     </header>

example/static/sections/carousel.html

@@ -1,8 +1,8 @@
 <section id="carousel" data-transition="slide">
-    <header data-back="home">
+    <header data-back="chevron-left">
         <div class="centered title">Photo Nº<span>1</span></div>
 
-        <nav class="right">
+        <nav class="on-right">
             <a href="#" data-action="carousel" data-direction="left" data-icon="arrow-left"></a>
             <a href="#" data-action="carousel" data-direction="right" data-icon="arrow-right"></a>
         </nav>

example/static/sections/form.html

@@ -1,6 +1,6 @@
 <section id="form" data-transition="slide">
-    <header data-title="Form Elements" data-back="home">
-        <nav class="right">
+    <header data-title="Form Elements" data-back="chevron-left">
+        <nav class="on-right">
             <button data-label="test"></button>
             <button data-icon="edit"></button>
         </nav>

example/static/sections/layout.html

@@ -1,7 +1,7 @@
 <section id="layout" data-transition="slide">
-    <header data-title="Layout" data-back="home">
-        <nav class="right">
-            <button data-view-section="splash" data-async="static/sections/splash.html" data-label="splash"></button>
+    <header data-title="Layout" data-back="chevron-left">
+        <nav class="on-right">
+            <button data-view-section="splash" data-async="static/sections/splash.html" data-icon="user"></button>
         </nav>
     </header>
 

example/static/sections/layoutevents.html

@@ -1,5 +1,5 @@
 <section id="layoutevents" data-transition="slide">
-    <header data-title="Layout Events" data-back="home"></header>
+    <header data-title="Layout Events" data-back="chevron-left"></header>
     <article class="list indented">
         <ul>
             <li class="dark">

example/static/sections/menu.html

@@ -3,7 +3,7 @@
         <nav>
             <a href="#" data-view-menu="options" data-icon="menu"></a>
         </nav>
-        <nav class="right">
+        <nav class="on-right">
             <a href="#" data-view-menu="options-icons" data-icon="grid"></a>
         </nav>
     </header>

example/static/sections/pull.html

@@ -1,6 +1,6 @@
 <section id="pull" data-pull="arrow-down" data-transition="slide">
 
-    <header data-title="Pull & Refresh" data-back="home"></header>
+    <header data-title="Pull & Refresh" data-back="chevron-left"></header>
 
     <article class="active list indented">
         <ul>
@@ -64,7 +64,7 @@
 
         <li>
             <a href="#">
-                <div class="right">.right</div>
+                <div class="on-right">.right</div>
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
             </a>
@@ -74,7 +74,7 @@
             <a href="#">
                 <strong>&lt;strong&gt; element</strong>
                 <small>with &lt;small&gt; element</small>
-                <div class="right">.right</div>
+                <div class="on-right">.right</div>
             </a>
         </li>
 

example/static/sections/scroll.html

@@ -1,5 +1,5 @@
 <section id="scroll" data-transition="slide">
-    <header data-title="Scrolls"  data-back="home"></header>
+    <header data-title="Scrolls"  data-back="chevron-left"></header>
 
     <article>
         <h1>.scroll stylesheet class</h1>

example/test.html

@@ -31,7 +31,7 @@
 
             <div class="title centered">Folks</div>
 
-            <nav class="right">
+            <nav class="on-right">
                 <button data-icon="user" class="button" data-article="folks" data-label="Products" data-view-article="products" data-async="static/articles/products.html"></button>
             </nav>
         </header>
@@ -116,7 +116,7 @@
     </section>
 
     <section id="test" data-transition="slide">
-        <header data-title="Test" data-back="home"></header>
+        <header data-title="Test" data-back="chevron-left"></header>
         <article></article>
     </section>
 
@@ -161,7 +161,7 @@
 
     <aside id="features" >
         <header data-title="Features">
-            <nav class="right">
+            <nav class="on-right">
                 <a href="#" class="buttons" data-icon="settings"></a>
             </nav>
         </header>
@@ -193,7 +193,7 @@
         </article>
     </aside>
 
-    <aside id="features2" class="right">
+    <aside id="features2" class="on-right">
         <header data-title="Features 2"></header>
 
         <article class="list scroll active">

src/modules/Lungo.Attributes.coffee

@@ -10,7 +10,7 @@ Object with data-attributes (HTML5) with a special <markup>
 Lungo.Attributes =
   count:
     selector: "*"
-    html: "<span class=\"tag theme count\">{{value}}</span>"
+    html: "<span class=\"tag count\">{{value}}</span>"
 
   pull:
     selector: "*"