Changes on KitchenSink

examples/test/app/resources/sections/aside.html

@@ -1,6 +1,6 @@
-<aside id="aside-controls" class="left">
-    <header data-title="Lungo Controls"></header>
-    <article id="article-controls" class="list scroll current">
+<aside id="features" class="left">
+    <header data-title="Features"></header>
+    <article class="list scroll current">
         <ul>
             <!-- Basic Layout -->
             <li>
@@ -11,64 +11,74 @@
                 </a>
             </li>
 
-            <!-- Grid System -->
+            <!-- List -->
             <li>
                 <a href="#list" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Grid System</strong>
+                    <strong>Lists</strong>
                     <small>Indented, Scroll</small>
                 </a>
             </li>
 
-            <!-- Asides -->
+            <!-- Notifications -->
             <li>
-                <a href="#list" data-target="section">
+                <a href="#notification" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Asides</strong>
+                    <strong>Notifications</strong>
                     <small>Indented, Scroll</small>
                 </a>
             </li>
-            <!-- Buttons -->
+
+            <!-- Icons -->
             <li>
-                <a href="#list" data-target="section">
+                <a href="#icon" data-target="section">
                     <div class="bubble right">8</div>
                     <strong>Icons</strong>
-                    <small>Indented, Scroll</small>
+                    <small>Messages, skskks</small>
                 </a>
             </li>
-            <!-- Forms -->
+
+
+            <!-- Grid System -->
             <li>
-                <a href="#list" data-target="section">
+                <a href="#" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Form Elements</strong>
+                    <strong>Grid System</strong>
                     <small>Indented, Scroll</small>
                 </a>
             </li>
 
-            <!-- Pulls -->
+            <!-- Asides -->
             <li>
-                <a href="#list" data-target="section">
+                <a href="#" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Buttons</strong>
+                    <strong>Asides</strong>
                     <small>Indented, Scroll</small>
                 </a>
             </li>
-
-            <!-- Notifications -->
+            <!-- Buttons -->
             <li>
-                <a href="#list" data-target="section">
+                <a href="#" data-target="section">
+                    <div class="bubble right">8</div>
+                    <strong>Icons</strong>
+                    <small>Indented, Scroll</small>
+                </a>
+            </li>
+            <!-- Forms -->
+            <li>
+                <a href="#" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Events</strong>
+                    <strong>Form Elements</strong>
                     <small>Indented, Scroll</small>
                 </a>
             </li>
 
-            <!-- Notifications -->
+            <!-- Pulls -->
             <li>
-                <a href="#notification" data-target="section">
+                <a href="#" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Notifications</strong>
-                    <small>Messages, skskks</small>
+                    <strong>Buttons</strong>
+                    <small>Indented, Scroll</small>
                 </a>
             </li>
         </ul>

examples/test/app/resources/sections/icon.html

@@ -0,0 +1,628 @@
+<section id="icon" data-transition="slide">
+    <header class="extended" data-back="home" data-title="Icons Repository"></header>
+
+    <nav class="groupbar">
+        <a href="#icons-default" data-target="article" data-label="Normal" data-count="72" class="current"></a>
+        <a href="#icons-brands" data-target="article" data-label="Brands" data-count="37" ></a>
+    </nav>
+
+    <article id="icons-default" class="list scroll indented">
+        <ul>
+            <li data-icon="home">
+                <a href="#">
+                    <strong>Home</strong>
+                    <small>class .home</small>
+                </a>
+            </li>
+            <li data-icon="picture">
+                <a href="#">
+                <strong>picture</strong>
+                <small>class .picture</small>
+                </a>
+            </li>
+            <li data-icon="camera">
+                <a href="#">
+                <strong>camera</strong>
+                <small>class .camera</small>
+                </a>
+            </li>
+            <li data-icon="music">
+                <a href="#">
+                <strong>music</strong>
+                <small>class .music</small>
+                </a>
+            </li>
+            <li data-icon="broadcast">
+                <a href="#">
+                <strong>broadcast</strong>
+                <small>class .broadcast</small>
+                </a>
+            </li>
+            <li data-icon="microphone">
+                <a href="#">
+                <strong>microphone</strong>
+                <small>class .microphone</small>
+                </a>
+            </li>
+            <li data-icon="book">
+                <a href="#">
+                <strong>book</strong>
+                <small>class .book</small>
+                </a>
+            </li>
+            <li data-icon="folder">
+                <a href="#">
+                <strong>folder</strong>
+                <small>class .folder</small>
+                </a>
+            </li>
+            <li data-icon="tag">
+                <a href="#">
+                <strong>tag</strong>
+                <small>class .tag</small>
+                </a>
+            </li>
+            <li data-icon="ticket">
+                <a href="#">
+                <strong>ticket</strong>
+                <small>class .ticket</small>
+                </a>
+            </li>
+            <li data-icon="cart">
+                <a href="#">
+                <strong>cart</strong>
+                <small>class .cart</small>
+                </a>
+            </li>
+            <li data-icon="phone">
+                <a href="#">
+                <strong>phone</strong>
+                <small>class .p>one</small>
+                </a>
+            </li>
+            <li data-icon="address">
+                <a href="#">
+                <strong>address</strong>
+                <small>class .address</small>
+                </a>
+            </li>
+            <li data-icon="mail">
+                <a href="#">
+                <strong>mail</strong>
+                <small>class .mail</small>
+                </a>
+            </li>
+            <li data-icon="mail-open">
+                <a href="#">
+                <strong>mail-open</strong>
+                <small>class .mail-open</small>
+                </a>
+            </li>
+            <li data-icon="pushpin">
+                <a href="#">
+                <strong>pushpin</strong>
+                <small>class .pushpin</small>
+                </a>
+            </li>
+            <li data-icon="compass">
+                <a href="#">
+                <strong>compass</strong>
+                <small>class .compass</small>
+                </a>
+            </li>
+            <li data-icon="clock">
+                <a href="#">
+                <strong>clock</strong>
+                <small>class .clock</small>
+                </a>
+            </li>
+            <li data-icon="calendar">
+                <a href="#">
+                <strong>calendar</strong>
+                <small>class .calendar</small>
+                </a>
+            </li>
+            <li data-icon="mobile">
+                <a href="#">
+                <strong>mobile</strong>
+                <small>class .mobile</small>
+                </a>
+            </li>
+            <li data-icon="inbox">
+                <a href="#">
+                <strong>inbox</strong>
+                <small>class .inbox</small>
+                </a>
+            </li>
+            <li data-icon="inbox-full">
+                <a href="#">
+                <strong>inbox-full</strong>
+                <small>class .inbox-full</small>
+                </a>
+            </li>
+            <li data-icon="user">
+                <a href="#">
+                <strong>user</strong>
+                <small>class .user</small>
+                </a>
+            </li>
+            <li data-icon="users">
+                <a href="#">
+                <strong>users</strong>
+                <small>class .users</small>
+                </a>
+            </li>
+            <li data-icon="vcard">
+                <a href="#">
+                <strong>vcard</strong>
+                <small>class .vcard</small>
+                </a>
+            </li>
+            <li data-icon="chat">
+                <a href="#">
+                <strong>chat</strong>
+                <small>class .chat</small>
+                </a>
+            </li>
+            <li data-icon="message">
+                <a href="#">
+                <strong>message</strong>
+                <small>class .message</small>
+                </a>
+            </li>
+            <li data-icon="search">
+                <a href="#">
+                <strong>search</strong>
+                <small>class .search</small>
+                </a>
+            </li>
+            <li data-icon="pie">
+                <a href="#">
+                <strong>pie</strong>
+                <small>class .pie</small>
+                </a>
+            </li>
+            <li data-icon="bars">
+                <a href="#">
+                <strong>bars</strong>
+                <small>class .bars</small>
+                </a>
+            </li>
+            <li data-icon="remove">
+                <a href="#">
+                <strong>remove</strong>
+                <small>class .remove</small>
+                </a>
+            </li>
+            <li data-icon="grid">
+                <a href="#">
+                <strong>grid</strong>
+                <small>class .grid</small>
+                </a>
+            </li>
+            <li data-icon="menu">
+                <a href="#">
+                <strong>menu</strong>
+                <small>class .menu</small>
+                </a>
+            </li>
+            <li data-icon="cloud">
+                <a href="#">
+                <strong>cloud</strong>
+                <small>class .cloud</small>
+                </a>
+            </li>
+            <li data-icon="upload">
+                <a href="#">
+                <strong>upload</strong>
+                <small>class .upload</small>
+                </a>
+            </li>
+            <li data-icon="star">
+                <a href="#">
+                <strong>star</strong>
+                <small>class .star</small>
+                </a>
+            </li>
+            <li data-icon="star-full">
+                <a href="#">
+                <strong>star-full</strong>
+                <small>class .star-full</small>
+                </a>
+            </li>
+            <li data-icon="heart">
+                <a href="#">
+                <strong>heart</strong>
+                <small>class .heart</small>
+                </a>
+            </li>
+            <li data-icon="heart-full">
+                <a href="#">
+                <strong>heart-full</strong>
+                <small>class .heart-full</small>
+                </a>
+            </li>
+            <li data-icon="thumbs-up">
+                <a href="#">
+                <strong>thumbs-up</strong>
+                <small>class .thumbs-up</small>
+                </a>
+            </li>
+            <li data-icon="thumbs-down">
+                <a href="#">
+                <strong>thumbs-down</strong>
+                <small>class .thumbs-down</small>
+                </a>
+            </li>
+            <li data-icon="help">
+                <a href="#">
+                <strong>help</strong>
+                <small>class .help</small>
+                </a>
+            </li>
+            <li data-icon="warning">
+                <a href="#">
+                <strong>warning</strong>
+                <small>class .warning</small>
+                </a>
+            </li>
+            <li data-icon="info">
+                <a href="#">
+                <strong>info</strong>
+                <small>class .info</small>
+                </a>
+            </li>
+            <li data-icon="cancel">
+                <a href="#">
+                <strong>cancel</strong>
+                <small>class .cancel</small>
+                </a>
+            </li>
+            <li data-icon="check">
+                <a href="#">
+                <strong>check</strong>
+                <small>class .check</small>
+                </a>
+            </li>
+            <li data-icon="multiply">
+                <a href="#">
+                <strong>multiply</strong>
+                <small>class .multiply</small>
+                </a>
+            </li>
+            <li data-icon="plus">
+                <a href="#">
+                <strong>plus</strong>
+                <small>class .plus</small>
+                </a>
+            </li>
+            <li data-icon="minus">
+                <a href="#">
+                <strong>minus</strong>
+                <small>class .minus</small>
+                </a>
+            </li>
+            <li data-icon="left">
+                <a href="#">
+                <strong>left</strong>
+                <small>class .left</small>
+                </a>
+            </li>
+            <li data-icon="down">
+                <a href="#">
+                <strong>down</strong>
+                <small>class .down</small>
+                </a>
+            </li>
+            <li data-icon="right">
+                <a href="#">
+                <strong>right</strong>
+                <small>class .right</small>
+                </a>
+            </li>
+            <li data-icon="up">
+                <a href="#">
+                <strong>up</strong>
+                <small>class .up</small>
+                </a>
+            </li>
+            <li data-icon="refresh">
+                <a href="#">
+                <strong>refresh</strong>
+                <small>class .refresh</small>
+                </a>
+            </li>
+            <li data-icon="share">
+                <a href="#">
+                <strong>share</strong>
+                <small>class .share</small>
+                </a>
+            </li>
+            <li data-icon="settings">
+                <a href="#">
+                <strong>settings</strong>
+                <small>class .settings</small>
+                </a>
+            </li>
+            <li data-icon="accessibility">
+                <a href="#">
+                <strong>accessibility</strong>
+                <small>class .accessibility</small>
+                </a>
+            </li>
+            <li data-icon="pencil">
+                <a href="#">
+                <strong>pencil</strong>
+                <small>class .pencil</small>
+                </a>
+            </li>
+            <li data-icon="file">
+                <a href="#">
+                <strong>file</strong>
+                <small>class .file</small>
+                </a>
+            </li>
+            <li data-icon="lock">
+                <a href="#">
+                <strong>lock</strong>
+                <small>class .lock</small>
+                </a>
+            </li>
+            <li data-icon="map">
+                <a href="#">
+                <strong>map</strong>
+                <small>class .map</small>
+                </a>
+            </li>
+            <li data-icon="eye">
+                <a href="#">
+                <strong>eye</strong>
+                <small>class .eye</small>
+                </a>
+            </li>
+        </ul>
+    </article>
+
+    <article id="icons-brands" class="list scroll indented">
+        <ul>
+            <li data-icon="brand google-plus">
+                <a href="#">
+                <strong>google-plus</strong>
+                <small>class .brand.google-plus</small>
+                </a>
+            </li>
+            <li data-icon="brand facebook">
+                <a href="#">
+                <strong>facebook</strong>
+                <small>class .brand.facebook</small>
+                </a>
+            </li>
+            <li data-icon="brand twitter">
+                <a href="#">
+                <strong>twitter</strong>
+                <small>class .brand.twitter</small>
+                </a>
+            </li>
+             <li data-icon="brand feed">
+                <a href="#">
+                <strong>feed</strong>
+                <small>class .brand.feed</small>
+                </a>
+            </li>
+            <li data-icon="brand vimeo">
+                <a href="#">
+                <strong>vimeo</strong>
+                <small>class .brand.vimeo</small>
+                </a>
+            </li>
+            <li data-icon="brand flickr">
+                <a href="#">
+                <strong>flickr</strong>
+                <small>class .brand.flickr</small>
+                </a>
+            </li>
+            <li data-icon="brand dribbble">
+                <a href="#">
+                <strong>dribbble</strong>
+                <small>class .brand.dribbble</small>
+                </a>
+            </li>
+            <li data-icon="brand forrst">
+                <a href="#">
+                <strong>forrst</strong>
+                <small>class .brand.forrst</small>
+                </a>
+            </li>
+            <li data-icon="brand deviantart">
+                <a href="#">
+                <strong>deviantart</strong>
+                <small>class .brand.deviantart</small>
+                </a>
+            </li>
+            <li data-icon="brand github">
+                <a href="#">
+                <strong>github</strong>
+                <small>class .brand.github</small>
+                </a>
+            </li>
+
+            <li data-icon="brand git">
+                <a href="#">
+                <strong>git</strong>
+                <small>class .brand.git</small>
+                </a>
+            </li>
+
+            <li data-icon="brand branch">
+                <a href="#">
+                <strong>branch</strong>
+                <small>class .brand.branch</small>
+                </a>
+            </li>
+
+            <li data-icon="brand fork">
+                <a href="#">
+                <strong>fork</strong>
+                <small>class .brand.fork</small>
+                </a>
+            </li>
+
+            <li data-icon="brand apple">
+                <a href="#">
+                <strong>apple</strong>
+                <small>class .brand.apple</small>
+                </a>
+            </li>
+            <li data-icon="brand android">
+                <a href="#">
+                <strong>android</strong>
+                <small>class .brand.android</small>
+                </a>
+            </li>
+            <li data-icon="brand windows">
+                <a href="#">
+                <strong>windows</strong>
+                <small>class .brand.windows</small>
+                </a>
+            </li>
+            <li data-icon="brand skype">
+                <a href="#">
+                <strong>skype</strong>
+                <small>class .brand.skype</small>
+                </a>
+            </li>
+            <li data-icon="brand linkedin">
+                <a href="#">
+                <strong>linkedin</strong>
+                <small>class .brand.linkedin</small>
+                </a>
+            </li>
+            <li data-icon="brand html5">
+                <a href="#">
+                <strong>html5</strong>
+                <small>class .brand.html5</small>
+                </a>
+            </li>
+
+            <li data-icon="brand css3">
+                <a href="#">
+                <strong>css3</strong>
+                <small>class .brand.css3</small>
+                </a>
+            </li>
+            <li data-icon="brand chrome">
+                <a href="#">
+                <strong>chrome</strong>
+                <small>class .brand.chrome</small>
+                </a>
+            </li>
+            <li data-icon="brand firefox">
+                <a href="#">
+                <strong>firefox</strong>
+                <small>class .brand.firefox</small>
+                </a>
+            </li>
+            <li data-icon="brand IE">
+                <a href="#">
+                <strong>IE</strong>
+                <small>class .brand.IE</small>
+                </a>
+            </li>
+            <li data-icon="brand opera">
+                <a href="#">
+                <strong>opera</strong>
+                <small>class .brand.opera</small>
+                </a>
+            </li>
+
+            <li data-icon="brand wordpress">
+                <a href="#">
+                <strong>wordpress</strong>
+                <small>class .brand.wordpress</small>
+                </a>
+            </li>
+        </ul>
+        <ul>
+            <li class="anchor">Variations</li>
+            <li data-icon="brand google-plus-2">
+                <a href="#">
+                <strong>google-plus-2</strong>
+                <small>class .brand.google-plus-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand twitter-2">
+                <a href="#">
+                <strong>twitter-2</strong>
+                <small>class .brand.twitter-2</small>
+                </a>
+            </li>
+            <li data-icon="brand facebook-2">
+                <a href="#">
+                <strong>facebook-2</strong>
+                <small>class .brand.facebook-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand feed-2">
+                <a href="#">
+                <strong>feed-2</strong>
+                <small>class .brand.feed-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand vimeo-2">
+                <a href="#">
+                <strong>vimeo-2</strong>
+                <small>class .brand.vimeo-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand flickr-2">
+                <a href="#">
+                <strong>flickr-2</strong>
+                <small>class .brand.flickr-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand dribbble-2">
+                <a href="#">
+                <strong>dribbble-2</strong>
+                <small>class .brand.dribbble-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand deviantart-2">
+                <a href="#">
+                <strong>deviantart-2</strong>
+                <small>class .brand.deviantart-2</small>
+                </a>
+            </li>
+            <li data-icon="brand git-2">
+                <a href="#">
+                <strong>git-2</strong>
+                <small>class .brand.git-2</small>
+                </a>
+            </li>
+            <li data-icon="brand github-2">
+                <a href="#">
+                <strong>github-2</strong>
+                <small>class .brand.github-2</small>
+                </a>
+            </li>
+            <li data-icon="brand wordpress-2">
+                <a href="#">
+                <strong>wordpress-2</strong>
+                <small>class .brand.wordpress-2</small>
+                </a>
+            </li>
+
+            <li data-icon="brand html5-2">
+                <a href="#">
+                <strong>html5-2</strong>
+                <small>class .brand.html5-2</small>
+                </a>
+            </li>
+        </ul>
+    </article>
+</section>

examples/test/app/resources/sections/list.html

@@ -0,0 +1,212 @@
+<section id="list" data-transition="slide">
+    <header data-title="Lists" class="extended" data-back="home"></header>
+
+    <nav class="groupbar">
+        <a href="#list-normal" data-target="article" class="current" data-icon="checkmark" data-label="Normal"></a>
+        <a href="#list-indented" data-target="article" data-icon="close" data-label="Indented"></a>
+    </nav>
+
+    <article id="list-normal" class="list scroll">
+        <ul>
+            <li class="anchor">With right elements</li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="selectable">
+                <strong>&lt;li class="selectable"&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li>
+                <a href="#">
+                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
+                </a>
+            </li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">.arrow class</li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+                <small>&lt;small&gt;</small>
+            </li>
+
+
+            <li class="anchor">.right element</li>
+
+            <li>
+                <a href="#">
+                    <div class="right">.right</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue">.right.bubble</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li class="anchor">With data-icon or data-image attribute</li>
+            <li data-image="http://placehold.it/32x32">
+                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class=" thumb" data-image="http://placehold.it/46x46">
+                <strong>&lt;li class="thumb" data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li data-icon="user">
+                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="thumb" data-icon="user">
+                <strong>&lt;li class="thumb" data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">With colours</li>
+            <li class="blue">
+                <strong>&lt;li class="blue"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="green">
+                <strong>&lt;li class="green"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="yellow">
+                <strong>&lt;li class="yellow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+        </ul>
+
+    </article>
+
+    <article id="list-indented" class="list scroll indented">
+        <ul>
+            <li class="anchor">With right elements</li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="selectable">
+                <strong>&lt;li class="selectable"&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li>
+                <a href="#">
+                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
+                </a>
+            </li>
+
+            <li>
+                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">.arrow class</li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="arrow">
+                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+                <small>&lt;small&gt;</small>
+            </li>
+
+
+            <li class="anchor">.right element</li>
+
+            <li>
+                <a href="#">
+                    <div class="right">.right</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue">.right.bubble</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li>
+                <a href="#">
+                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+            <li class="anchor">With data-icon or data-image attribute</li>
+            <li data-image="http://placehold.it/32x32">
+                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class=" thumb" data-image="http://placehold.it/46x46">
+                <strong>&lt;li class="thumb" data-image&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li data-icon="user">
+                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="thumb" data-icon="user">
+                <strong>&lt;li class="thumb" data-icon&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="anchor">With colours</li>
+            <li class="blue">
+                <strong>&lt;li class="blue"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="green">
+                <strong>&lt;li class="green"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="yellow">
+                <strong>&lt;li class="yellow"&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+        </ul>
+
+    </article>
+</section>

examples/test/boletus.html

@@ -1,409 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>LungoJS 2.0 - Test</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 name="viewport" content="width=device-width, user-scalable=no">
-
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="format-detection" content="telephone=no">
-    <!-- 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">
-
-    <meta http-equiv="cleartype" content="on">
-
-    <!-- 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.nav.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.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.widgets.loading.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.scaffold.css">
-    <!-- App Stylesheet -->
-    <link rel="stylesheet" href="assets/stylesheets/app.css">
-</head>
-
-<body class="app">
-<!--
-    <section id="login" data-transition="slide">
-        <article class="-indented splash ">
-
-            <h1>Boletus</h1>
-            <form class="wwrapper arounded">
-                <label>hello humanoid!! type your credentials</label>
-                <input type="text" placeholder="Username" id="txt-signup-mail" value=""/>
-                <input type="text" placeholder="Email" id="txt-signup-name" value=""/>
-                <input type="password" placeholder="Password" id="txt-signup-name" value=""/>
-                <a href="#main" data-target="section" class="button big green" data-icon="user">Login</a>
-                <label>or</label>
-                <a href="#main" data-target="section" class="button big facebook" data-icon="plus">Signup with Facebook</a>
-            </form>
-            <div class="copyright">This App is made by TAPQUO</div>
-        </article>
-    </section>
- -->
-
-    <section id="main" data-transition="slide">
-        <header data-title="main" data-back="home">
-
-            <nav class="left">
-                <a href="#" class="empty cancel " data-icon="close" ></a>
-                <a href="#" class="empty accept" data-icon="menu" ></a>
-            </nav>
-
-            <nav class="right">
-                <a href="#" data-icon="user"></a>
-                <a href="#" data-icon="user"></a>
-            </nav>
-        </header>
-
-        <article></article>
-    </section>
-
-    <section id="foundation">
-        <header data-title="test"></header>
-        <footer class="toolbar with-labels"></footer>
-
-        <article>
-            <div class="row one red">.row.one</div>
-
-            <div class="row six blue">
-                <div class="one column orange"></div>
-                <div class="one column"></div>
-                <div class="four column orange">.four.column.orange</div>
-                <div class="one column"></div>
-                <div class="one column orange tall"></div>
-                <div class="one column "></div>
-                <div class="one column orange "></div>
-            </div>
-
-            <div class="row two green">
-                <div class="two columns centered red"></div>
-            </div>
-
-            <div class="row one yellow">.row.one.yellow</div>
-        </article>
-    </section>
-
-    <section id="a" data-transition="pop" >
-        <header data-title="a">
-            <nav class="right">
-                <a href="#baaaa" data-target="section">B</a>
-            </nav>
-        </header>
-        <article class="">
-            <a href="#" class="button big" data-icon="home">Prueba</a>
-        </article>
-    </section>
-
-    <section id="baaaa" data-transition="pop" >
-        <header data-title="b" data-back="home"></header>
-             <article></article>
-    </section>
-
-
-    <section id="sec-1"  class="popa" data-transition="pop">
-        <header class="extended">
-            <nav class="left">
-                <a href="#kitchen-sink-scroll" data-target="aside" data-icon="home"></a>
-                <a href="#kitchen-sink-scroll" data-article="nav-2" data-target="aside" data-icon="heart" data-count="8"></a>
-            </nav>
-            <div class="left">
-                <span class="title with-subtitle">Javi Jiménez Villar</span>
-                <span class="subtitle">@soyjavi</span>
-            </div>
-            <nav class="right ">
-                <!--
-                <a href="#profiles" data-target="aside" data-label="User"></a>
-                <a href="#profiles" data-target="aside" data-icon="users" data-label="User"></a>
-                 -->
-                 <a href="#" data-icon="cloud" id="btn-toggle-loading"></a>
-                <a href="#profiles" data-target="aside" data-icon="user" data-count="1"></a>
-            </nav>
-
-            <nav class="right plain ">
-                <a href="#" data-loading="white disable"></a>
-                <a href="#" data-loading="white "></a>
-            </nav>
-        </header>
-
-        <nav class="groupbar">
-            <a href="#nav-1" data-target="article" class="current"  data-icon="html5">&nbsp;Lists</a>
-            <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Form</a>
-        </nav>
-
-        <footer class="toolbar with-labels">
-            <nav>
-                <a href="#nav-0" data-target="article" data-icon="refresh" class="current" data-label="loading">
-                    <span class="bubble count" data-loading="white"></span>
-                </a>
-                <a href="#nav-1" data-target="article" data-title="d" data-icon="settings" data-label="boxes" data-count="1"></a>
-                <a href="#nav-2" data-target="article" data-title="b" data-icon="close" data-count="12" data-label="Form"></a>
-                <a href="#nav-3" data-target="article" data-title="c"  data-icon="share" data-label="Emails" data-count="123"></a>
-                <a href="#nav-4" data-target="article" data-title="lists" data-label="lists" data-loading="white"></a>
-            </nav>
-        </footer>
-
-        <!--
-        <footer class="toolbar">
-            <nav>
-                <a href="#nav-1" data-target="article" class="current"  data-icon="clock"></a>
-                <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17"></a>
-                <a href="#a" data-target="article" data-icon="mail" data-count="124"></a>
-                <a href="#a" data-target="article" data-icon="phone" data-count="12"></a>
-            </nav>
-        </footer>
-        -->
-
-        <article id="nav-0" data-loading="black">
-        </article>
-
-        <article id="nav-1" class="lisst">
-            <div id = "prueba" class="five row list  " style="background: url(http://placehold.it/320x200);">
-            </div>
-
-            <div class="three row grey">
-                <div class="six row green">
-                    <div class="wrapper">
-                        <div class="right" data-icon="calendar">June 9, 2012</div>
-                        <strong>LungoJS.2 Application</strong>
-                        <small>by Javi Jimenez <div class="bubble grey">PRO</div></small>
-                    </div>
-                </div>
-
-                <div class="four row red">
-                    <a href="#" class="four columns">
-                        <div class="wrapper" data-icon="heart">217 Likes</div>
-                    </a>
-                    <a href="#" class="three columns">
-                        <div class="wrapper" data-icon="pushpin">4 Buckets</div>
-                    </a>
-                    <a href="#" class="three columns">
-                        <div class="wrapper" data-icon="picture">389 Views</div>
-                    </a>
-                </div>
-            </div>
-
-            <div class="two row  white list scroll">
-                <ul>
-                    <li class=" selectable" >
-                        <a href="#" data-image="http://placehold.it/32x32">
-
-                            <div class="right" data-icon="calendar">2 days ago</div>
-                            <strong>List: .selectable</strong>
-                            <small>a: data-image</small>
-                        </a>
-                    </li>
-
-                    <li class=" selectable" >
-                        <a href="#" data-image="http://placehold.it/32x32">
-
-                            <div class="right" data-icon="calendar">2 days ago</div>
-                            <strong>List: .selectable</strong>
-                            <small>a: data-image</small>
-                        </a>
-                    </li>
-
-                    <li class=" selectable" >
-                        <a href="#" data-image="http://placehold.it/32x32">
-
-                            <div class="right" data-icon="calendar">2 days ago</div>
-                            <strong>List: .selectable</strong>
-                            <small>a: data-image</small>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-
-        </article>
-
-        <article id="nav-2" class="list indented scroll">
-            <ul class="form">
-                <li data-loading="black big"></li>
-                <li id="loading-code" style="background-color: grey;"></li>
-                <li class="padding">
-                    <label>type="text"</label>
-                    <input type="text" placeholder="Input text"/>
-                    <textarea placeholder="Textarea sample"></textarea>
-                    <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="padding">
-                    <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>
-                <li  class="padding">
-                    <label class="-pop">Do you like LungoJS forms?</label>
-                    <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
-                </li>
-
-                <li class="padding">
-                    <div id="progress-normal" data-progress="25%"></div>
-                    <div id="progress-big" data-progress="50%" class="big"></div>
-                    <label>type="range"</label>
-                    <input type="range">
-                </li>
-            </ul>
-            <ul>
-                <li class="anchor " data-icon="small user">Examples of anchors</li>
-                <li class="padding">
-                    <strong>Lorem Ipsum</strong>
-                    <small>is simply dummy text of the printing and typesetting industry</small>
-                </li>
-                <li class="anchor" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-                <li class="anchor contrast" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-
-                <li class="anchor" 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="anchor contrast" 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="anchor contrast" data-icon="question small">It's a special form element you must set the label with class "select"</li>
-            </ul>
-        </article>
-
-
-
-        <article id="nav-4" class="list scroll">
-            <ul>
-                <li>
-                    <a href="#" >
-                        <strong>List: none</strong>
-                        <small>a: none</small>
-                    </a>
-                </li>
-
-                <li class=" selectable" >
-                    <a href="#" data-image="http://placehold.it/32x32">
-
-                        <div class="right" data-icon="calendar">2 days ago</div>
-                        <strong>List: .selectable</strong>
-                        <small>a: data-image</small>
-                    </a>
-                </li>
-                 <li class="arrow thumb">
-                    <a href="#" data-image="http://placehold.it/48x48">
-                        <strong>List: .arrow .thumb </strong>
-                         <small>a: data-image</small>
-                    </a>
-                </li>
-                <li class="red">
-                    <a href="#"  data-icon="home">
-                        <div class="bubble red right"><span class="icon map"></span>125m</div>
-                        <strong>List: .red</strong>
-                        <small data-icon="clock">a: data-icon & .bubble</small>
-                    </a>
-                </li>
-
-                <li class="padding" data-icon="user">
-                    <strong>List: .padding & data-icon</strong>
-                    <small><span class="icon home"></span>a: undefined</small>
-                </li>
-
-                <li class="padding">
-                    <input type="text" placeholder="Input text"/>
-                    <textarea placeholder="Textarea sample"></textarea>
-                    <label class="select">
-                        <select class="custom">
-                            <option value="1">One</option>
-                            <option value="2">Two</option>
-                            <option value="3">Three</option>
-                        </select>
-                    </label>
-                </li>
-            </ul>
-
-        </article>
-
-        <article id="nav-3" class="list indented">
-            <div>
-                <a href="#sec-2" data-target="section" class="button big" data-icon="check">Test 2</a>
-                <a href="#sec-2"  class="button big red " data-icon="check">Test 2</a>
-                <a href="#sec-2" class="button big green" data-icon="check">Test 2</a>
-            </div>
-        </article>
-    </section>
-
-
-    <section id="sec-2" data-transition="pop">
-        <header data-title="Auto title centered">
-            <nav class="left">
-                <a href="#back" data-target="section" class="cancel" data-icon="close" data-label="CANCEL"></a>
-            </nav>
-
-            <nav class="right ">
-                <a href="#" class="accept" data-icon="check" data-label="ACCEPT"></a>
-            </nav>
-        </header>
-        <article>
-            None
-        </article>
-    </section>
-
-    <!-- Third parties dependencies -->
-    <script src="../../src/lib/QuoJS.js"></script>
-    <!-- LungoJS Libraries (Development mode)-->
-    <script src="../../src/Lungo.js"></script>
-    <script src="../../src/Lungo.App.js" ></script>
-    <script src="../../src/Lungo.Core.js"></script>
-    <script src="../../src/Lungo.Dom.js"></script>
-    <script src="../../src/Lungo.Service.js"></script>
-    <script src="../../src/Lungo.Constants.js"></script>
-    <script src="../../src/Lungo.Element.js"></script>
-    <script src="../../src/Lungo.Events.js"></script>
-    <script src="../../src/Lungo.Notification.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.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/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/Lungo.Fallback.js"></script>
-    <script src="../../src/boot/Lungo.Boot.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
-    <script src="../../src/boot/Lungo.Boot.Stats.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/view.js"></script>
-    <script src="app/data.js"></script>
-    <script src="app/services.js"></script>
-    <script src="app/events.js"></script>
-</body>
-</html>

examples/test/icons.html

@@ -1,740 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Lungo 2.0</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 name="viewport" content="width=device-width, user-scalable=no">
-
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="format-detection" content="telephone=no">
-    <!-- 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">
-
-    <meta http-equiv="cleartype" content="on">
-
-    <!-- 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.nav.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.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.widgets.icon.brand.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
-    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.scaffold.css">
-    <!--
-    <link rel="stylesheet" href="../../release/lungo.css">
-    <link rel="stylesheet" href="../../release/lungo.icon.css">
-    <link rel="stylesheet" href="../../release/lungo.theme.scaffold.css">
-    -->
-    <!-- App Stylesheet -->
-    <link rel="stylesheet" href="assets/stylesheets/app.css">
-</head>
-
-<body class="app">
-
-    <section id="icons">
-        <header class="extended" data-back="home" data-title="Icons Repository">
-        </header>
-
-        <nav class="groupbar">
-            <a href="#icons-default" data-target="article" data-label="Normal" data-count="72" class="current"></a>
-            <a href="#icons-brands" data-target="article" data-label="Brands" data-count="37" ></a>
-            <a href="#icons-others" data-target="article" data-label="Others"></a>
-        </nav>
-
-        <article id="icons-default" class="list scroll indented">
-            <ul>
-                <li data-icon="home">
-                    <a href="#">
-                        <strong>Home</strong>
-                        <small>class .home</small>
-                    </a>
-                </li>
-                <li data-icon="picture">
-                    <a href="#">
-                    <strong>picture</strong>
-                    <small>class .picture</small>
-                    </a>
-                </li>
-                <li data-icon="camera">
-                    <a href="#">
-                    <strong>camera</strong>
-                    <small>class .camera</small>
-                    </a>
-                </li>
-                <li data-icon="music">
-                    <a href="#">
-                    <strong>music</strong>
-                    <small>class .music</small>
-                    </a>
-                </li>
-                <li data-icon="broadcast">
-                    <a href="#">
-                    <strong>broadcast</strong>
-                    <small>class .broadcast</small>
-                    </a>
-                </li>
-                <li data-icon="microphone">
-                    <a href="#">
-                    <strong>microphone</strong>
-                    <small>class .microphone</small>
-                    </a>
-                </li>
-                <li data-icon="book">
-                    <a href="#">
-                    <strong>book</strong>
-                    <small>class .book</small>
-                    </a>
-                </li>
-                <li data-icon="folder">
-                    <a href="#">
-                    <strong>folder</strong>
-                    <small>class .folder</small>
-                    </a>
-                </li>
-                <li data-icon="tag">
-                    <a href="#">
-                    <strong>tag</strong>
-                    <small>class .tag</small>
-                    </a>
-                </li>
-                <li data-icon="ticket">
-                    <a href="#">
-                    <strong>ticket</strong>
-                    <small>class .ticket</small>
-                    </a>
-                </li>
-                <li data-icon="cart">
-                    <a href="#">
-                    <strong>cart</strong>
-                    <small>class .cart</small>
-                    </a>
-                </li>
-                <li data-icon="phone">
-                    <a href="#">
-                    <strong>phone</strong>
-                    <small>class .p>one</small>
-                    </a>
-                </li>
-                <li data-icon="address">
-                    <a href="#">
-                    <strong>address</strong>
-                    <small>class .address</small>
-                    </a>
-                </li>
-                <li data-icon="mail">
-                    <a href="#">
-                    <strong>mail</strong>
-                    <small>class .mail</small>
-                    </a>
-                </li>
-                <li data-icon="mail-open">
-                    <a href="#">
-                    <strong>mail-open</strong>
-                    <small>class .mail-open</small>
-                    </a>
-                </li>
-                <li data-icon="pushpin">
-                    <a href="#">
-                    <strong>pushpin</strong>
-                    <small>class .pushpin</small>
-                    </a>
-                </li>
-                <li data-icon="compass">
-                    <a href="#">
-                    <strong>compass</strong>
-                    <small>class .compass</small>
-                    </a>
-                </li>
-                <li data-icon="clock">
-                    <a href="#">
-                    <strong>clock</strong>
-                    <small>class .clock</small>
-                    </a>
-                </li>
-                <li data-icon="calendar">
-                    <a href="#">
-                    <strong>calendar</strong>
-                    <small>class .calendar</small>
-                    </a>
-                </li>
-                <li data-icon="mobile">
-                    <a href="#">
-                    <strong>mobile</strong>
-                    <small>class .mobile</small>
-                    </a>
-                </li>
-                <li data-icon="inbox">
-                    <a href="#">
-                    <strong>inbox</strong>
-                    <small>class .inbox</small>
-                    </a>
-                </li>
-                <li data-icon="inbox-full">
-                    <a href="#">
-                    <strong>inbox-full</strong>
-                    <small>class .inbox-full</small>
-                    </a>
-                </li>
-                <li data-icon="user">
-                    <a href="#">
-                    <strong>user</strong>
-                    <small>class .user</small>
-                    </a>
-                </li>
-                <li data-icon="users">
-                    <a href="#">
-                    <strong>users</strong>
-                    <small>class .users</small>
-                    </a>
-                </li>
-                <li data-icon="vcard">
-                    <a href="#">
-                    <strong>vcard</strong>
-                    <small>class .vcard</small>
-                    </a>
-                </li>
-                <li data-icon="chat">
-                    <a href="#">
-                    <strong>chat</strong>
-                    <small>class .chat</small>
-                    </a>
-                </li>
-                <li data-icon="message">
-                    <a href="#">
-                    <strong>message</strong>
-                    <small>class .message</small>
-                    </a>
-                </li>
-                <li data-icon="search">
-                    <a href="#">
-                    <strong>search</strong>
-                    <small>class .search</small>
-                    </a>
-                </li>
-                <li data-icon="pie">
-                    <a href="#">
-                    <strong>pie</strong>
-                    <small>class .pie</small>
-                    </a>
-                </li>
-                <li data-icon="bars">
-                    <a href="#">
-                    <strong>bars</strong>
-                    <small>class .bars</small>
-                    </a>
-                </li>
-                <li data-icon="remove">
-                    <a href="#">
-                    <strong>remove</strong>
-                    <small>class .remove</small>
-                    </a>
-                </li>
-                <li data-icon="grid">
-                    <a href="#">
-                    <strong>grid</strong>
-                    <small>class .grid</small>
-                    </a>
-                </li>
-                <li data-icon="menu">
-                    <a href="#">
-                    <strong>menu</strong>
-                    <small>class .menu</small>
-                    </a>
-                </li>
-                <li data-icon="cloud">
-                    <a href="#">
-                    <strong>cloud</strong>
-                    <small>class .cloud</small>
-                    </a>
-                </li>
-                <li data-icon="upload">
-                    <a href="#">
-                    <strong>upload</strong>
-                    <small>class .upload</small>
-                    </a>
-                </li>
-                <li data-icon="star">
-                    <a href="#">
-                    <strong>star</strong>
-                    <small>class .star</small>
-                    </a>
-                </li>
-                <li data-icon="star-full">
-                    <a href="#">
-                    <strong>star-full</strong>
-                    <small>class .star-full</small>
-                    </a>
-                </li>
-                <li data-icon="heart">
-                    <a href="#">
-                    <strong>heart</strong>
-                    <small>class .heart</small>
-                    </a>
-                </li>
-                <li data-icon="heart-full">
-                    <a href="#">
-                    <strong>heart-full</strong>
-                    <small>class .heart-full</small>
-                    </a>
-                </li>
-                <li data-icon="thumbs-up">
-                    <a href="#">
-                    <strong>thumbs-up</strong>
-                    <small>class .thumbs-up</small>
-                    </a>
-                </li>
-                <li data-icon="thumbs-down">
-                    <a href="#">
-                    <strong>thumbs-down</strong>
-                    <small>class .thumbs-down</small>
-                    </a>
-                </li>
-                <li data-icon="help">
-                    <a href="#">
-                    <strong>help</strong>
-                    <small>class .help</small>
-                    </a>
-                </li>
-                <li data-icon="warning">
-                    <a href="#">
-                    <strong>warning</strong>
-                    <small>class .warning</small>
-                    </a>
-                </li>
-                <li data-icon="info">
-                    <a href="#">
-                    <strong>info</strong>
-                    <small>class .info</small>
-                    </a>
-                </li>
-                <li data-icon="cancel">
-                    <a href="#">
-                    <strong>cancel</strong>
-                    <small>class .cancel</small>
-                    </a>
-                </li>
-                <li data-icon="check">
-                    <a href="#">
-                    <strong>check</strong>
-                    <small>class .check</small>
-                    </a>
-                </li>
-                <li data-icon="multiply">
-                    <a href="#">
-                    <strong>multiply</strong>
-                    <small>class .multiply</small>
-                    </a>
-                </li>
-                <li data-icon="plus">
-                    <a href="#">
-                    <strong>plus</strong>
-                    <small>class .plus</small>
-                    </a>
-                </li>
-                <li data-icon="minus">
-                    <a href="#">
-                    <strong>minus</strong>
-                    <small>class .minus</small>
-                    </a>
-                </li>
-                <li data-icon="left">
-                    <a href="#">
-                    <strong>left</strong>
-                    <small>class .left</small>
-                    </a>
-                </li>
-                <li data-icon="down">
-                    <a href="#">
-                    <strong>down</strong>
-                    <small>class .down</small>
-                    </a>
-                </li>
-                <li data-icon="right">
-                    <a href="#">
-                    <strong>right</strong>
-                    <small>class .right</small>
-                    </a>
-                </li>
-                <li data-icon="up">
-                    <a href="#">
-                    <strong>up</strong>
-                    <small>class .up</small>
-                    </a>
-                </li>
-                <li data-icon="refresh">
-                    <a href="#">
-                    <strong>refresh</strong>
-                    <small>class .refresh</small>
-                    </a>
-                </li>
-                <li data-icon="share">
-                    <a href="#">
-                    <strong>share</strong>
-                    <small>class .share</small>
-                    </a>
-                </li>
-                <li data-icon="settings">
-                    <a href="#">
-                    <strong>settings</strong>
-                    <small>class .settings</small>
-                    </a>
-                </li>
-                <li data-icon="accessibility">
-                    <a href="#">
-                    <strong>accessibility</strong>
-                    <small>class .accessibility</small>
-                    </a>
-                </li>
-                <li data-icon="pencil">
-                    <a href="#">
-                    <strong>pencil</strong>
-                    <small>class .pencil</small>
-                    </a>
-                </li>
-                <li data-icon="file">
-                    <a href="#">
-                    <strong>file</strong>
-                    <small>class .file</small>
-                    </a>
-                </li>
-                <li data-icon="lock">
-                    <a href="#">
-                    <strong>lock</strong>
-                    <small>class .lock</small>
-                    </a>
-                </li>
-                <li data-icon="map">
-                    <a href="#">
-                    <strong>map</strong>
-                    <small>class .map</small>
-                    </a>
-                </li>
-                <li data-icon="eye">
-                    <a href="#">
-                    <strong>eye</strong>
-                    <small>class .eye</small>
-                    </a>
-                </li>
-            </ul>
-        </article>
-
-        <article id="icons-brands" class="list scroll indented">
-            <ul>
-                <li data-icon="brand google-plus">
-                    <a href="#">
-                    <strong>google-plus</strong>
-                    <small>class .brand.google-plus</small>
-                    </a>
-                </li>
-                <li data-icon="brand facebook">
-                    <a href="#">
-                    <strong>facebook</strong>
-                    <small>class .brand.facebook</small>
-                    </a>
-                </li>
-                <li data-icon="brand twitter">
-                    <a href="#">
-                    <strong>twitter</strong>
-                    <small>class .brand.twitter</small>
-                    </a>
-                </li>
-                 <li data-icon="brand feed">
-                    <a href="#">
-                    <strong>feed</strong>
-                    <small>class .brand.feed</small>
-                    </a>
-                </li>
-                <li data-icon="brand vimeo">
-                    <a href="#">
-                    <strong>vimeo</strong>
-                    <small>class .brand.vimeo</small>
-                    </a>
-                </li>
-                <li data-icon="brand flickr">
-                    <a href="#">
-                    <strong>flickr</strong>
-                    <small>class .brand.flickr</small>
-                    </a>
-                </li>
-                <li data-icon="brand dribbble">
-                    <a href="#">
-                    <strong>dribbble</strong>
-                    <small>class .brand.dribbble</small>
-                    </a>
-                </li>
-                <li data-icon="brand forrst">
-                    <a href="#">
-                    <strong>forrst</strong>
-                    <small>class .brand.forrst</small>
-                    </a>
-                </li>
-                <li data-icon="brand deviantart">
-                    <a href="#">
-                    <strong>deviantart</strong>
-                    <small>class .brand.deviantart</small>
-                    </a>
-                </li>
-                <li data-icon="brand github">
-                    <a href="#">
-                    <strong>github</strong>
-                    <small>class .brand.github</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand git">
-                    <a href="#">
-                    <strong>git</strong>
-                    <small>class .brand.git</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand branch">
-                    <a href="#">
-                    <strong>branch</strong>
-                    <small>class .brand.branch</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand fork">
-                    <a href="#">
-                    <strong>fork</strong>
-                    <small>class .brand.fork</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand apple">
-                    <a href="#">
-                    <strong>apple</strong>
-                    <small>class .brand.apple</small>
-                    </a>
-                </li>
-                <li data-icon="brand android">
-                    <a href="#">
-                    <strong>android</strong>
-                    <small>class .brand.android</small>
-                    </a>
-                </li>
-                <li data-icon="brand windows">
-                    <a href="#">
-                    <strong>windows</strong>
-                    <small>class .brand.windows</small>
-                    </a>
-                </li>
-                <li data-icon="brand skype">
-                    <a href="#">
-                    <strong>skype</strong>
-                    <small>class .brand.skype</small>
-                    </a>
-                </li>
-                <li data-icon="brand linkedin">
-                    <a href="#">
-                    <strong>linkedin</strong>
-                    <small>class .brand.linkedin</small>
-                    </a>
-                </li>
-                <li data-icon="brand html5">
-                    <a href="#">
-                    <strong>html5</strong>
-                    <small>class .brand.html5</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand css3">
-                    <a href="#">
-                    <strong>css3</strong>
-                    <small>class .brand.css3</small>
-                    </a>
-                </li>
-                <li data-icon="brand chrome">
-                    <a href="#">
-                    <strong>chrome</strong>
-                    <small>class .brand.chrome</small>
-                    </a>
-                </li>
-                <li data-icon="brand firefox">
-                    <a href="#">
-                    <strong>firefox</strong>
-                    <small>class .brand.firefox</small>
-                    </a>
-                </li>
-                <li data-icon="brand IE">
-                    <a href="#">
-                    <strong>IE</strong>
-                    <small>class .brand.IE</small>
-                    </a>
-                </li>
-                <li data-icon="brand opera">
-                    <a href="#">
-                    <strong>opera</strong>
-                    <small>class .brand.opera</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand wordpress">
-                    <a href="#">
-                    <strong>wordpress</strong>
-                    <small>class .brand.wordpress</small>
-                    </a>
-                </li>
-            </ul>
-            <ul>
-                <li class="anchor">Variations</li>
-                <li data-icon="brand google-plus-2">
-                    <a href="#">
-                    <strong>google-plus-2</strong>
-                    <small>class .brand.google-plus-2</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand twitter-2">
-                    <a href="#">
-                    <strong>twitter-2</strong>
-                    <small>class .brand.twitter-2</small>
-                    </a>
-                </li>
-                <li data-icon="brand facebook-2">
-                    <a href="#">
-                    <strong>facebook-2</strong>
-                    <small>class .brand.facebook-2</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand feed-2">
-                    <a href="#">
-                    <strong>feed-2</strong>
-                    <small>class .brand.feed-2</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand vimeo-2">
-                    <a href="#">
-                    <strong>vimeo-2</strong>
-                    <small>class .brand.vimeo-2</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand flickr-2">
-                    <a href="#">
-                    <strong>flickr-2</strong>
-                    <small>class .brand.flickr-2</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand dribbble-2">
-                    <a href="#">
-                    <strong>dribbble-2</strong>
-                    <small>class .brand.dribbble-2</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand deviantart-2">
-                    <a href="#">
-                    <strong>deviantart-2</strong>
-                    <small>class .brand.deviantart-2</small>
-                    </a>
-                </li>
-                <li data-icon="brand git-2">
-                    <a href="#">
-                    <strong>git-2</strong>
-                    <small>class .brand.git-2</small>
-                    </a>
-                </li>
-                <li data-icon="brand github-2">
-                    <a href="#">
-                    <strong>github-2</strong>
-                    <small>class .brand.github-2</small>
-                    </a>
-                </li>
-                <li data-icon="brand wordpress-2">
-                    <a href="#">
-                    <strong>wordpress-2</strong>
-                    <small>class .brand.wordpress-2</small>
-                    </a>
-                </li>
-
-                <li data-icon="brand html5-2">
-                    <a href="#">
-                    <strong>html5-2</strong>
-                    <small>class .brand.html5-2</small>
-                    </a>
-                </li>
-            </ul>
-        </article>
-    </section>
-    <!-- Lungo dependencies -->
-    <script src="../../src/lib/quo.debug.js"></script>
-    <!--
-    <script src="../../release/lungo.js"></script>
-    -->
-    <script src="../../src/Lungo.js"></script>
-    <script src="../../src/Lungo.App.js" ></script>
-    <script src="../../src/Lungo.Core.js"></script>
-    <script src="../../src/Lungo.Dom.js"></script>
-    <script src="../../src/Lungo.Service.js"></script>
-    <script src="../../src/Lungo.Constants.js"></script>
-    <script src="../../src/Lungo.Element.js"></script>
-    <script src="../../src/Lungo.Events.js"></script>
-    <script src="../../src/Lungo.Notification.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.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/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/Lungo.Fallback.js"></script>
-    <script src="../../src/boot/Lungo.Boot.js"></script>
-    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
-    <script src="../../src/boot/Lungo.Boot.Stats.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/view.js"></script>
-    <script src="app/data.js"></script>
-    <script src="app/services.js"></script>
-    <script src="app/events.js"></script>
-        <script src="app/events.notification.js"></script>
-
-    <script>
-        Lungo.App.init({
-            name: 'Kitchen Sink',
-            version: '2.0',
-            resources: {
-                sections: [
-                    'aside.html', 'aside-profiles.html', 'notification.html']
-            }
-        });
-    </script>
-</body>
-</html>

examples/test/kitchensink.html

@@ -0,0 +1,124 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>KitchenSink - Lungo 2.0</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 name="viewport" content="width=device-width, user-scalable=no">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="format-detection" content="telephone=no">
+    <!-- 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">
+
+    <meta http-equiv="cleartype" content="on">
+
+    <!-- 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.nav.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.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.widgets.icon.brand.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.scaffold.css">
+    <!--
+    <link rel="stylesheet" href="../../release/lungo.css">
+    <link rel="stylesheet" href="../../release/lungo.icon.css">
+    <link rel="stylesheet" href="../../release/lungo.theme.scaffold.css">
+    -->
+    <!-- App Stylesheet -->
+    <link rel="stylesheet" href="assets/stylesheets/app.css">
+</head>
+
+<body class="app">
+
+    <section id="main" data-transition="slide">
+        <header>
+            <nav class="left">
+                <a href="#features" data-target="aside" data-icon="menu"></a>
+            </nav>
+            <div class="left">
+                <span class="title with-subtitle">Lungo Framework</span>
+                <span class="subtitle">version 2.0</span>
+            </div>
+        </header>
+
+        <article id="art-1" data-loading="black"></article>
+
+    </section>
+
+    <!-- Lungo dependencies -->
+    <script src="../../src/lib/quo.debug.js"></script>
+    <!--
+    <script src="../../release/lungo.js"></script>
+    -->
+    <script src="../../src/Lungo.js"></script>
+    <script src="../../src/Lungo.init.js"></script>
+    <script src="../../src/Lungo.Core.js"></script>
+    <script src="../../src/Lungo.Dom.js"></script>
+    <script src="../../src/Lungo.Service.js"></script>
+    <script src="../../src/Lungo.Constants.js"></script>
+    <script src="../../src/Lungo.Element.js"></script>
+    <script src="../../src/Lungo.Events.js"></script>
+    <script src="../../src/Lungo.Notification.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.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/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/Lungo.Fallback.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
+    <script src="../../src/boot/Lungo.Boot.Stats.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>
+        Lungo.init({
+            name: 'Kitchen Sink',
+            version: '2.0',
+            sugars: ['map', 'pull'],
+            resources: {
+                sections: ['features.html', 'aside-profiles.html', 'notification.html', 'list.html', 'icon.html'],
+                templates: [],
+                asides: []
+            }
+        });
+    </script>
+    <script src="app/app.js"></script>
+    <script src="app/view.js"></script>
+    <script src="app/data.js"></script>
+    <script src="app/services.js"></script>
+    <script src="app/events.js"></script>
+        <script src="app/events.notification.js"></script>
+</body>
+</html>

examples/test/list-example.html

@@ -1,122 +0,0 @@
-<section id="lists">
-    <header data-title="Lungo Framework 2.0" class="extended">
-        <nav class="left">
-            <a href="#aside-controls" data-target="aside" data-icon="menu"></a>
-        </nav>
-    </header>
-
-
-    <nav class=" groupbar">
-        <a href="#" class="current" data-icon="checkmark" data-label="accept"></a>
-        <a href="#" data-icon="close" data-label="cancel"></a>
-    </nav>
-
-    <footer class="toolbar">
-        <nav class=" ">
-            <a href="#" class="current" data-icon="checkmark" ></a>
-            <a href="#" data-icon="close"></a>
-        </nav>
-    </footer>
-
-    <article id="nav-4" class="list scroll current">
-        <ul>
-            <li class="anchor">With right elements</li>
-
-            <li>
-                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li class="selectable">
-                <strong>&lt;li class="selectable"&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li>
-                <a href="#">
-                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
-                </a>
-            </li>
-
-            <li>
-                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="anchor">.arrow class</li>
-
-            <li class="arrow">
-                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li class="arrow">
-                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="arrow">
-                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-                <small>&lt;small&gt;</small>
-            </li>
-
-
-            <li class="anchor">.right element</li>
-
-            <li>
-                <a href="#">
-                    <div class="right">.right</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <div class="right bubble blue">.right.bubble</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li class="anchor">With data-icon or data-image attribute</li>
-            <li data-image="http://placehold.it/32x32">
-                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class=" thumb" data-image="http://placehold.it/46x46">
-                <strong>&lt;li class="thumb" data-image&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li data-icon="user">
-                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="thumb" data-icon="user">
-                <strong>&lt;li class="thumb" data-icon&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="anchor">With colours</li>
-            <li class="blue">
-                <strong>&lt;li class="blue"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="green">
-                <strong>&lt;li class="green"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="yellow">
-                <strong>&lt;li class="yellow"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-        </ul>
-
-    </article>
-</section>