<section> for list examples

examples/test/list-example.html

@@ -0,0 +1,122 @@
+<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>