Change Markup example

example/app/articles/list.html

@@ -22,7 +22,7 @@
             <small>&lt;small&gt;</small>
         </li>
 
-        <li class="anchor">colors</li>
+        <li class="anchor contrast">colors</li>
 
         <li class="dark">
             <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
@@ -39,7 +39,7 @@
             <small>&lt;small&gt;</small>
         </li>
 
-        <li class="anchor">.arrow class</li>
+        <li class="anchor contrast">.arrow class</li>
 
         <li class="arrow">
             <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
@@ -52,7 +52,7 @@
         </li>
 
 
-        <li class="anchor">.right element</li>
+        <li class="anchor contrast">.right element</li>
 
         <li>
             <a href="#">
@@ -94,7 +94,7 @@
             </a>
         </li>
 
-        <li class="anchor">With data-icon or data-image attribute</li>
+        <li class="anchor contrast">With data-icon or data-image attribute</li>
         <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
             <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
             <small>&lt;small&gt;</small>
@@ -112,7 +112,7 @@
             <small>&lt;small&gt;</small>
         </li>
 
-        <li class="anchor">With colours</li>
+        <li class="anchor contrast">With colours</li>
         <li class="accept">
             <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
             <small>&lt;small&gt;</small>
@@ -149,7 +149,7 @@
             <small>&lt;small&gt;</small>
         </li>
 
-        <li class="anchor">colors</li>
+        <li class="anchor contrast">colors</li>
 
         <li class="dark">
             <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
@@ -166,7 +166,7 @@
             <small>&lt;small&gt;</small>
         </li>
 
-        <li class="anchor">.arrow class</li>
+        <li class="anchor contrast">.arrow class</li>
 
         <li class="arrow">
             <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
@@ -179,7 +179,7 @@
         </li>
 
 
-        <li class="anchor">.right element</li>
+        <li class="anchor contrast">.right element</li>
 
         <li>
             <a href="#">
@@ -221,8 +221,7 @@
             </a>
         </li>
 
-
-        <li class="anchor">With data-icon or data-image attribute</li>
+        <li class="anchor contrast">With data-icon or data-image attribute</li>
         <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
             <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
             <small>&lt;small&gt;</small>
@@ -240,7 +239,7 @@
             <small>&lt;small&gt;</small>
         </li>
 
-        <li class="anchor">With colours</li>
+        <li class="anchor contrast">With colours</li>
         <li class="theme">
             <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
             <small>&lt;small&gt;</small>

example/app/asides/features.html

@@ -10,6 +10,7 @@
             <!-- Basic Layout -->
             <li data-view-article="main-article" data-title="Lungo Framework">
                 <strong>Meet the framework</strong>
+                <small>Real Cross-Device</small>
             </li>
 
             <!-- Layout & Navigation -->
@@ -25,7 +26,7 @@
             </li>
 
             <!-- Forms -->
-            <li data-view-section="form" data-async="app/sections/form.html">
+            <li data-view-section="form">
                 <div class="tag right">8</div>
                 <strong>Form Elements</strong>
             </li>

example/app/sections/form.html

@@ -1,6 +1,11 @@
 
 <section id="form" data-transition="slide">
-    <header data-title="Form Elements" data-back="home"></header>
+    <header data-title="Form Elements" data-back="home">
+        <nav class="right">
+            <button data-label="test"></button>
+            <button data-icon="edit"></button>
+        </nav>
+    </header>
 
     <nav data-control="groupbar">
         <a href="#" data-view-article="form-normal" data-label="Normal" class="active"></a>
@@ -34,6 +39,8 @@
                 <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
             </fieldset>
 
+
+            </fieldset>
             <!-- INPUT -->
             <fieldset>
                 <input type="text" id="description" class="text align_center" placeholder="value"/>
@@ -55,6 +62,11 @@
                 <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
             </fieldset>
 
+            <fieldset>
+                <label class="anchor">label Lorem ipsum dolor sit amet</label>
+                 <div data-control-checkbox="check" class="inline right"></div>
+             </fieldset>
+
             <fieldset data-icon="plus">
                 <label>label</label>
                 <input type="text" value="value" />
@@ -107,6 +119,13 @@
                 </label>
             </fieldset>
 
+
+            <fieldset>
+                <label class="anchor">label Lorem ipsum dolor sit amet</label>
+                <div data-control-checkbox="check_indent" class="inline right"></div>
+             </fieldset>
+
+
             <fieldset class="radius-bottom shadow">
                 <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
             </fieldset>
@@ -174,11 +193,11 @@
             </div>
             <br/>
 
-            <button class="anchor margin-bottom" data-label="Return to normal Elements"></button>
-            <button class="anchor accept margin-bottom" data-label="Return to normal Elements"></button>
-            <button class="anchor cancel margin-bottom" data-label="Return to normal Elements"></button>
-            <button class="anchor secondary margin-bottom" data-label="Return to normal Elements"></button>
-            <button class="anchor disabled" data-label="Return to normal Elements"></button>
+            <button class="anchor margin-bottom" data-label="Normal"></button>
+            <button class="anchor accept margin-bottom" data-icon="ok" data-label="Accept"></button>
+            <button class="anchor cancel margin-bottom" data-icon="remove" data-label="Cancel"></button>
+            <button class="anchor secondary margin-bottom" data-icon="plus" data-label="Secondary"></button>
+            <button class="anchor disabled" data-label="Disabled"></button>
         </div>
     </article>
 </section>

example/app/sections/list.html

@@ -1,302 +0,0 @@
-<section id="list" data-transition="slide">
-    <header data-title="Lists" class="extended"  data-back="home"></header>
-
-    <nav class="groupbar">
-        <a href="#" data-view-article="list-normal" class="active" data-icon="checkmark" data-label="Normal"></a>
-        <a href="#" data-view-article="list-indented" data-label="Indented"></a>
-        <a href="#" data-view-article="list-examples" data-label="Examples"></a>
-    </nav>
-
-    <article id="list-normal" class="active list scroll">
-        <ul>
-            <li>
-                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li class="selectable">
-                <strong>&lt;li .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">colors</li>
-
-            <li class="dark">
-                <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="theme">
-                <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="arrow light">
-                <strong>&lt;li .arrow.light&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="anchor">.arrow class</li>
-
-            <li class="arrow">
-                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li class="arrow">
-                <strong>&lt;li .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="#">
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                    <div class="right">.right</div>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <div class="right tag blue">.right.tag</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <div class="right tag blue" data-icon="clock">.right data-icon</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <a href="#" class="button small red right" data-label="button"></a>
-                    <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://cdn.tapquo.com/lungo/icon-144.png">
-                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
-                <strong>&lt;li .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 .thumb data-icon&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="anchor">With colours</li>
-            <li class="accept">
-                <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="cancel">
-                <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="secondary">
-                <strong>&lt;li .secondary&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-        </ul>
-    </article>
-
-    <article id="list-indented" class="list scroll indented">
-        <ul>
-            <li>
-                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li class="selectable">
-                <strong>&lt;li .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">colors</li>
-
-            <li class="dark">
-                <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="theme">
-                <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="arrow light">
-                <strong>&lt;li .arrow.light&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="anchor">.arrow class</li>
-
-            <li class="arrow">
-                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li class="arrow">
-                <strong>&lt;li .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="#">
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                    <div class="right">.right</div>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <div class="right tag blue">.right.tag</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <div class="right tag blue" data-icon="clock">.right data-icon</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <a href="#" class="button small red right" data-label="button"></a>
-                    <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://cdn.tapquo.com/lungo/icon-144.png">
-                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class=" thumb" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
-                <strong>&lt;li .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 .thumb data-icon&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="anchor">With colours</li>
-            <li class="theme">
-                <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="accept">
-                <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="cancel">
-                <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="secondary">
-                <strong>&lt;li .secondary&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-        </ul>
-    </article>
-
-
-
-    <article id="list-examples" class="list scroll">
-        <ul>
-            <li class="feature">
-                <div class="right  ">15:49</div>
-                <strong class="text bold">Javi Jimenez Villar</strong>
-                <div class="text small">[JavaScript] [JOB] FrontEnd Developer</div>
-                <small>
-                    <div class="right tag ">theme</div>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus unde.
-                </small>
-            </li>
-            <li class="feature">
-                <div class="right ">15:49</div>
-                <strong class="text normal">Ignacio Olalde</strong>
-                <small class="text small">[Python] [JOB] BackEnd Developer</small>
-                <small>
-                    <div class="right tag cancel">important</div>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus unde.
-                </small>
-            </li>
-            <li class="feature">
-                <div class="right tag accept">sended</div>
-                <strong class="text bold">Open Source Project</strong>
-                <p class="text thin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos officia dolore in perferendis eum ducimus molestias...</p>
-            </li>
-            <li class="feature">
-                <strong>Lorem ipsum dolor sit amet</strong>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut corporis sint facilis cupiditate adipisci ab blanditiis porro dolorem nam velit saepe sed unde minima in nesciunt nostrum laboriosam fugit.
-            </li>
-        </ul>
-    </article>
-</section>

example/index.html

@@ -90,10 +90,10 @@
 
         <article id="main-article" class="list indented scroll">
             <ul>
-                <li class="dark">
+                <li class="secondary">
                     <strong>
-                    A framework for developers who want to design, build and share cross device apps.
-                </strong>
+                        A framework for developers who want to design, build and share cross device apps.
+                    </strong>
                 </li>
                 <li class="feature">
                     <strong>HTML5 Optimized Apps</strong>
@@ -120,7 +120,7 @@
 
     <!-- Lungo dependencies -->
     <script src="components/quojs/quo.js"></script>
-    <script src="components/lungo.brownie/lungo.js"></script>
+    <script src="components/lungo.brownie/lungo.debug.js"></script>
     <!-- LungoJS - Sandbox App -->
     <script>
         Lungo.init({
@@ -128,7 +128,8 @@
             version: '2.1.0222',
             resources: [
                 'app/asides/features.html',
-                'app/asides/right.html']
+                'app/asides/right.html',
+                'app/sections/form.html']
         });
     </script>
     <script src="app/app.js"></script>

example/stylesheets/app.css

@@ -1,10 +1,4 @@
-#main article li.contrast {
-    font-size: 0.95em;
-}
 
-#main article li.feature strong {
-    display: block;
-}
 
 .console {
     background: #292f34;

example/test.html

@@ -16,8 +16,6 @@
     <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
     <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
     <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
-    <!-- App Stylesheet -->
-    <link rel="stylesheet" href="stylesheets/app.css">
 </head>
 
 <body class="app">