Changes on <markup/>

examples/kitchen-sink/app/sections/forms.html

@@ -37,7 +37,7 @@
                         </select>
                     </label>
                 </li>
-                <li class="tip dark" data-icon="question mini">It's a special form element you must set the label with class "select"</li>
+                <li class="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</li>
             </ul>
         </div>
     </article>
@@ -47,7 +47,7 @@
             <ul class="form">
                 <li class="anchor" data-icon="edit">Example of search</li>
                 <li data-search="Type a search..."></li>
-                <li class="tip darker" data-icon="question mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
+                <li class="tip darker" data-icon="question small">It's a special form element you must set the attribute data-search="Placeholder text"</li>
                 <li class="anchor" data-icon="edit">Example of type="*"</li>
                 <li>
                     <input type="datetime" placeholder="Some datetime..." />
@@ -55,7 +55,7 @@
                     <input type="time" placeholder="Some time..." />
                     <input type="month" placeholder="Some month..." />
                 </li>
-                <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
+                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
             </ul>
         </div>
     </article>
@@ -67,7 +67,7 @@
                 <li data-progress="0%"></li>
                 <li class="anchor" data-icon="edit">Example of range</li>
                 <li> <input type="range"></li>
-                <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
+                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
             </ul>
         </div>
     </article>
@@ -97,9 +97,9 @@
         <div class="container indented">
             <ul class="form">
                 <li class="anchor">Examples of tips</li>
-                <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip darker" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
 
                 <li class="tip" 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="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>

examples/kitchen-sink/index.html

@@ -41,7 +41,8 @@
     <section id="login">
         <article class="splash">
             <div class="indented">
-                <h1>Kitchen<span class="semi-opacity">Sink<span></h1>
+                <h1>Kitchen<span }
+>Sink<span></h1>
 
                 <input type="text" placeholder="Type your user" />
                 <input type="password" placeholder="Type your password" />
@@ -108,54 +109,54 @@
                 <p class="text">In the listed examples you are seeing a attribute "data-icon", this attribute only need the semantic name of the icon you want to show and LungoJS will do the rest of the work.</p>
 
                 <ul>
-                    <li data-icon="map mini">map</li>
-                    <li data-icon="clock mini">clock</li>
-                    <li data-icon="calendar mini">calendar</li>
-                    <li data-icon="message mini">message</li>
-                    <li data-icon="chat mini">chat</li>
-                    <li data-icon="user mini">user</li>
-                    <li data-icon="group mini">group</li>
-                    <li data-icon="loading mini">loading</li>
-                    <li data-icon="refresh mini">refresh</li>
-                    <li data-icon="search mini">search</li>
-                    <li data-icon="pushpin mini">pushpin</li>
-                    <li data-icon="star mini">star</li>
-                    <li data-icon="heart mini">heart</li>
-                    <li data-icon="warning mini">warning</li>
-                    <li data-icon="add mini">add</li>
-                    <li data-icon="remove mini">remove</li>
-                    <li data-icon="question mini">question</li>
-                    <li data-icon="info mini">info</li>
-                    <li data-icon="check mini">check</li>
-                    <li data-icon="substract mini">substract</li>
-                    <li data-icon="close mini">close</li>
-                    <li data-icon="plus mini">plus</li>
-                    <li data-icon="up mini">up</li>
-                    <li data-icon="down mini">down</li>
-                    <li data-icon="left mini">left</li>
-                    <li data-icon="right mini">right</li>
-                    <li data-icon="home mini">home</li>
-                    <li data-icon="pencil mini">pencil</li>
-                    <li data-icon="edit mini">edit</li>
-                    <li data-icon="picture mini">picture</li>
-                    <li data-icon="camera mini">camera</li>
-                    <li data-icon="music mini">music</li>
-                    <li data-icon="wifi mini">wifi</li>
-                    <li data-icon="file mini">file</li>
-                    <li data-icon="files mini">files</li>
-                    <li data-icon="folder mini">folder</li>
-                    <li data-icon="key mini">key</li>
-                    <li data-icon="settings mini">settings</li>
-                    <li data-icon="chart mini">chart</li>
-                    <li data-icon="trash mini">trash</li>
-                    <li data-icon="target mini">target</li>
-                    <li data-icon="items mini">items</li>
-                    <li data-icon="download mini">download</li>
-                    <li data-icon="upload mini">upload</li>
-                    <li data-icon="basket mini">basket</li>
-                    <li data-icon="phone mini">phone</li>
-                    <li data-icon="mail mini">mail</li>
-                    <li data-icon="tag mini">tag</li>
+                    <li data-icon="map small">map</li>
+                    <li data-icon="clock small">clock</li>
+                    <li data-icon="calendar small">calendar</li>
+                    <li data-icon="message small">message</li>
+                    <li data-icon="chat small">chat</li>
+                    <li data-icon="user small">user</li>
+                    <li data-icon="group small">group</li>
+                    <li data-icon="loading small">loading</li>
+                    <li data-icon="refresh small">refresh</li>
+                    <li data-icon="search small">search</li>
+                    <li data-icon="pushpin small">pushpin</li>
+                    <li data-icon="star small">star</li>
+                    <li data-icon="heart small">heart</li>
+                    <li data-icon="warning small">warning</li>
+                    <li data-icon="add small">add</li>
+                    <li data-icon="remove small">remove</li>
+                    <li data-icon="question small">question</li>
+                    <li data-icon="info small">info</li>
+                    <li data-icon="check small">check</li>
+                    <li data-icon="substract small">substract</li>
+                    <li data-icon="close small">close</li>
+                    <li data-icon="plus small">plus</li>
+                    <li data-icon="up small">up</li>
+                    <li data-icon="down small">down</li>
+                    <li data-icon="left small">left</li>
+                    <li data-icon="right small">right</li>
+                    <li data-icon="home small">home</li>
+                    <li data-icon="pencil small">pencil</li>
+                    <li data-icon="edit small">edit</li>
+                    <li data-icon="picture small">picture</li>
+                    <li data-icon="camera small">camera</li>
+                    <li data-icon="music small">music</li>
+                    <li data-icon="wifi small">wifi</li>
+                    <li data-icon="file small">file</li>
+                    <li data-icon="files small">files</li>
+                    <li data-icon="folder small">folder</li>
+                    <li data-icon="key small">key</li>
+                    <li data-icon="settings small">settings</li>
+                    <li data-icon="chart small">chart</li>
+                    <li data-icon="trash small">trash</li>
+                    <li data-icon="target small">target</li>
+                    <li data-icon="items small">items</li>
+                    <li data-icon="download small">download</li>
+                    <li data-icon="upload small">upload</li>
+                    <li data-icon="basket small">basket</li>
+                    <li data-icon="phone small">phone</li>
+                    <li data-icon="mail small">mail</li>
+                    <li data-icon="tag small">tag</li>
                 </ul>
             </div>
         </article>

examples/release-test/app/sections/forms.html

@@ -36,7 +36,7 @@
                         </select>
                     </label>
                 </li>
-                <li class="tip dark" data-icon="question mini">It's a special form element you must set the label with class "select"</li>
+                <li class="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</li>
             </ul>
         </div>
     </article>
@@ -53,7 +53,7 @@
                     <input type="time" placeholder="Some time..." />
                     <input type="month" placeholder="Some month..." />
                 </li>
-                <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
+                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
             </ul>
         </div>
     </article>
@@ -83,9 +83,9 @@
         <div class="container indented">
             <ul class="form">
                 <li class="anchor">Examples of tips</li>
-                <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip darker" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
 
                 <li class="tip" 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="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>

examples/release-test/index.html

@@ -75,54 +75,54 @@
                 <p class="text">In the listed examples you are seeing a attribute "data-icon", this attribute only need the semantic name of the icon you want to show and LungoJS will do the rest of the work.</p>
 
                 <ul>
-                    <li data-icon="map mini">map</li>
-                    <li data-icon="clock mini">clock</li>
-                    <li data-icon="calendar mini">calendar</li>
-                    <li data-icon="message mini">message</li>
-                    <li data-icon="chat mini">chat</li>
-                    <li data-icon="user mini">user</li>
-                    <li data-icon="group mini">group</li>
-                    <li data-icon="loading mini">loading</li>
-                    <li data-icon="refresh mini">refresh</li>
-                    <li data-icon="search mini">search</li>
-                    <li data-icon="pushpin mini">pushpin</li>
-                    <li data-icon="star mini">star</li>
-                    <li data-icon="heart mini">heart</li>
-                    <li data-icon="warning mini">warning</li>
-                    <li data-icon="add mini">add</li>
-                    <li data-icon="remove mini">remove</li>
-                    <li data-icon="question mini">question</li>
-                    <li data-icon="info mini">info</li>
-                    <li data-icon="check mini">check</li>
-                    <li data-icon="substract mini">substract</li>
-                    <li data-icon="close mini">close</li>
-                    <li data-icon="plus mini">plus</li>
-                    <li data-icon="up mini">up</li>
-                    <li data-icon="down mini">down</li>
-                    <li data-icon="left mini">left</li>
-                    <li data-icon="right mini">right</li>
-                    <li data-icon="home mini">home</li>
-                    <li data-icon="pencil mini">pencil</li>
-                    <li data-icon="edit mini">edit</li>
-                    <li data-icon="picture mini">picture</li>
-                    <li data-icon="camera mini">camera</li>
-                    <li data-icon="music mini">music</li>
-                    <li data-icon="wifi mini">wifi</li>
-                    <li data-icon="file mini">file</li>
-                    <li data-icon="files mini">files</li>
-                    <li data-icon="folder mini">folder</li>
-                    <li data-icon="key mini">key</li>
-                    <li data-icon="settings mini">settings</li>
-                    <li data-icon="chart mini">chart</li>
-                    <li data-icon="trash mini">trash</li>
-                    <li data-icon="target mini">target</li>
-                    <li data-icon="items mini">items</li>
-                    <li data-icon="download mini">download</li>
-                    <li data-icon="upload mini">upload</li>
-                    <li data-icon="basket mini">basket</li>
-                    <li data-icon="phone mini">phone</li>
-                    <li data-icon="mail mini">mail</li>
-                    <li data-icon="tag mini">tag</li>
+                    <li data-icon="map small">map</li>
+                    <li data-icon="clock small">clock</li>
+                    <li data-icon="calendar small">calendar</li>
+                    <li data-icon="message small">message</li>
+                    <li data-icon="chat small">chat</li>
+                    <li data-icon="user small">user</li>
+                    <li data-icon="group small">group</li>
+                    <li data-icon="loading small">loading</li>
+                    <li data-icon="refresh small">refresh</li>
+                    <li data-icon="search small">search</li>
+                    <li data-icon="pushpin small">pushpin</li>
+                    <li data-icon="star small">star</li>
+                    <li data-icon="heart small">heart</li>
+                    <li data-icon="warning small">warning</li>
+                    <li data-icon="add small">add</li>
+                    <li data-icon="remove small">remove</li>
+                    <li data-icon="question small">question</li>
+                    <li data-icon="info small">info</li>
+                    <li data-icon="check small">check</li>
+                    <li data-icon="substract small">substract</li>
+                    <li data-icon="close small">close</li>
+                    <li data-icon="plus small">plus</li>
+                    <li data-icon="up small">up</li>
+                    <li data-icon="down small">down</li>
+                    <li data-icon="left small">left</li>
+                    <li data-icon="right small">right</li>
+                    <li data-icon="home small">home</li>
+                    <li data-icon="pencil small">pencil</li>
+                    <li data-icon="edit small">edit</li>
+                    <li data-icon="picture small">picture</li>
+                    <li data-icon="camera small">camera</li>
+                    <li data-icon="music small">music</li>
+                    <li data-icon="wifi small">wifi</li>
+                    <li data-icon="file small">file</li>
+                    <li data-icon="files small">files</li>
+                    <li data-icon="folder small">folder</li>
+                    <li data-icon="key small">key</li>
+                    <li data-icon="settings small">settings</li>
+                    <li data-icon="chart small">chart</li>
+                    <li data-icon="trash small">trash</li>
+                    <li data-icon="target small">target</li>
+                    <li data-icon="items small">items</li>
+                    <li data-icon="download small">download</li>
+                    <li data-icon="upload small">upload</li>
+                    <li data-icon="basket small">basket</li>
+                    <li data-icon="phone small">phone</li>
+                    <li data-icon="mail small">mail</li>
+                    <li data-icon="tag small">tag</li>
                 </ul>
             </div>
         </article>

examples/test/app/sections/aside.html

@@ -1,4 +1,4 @@
-<aside id="kitchen-sink-scroll" class="scrollable  mini">
+<aside id="kitchen-sink-scroll" class="scrollable  small">
     <div>
         <a href="#nav-1" data-target="article" class="current" data-icon="clock"></a>
         <a href="#nav-2" data-target="article" data-icon="calendar"></a>

examples/test/app/sections/forms.html

@@ -37,7 +37,7 @@
                         </select>
                     </label>
                 </li>
-                <li class="tip dark" data-icon="question mini">It's a special form element you must set the label with class "select"</li>
+                <li class="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</li>
             </ul>
         </div>
     </article>
@@ -47,7 +47,7 @@
             <ul class="form">
                 <li class="anchor" data-icon="edit">Example of search</li>
                 <li data-search="Type a search..."></li>
-                <li class="tip darker" data-icon="question mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
+                <li class="tip darker" data-icon="question small">It's a special form element you must set the attribute data-search="Placeholder text"</li>
                 <li class="anchor" data-icon="edit">Example of type="*"</li>
                 <li>
                     <input type="datetime" placeholder="Some datetime..." />
@@ -55,7 +55,7 @@
                     <input type="time" placeholder="Some time..." />
                     <input type="month" placeholder="Some month..." />
                 </li>
-                <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
+                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
             </ul>
         </div>
     </article>
@@ -67,7 +67,7 @@
                 <li data-progress="0%"></li>
                 <li class="anchor" data-icon="edit">Example of range</li>
                 <li> <input type="range"></li>
-                <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
+                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
             </ul>
         </div>
     </article>
@@ -97,9 +97,9 @@
         <div class="container indented">
             <ul class="form">
                 <li class="anchor">Examples of tips</li>
-                <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip darker" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
 
                 <li class="tip" 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="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>

examples/test/index.html

@@ -41,7 +41,8 @@
     <section id="test-1" class="pop">
         <header class="extended">
             <nav class="onleft">
-                <a href="#kitchen-sink-scroll" data-target="aside" data-icon="user"></a>
+                <a href="#kitchen-sink-scroll" data-target="aside" data-icon="user" data-count="3"></a>
+                <a href="#kitchen-sink-scroll" data-target="aside" data-icon="user" data-count="23"></a>
             </nav>
             <div class="onleft">
                 <span class="title with-subtitle">Javi Jiménez Villar</span>
@@ -62,7 +63,7 @@
             <nav>
                 <a href="#nav-1" data-target="article"  data-icon="clock" data-label="Alarm"></a>
                 <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17" data-label="Calendar"></a>
-                <a href="#nav-3" data-target="article" class="current" data-icon="mail" data-label="Emails" data-count="124"></a>
+                <a href="#nav-3" data-target="article" class="current" data-icon="mail" data-label="Emails" data-count="1"></a>
                 <a href="#nav-4" data-target="article" data-icon="phone" data-label="Calls" data-count="12"></a>
             </nav>
         </footer>
@@ -119,14 +120,14 @@
             </ul>
             <ul>
                 <li class="tip theme">Examples of tips</li>
-                <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
 
                 <li class="tip" 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="tip dark" 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="tip dark" data-icon="question mini">It's a special form element you must set the label with class "select"</li>
+                <li class="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</li>
             </ul>
         </article>
 

examples/todo.js/index.html

@@ -28,7 +28,8 @@
     <section id="login">
         <article class="splash indented">
             <div>
-                <h1>ToDo.<span class="semi-opacity">js<span></h1>
+                <h1>ToDo.<span }
+>js<span></h1>
                 <input type="text" placeholder="Type your user" />
                 <input type="password" placeholder="Type your password" />
                 <a href="#" id="btnLogin" class="button big" data-icon="key">Test Demo!</a>
@@ -66,7 +67,7 @@
         </header>
         <article class="list indented">
             <ul class="form">
-                <li class="tip dark" data-icon="pencil mini">Edit ToDo</li>
+                <li class="tip dark" data-icon="pencil small">Edit ToDo</li>
                 <li class="dark">
                     <label>Name</label>
                     <input type="text" id="txtEditName" placeholder="Input text"/>