Markup in examples

example/app/asides/features.html

@@ -8,18 +8,14 @@
     <article class="list scroll active">
         <ul>
             <!-- Basic Layout -->
-            <li class="active">
-                <a href="#main-article" data-router="article" data-title="Lungo Framework">
-                    <strong>Meet the framework</strong>
-                </a>
+            <li class="active" data-view-article="main-article" data-title="Lungo Framework">
+                <strong>Meet the framework</strong>
             </li>
 
             <!-- Layout & Navigation -->
-            <li>
-                <a href="#layout" data-router="section" data-async="app/sections/layout.html">
-                    <strong>Layout</strong>
-                    <div class="tag right">5</div>
-                </a>
+            <li data-view-section="layout" data-async="app/sections/layout.html">
+                <strong>Layout</strong>
+                <div class="tag right">5</div>
             </li>
 
             <!-- List -->

example/app/sections/layout.html

@@ -1,18 +1,15 @@
 <section id="layout" data-transition="slide">
-    <header data-title="Layout" class="extended">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
+    <header data-title="Layout" class="extended" data-back="home">
         <nav class="right">
-            <a href="#splash" data-router="section" data-async="app/sections/splash.html" data-icon="lock" class="button"></a>
+            <a href="#" data-view-section="splash" data-async="app/sections/splash.html" data-icon="lock" class="button"></a>
         </nav>
     </header>
 
     <nav class="groupbar">
-        <a href="#layout-art1" data-router="article" data-label="Profile" class="active"></a>
-        <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="19"></a>
-        <a href="#layout-art3" data-router="article" data-label="Map"></a>
-        <a href="#layout-art4" data-router="article" data-label="Settings"></a>
+        <a href="#" data-view-article="layout-art1" data-label="Profile" class="active"></a>
+        <a href="#" data-view-article="layout-art2" data-label="Inbox" data-count="19"></a>
+        <a href="#" data-view-article="layout-art3" data-label="Map"></a>
+        <a href="#" data-view-article="layout-art4" data-label="Settings"></a>
     </nav>
 
     <article id="layout-art1" class="active"></article>
@@ -22,10 +19,10 @@
 
     <footer>
         <nav>
-            <a href="#layout-art1" data-router="article" data-icon="home" class="active"></a>
-            <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="80"></a>
-            <a href="#layout-art3" data-router="article" data-icon="compass"></a>
-            <a href="#layout-art4" data-router="article" data-icon="settings"></a>
+            <a href="#" data-view-article="layout-art1" data-icon="home" class="active"></a>
+            <a href="#" data-view-article="layout-art2" data-icon="inbox" data-count="80"></a>
+            <a href="#" data-view-article="layout-art3" data-icon="compass"></a>
+            <a href="#" data-view-article="layout-art4" data-icon="settings"></a>
         </nav>
     </footer>
 </section>

example/app/sections/splash.html

@@ -5,7 +5,7 @@
             <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 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>
+            <a href="#" data-view-section="back" class="button secondary anchor" data-icon="home">Return to Kichensink</a>
         </form>
     </article>
 </section>

example/components/lungo/theme.lungo.css

@@ -192,9 +192,12 @@ section .list li.cancel {
   -o-box-shadow: inset 4px 0px 0px #ee6557;
   box-shadow: inset 4px 0px 0px #ee6557;
 }
+section .list li.arrow::after {
+  border-color: #bfbfbf;
+}
 section .list li,
 section .list li a {
-  color: LIST_color;
+  color: #3d3d3d;
 }
 section .list li.anchor,
 section .list li a.anchor {
@@ -240,9 +243,35 @@ section .list li a.selectable:active .right:not(.tag),
 section .list li.theme .right:not(.tag),
 section .list li a.theme .right:not(.tag),
 section .list li.anchor .right:not(.tag),
-section .list li a.anchor .right:not(.tag) {
+section .list li a.anchor .right:not(.tag),
+section .list li.dark strong,
+section .list li a.dark strong,
+section .list li.selectable:active strong,
+section .list li a.selectable:active strong,
+section .list li.theme strong,
+section .list li a.theme strong,
+section .list li.anchor strong,
+section .list li a.anchor strong,
+section .list li.dark .arrow::after,
+section .list li a.dark .arrow::after,
+section .list li.selectable:active .arrow::after,
+section .list li a.selectable:active .arrow::after,
+section .list li.theme .arrow::after,
+section .list li a.theme .arrow::after,
+section .list li.anchor .arrow::after,
+section .list li a.anchor .arrow::after {
   color: #fff;
 }
+section .list li.dark.arrow::after,
+section .list li a.dark.arrow::after,
+section .list li.selectable:active.arrow::after,
+section .list li a.selectable:active.arrow::after,
+section .list li.theme.arrow::after,
+section .list li a.theme.arrow::after,
+section .list li.anchor.arrow::after,
+section .list li a.anchor.arrow::after {
+  border-color: #fff;
+}
 section .list li small,
 section .list li a small,
 section .list li .right:not(.tag),
@@ -321,6 +350,7 @@ footer .tag:not(.icon) {
 /* -------------------------- NOTIFICATION -------------------------- */
 .notification {
   color: #fff;
+  background-color: rgba(0,0,0,0.75);
 }
 .notification .window.growl {
   background: rgba(0,0,0,0.8);

example/flexbox.html

@@ -29,18 +29,28 @@
         <header>
             <nav>
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
+                <a href="#" class="button" data-labeñ-l="folk" data-icon="user" data-view-article="folks"></a>
+
             </nav>
-            <!--
+
             <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
-            -->
-            <div class="title centered">laskdkals</div>
+
+            <!-- <div class="title centered">laskdkals</div> -->
             <!-- <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered"> -->
 
             <nav class="right">
+                <!--
                 <a href="#" data-article="folks" data-label="folks"></a>
                 <a href="#" data-icon="user" class="button"></a>
-                <a href="#" data-view-article="products" data-label="Products" data-count="5"></a>
+            -->
+                <a href="#" data-icon="user" class="button" data-label="sksk"></a>
+                <a href="#" data-icon="user" class="button" data-label="sksk"></a>
+                <a href="#" data-icon="user" class="button" data-view-article="products"></a>
 
+                <!--
+                <button data-icon="user"></button>
+                <a href="#" data-view-article="products" data-label="Products" data-count="5"></a>
+                    -->
             </nav>
         </header>
 
@@ -49,9 +59,9 @@
             <a href="#" data-view-article="products" data-label="Products" data-count="5"></a>
         </nav>
 
-        <article id="folks" class="list scroll">
+        <article id="folks" class="list scroll indente-d">
             <ul>
-                <li class="thumb selectable" data-view-section="folk" data-image="http://cdn.tapquo.com/photos/javi.jpg">
+                <li class="thumb selectable arrow" data-view-section="folk" data-image="http://cdn.tapquo.com/photos/javi.jpg">
                     <a href="#" >
                         <strong>Javi Jiménez</strong>
                         <small>Founder & CTO</small>
@@ -100,6 +110,7 @@
             </ul>
         </article>
 
+        <!--
         <article id="products" class="list scroll">
             <ul>
                 <li class="selectable" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
@@ -122,6 +133,7 @@
                 </li>
             </ul>
         </article>
+        -->
 
         <footer>
             <nav>
@@ -214,15 +226,25 @@
             <ul>
                 <!-- Basic Layout -->
                 <li data-view-article="folks" data-title="Profile" data-icon="users">
-                    <div class="tag right">11</div>
-                    <strong>Folks</strong>
-                    <small>Discover our team!</small>
+                    <a href="#">
+                        <div class="tag right">11</div>
+                        <strong>Folks</strong>
+                        <small>Discover our team!</small>
+                    </a>
                 </li>
+                <!--
                 <li data-view-article="products" data-title="Products" data-icon="mobile">
                     <div class="tag right">5</div>
                     <strong>Products</strong>
                     <small>Fueled by coffee</small>
                 </li>
+                -->
+
+                <li data-view-article="products" data-title="Third Parties" data-async="app/articles/products.html">
+                    <div class="tag right">5</div>
+                    <strong>Products</strong>
+                    <small>Fueled by coffee</small>
+                </li>
 
                 <li data-view-section="folk" data-view-article="f1" data-icon="mobile">
                     <div class="tag right">5</div>

example/index.html

@@ -60,7 +60,7 @@
     <section id="main" data-transition="" data-aside="features">
         <header>
             <nav class="left">
-                <a href="#features" data-router="aside" data-icon="menu"></a>
+                <a href="#" data-view-aside="features" data-icon="menu"></a>
             </nav>
             <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
             <nav class="right">
@@ -68,7 +68,7 @@
             </nav>
         </header>
 
-        <article id="main-article" class="active list indented scroll">
+        <article id="main-article" class="list indented scroll">
             <ul>
                 <li class="dark">
                     <strong>