Merge pull request #170 from picturepan2/feature/0.2.10 v0.2.10

Feature/0.2.10

1 files changed, 21 insertions, 16 deletions

diff --git a/docs/layout.html b/docs/layout.html
index 7954871..cf09726 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -63,6 +63,9 @@
           <li class="nav-item">
             <a href="utilities.html">Utilities</a>
           </li>
+          <li class="nav-item">
+            <a href="experimentals.html">Experimentals</a>
+          </li>
         </ul>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
@@ -360,7 +363,8 @@
               <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>. </li>
               <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>. </li>
             </ul>
-            <p>Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory <code>/tools/resizer</code>.</p>
+            <p>Spectre also has a responsive web test tool Responsive Resizer. You can clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally or use it online.</p>
+            <p><a href="https://picturepan2.github.io/responsive-resizer/" class="btn btn-primary">Responsive Resizer</a></p>
           </section>
         </section>
 
@@ -442,6 +446,7 @@
                     <img src="img/avatar-2.png" />
                   </figure>
                   <div class="panel-title mt-10">Bruce Banner</div>
+                  <div class="panel-subtitle">THE HULK</div>
                 </div>
                 <nav class="panel-nav">
                   <ul class="tab tab-block">
@@ -466,7 +471,7 @@
                   <div class="tile tile-centered">
                     <div class="tile-content">
                       <div class="tile-title">E-mail</div>
-                      <div class="tile-meta">bruce.banner@hulk.com</div>
+                      <div class="tile-subtitle">bruce.banner@hulk.com</div>
                     </div>
                     <div class="tile-action">
                       <button class="btn btn-link btn-action btn-lg"><i class="icon icon-mail_outline"></i></button>
@@ -475,7 +480,7 @@
                   <div class="tile tile-centered">
                     <div class="tile-content">
                       <div class="tile-title">Skype</div>
-                      <div class="tile-meta">bruce.banner</div>
+                      <div class="tile-subtitle">bruce.banner</div>
                     </div>
                     <div class="tile-action">
                       <button class="btn btn-link btn-action btn-lg"><i class="icon icon-phone"></i></button>
@@ -484,7 +489,7 @@
                   <div class="tile tile-centered">
                     <div class="tile-content">
                       <div class="tile-title">Location</div>
-                      <div class="tile-meta">Dayton, Ohio</div>
+                      <div class="tile-subtitle">Dayton, Ohio</div>
                     </div>
                     <div class="tile-action">
                       <button class="btn btn-link btn-action btn-lg"><i class="icon icon-map"></i></button>
@@ -510,7 +515,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Thor Odinson</p>
-                      <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                     </div>
                   </div>
                   <div class="tile">
@@ -521,7 +526,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Bruce Banner</p>
-                      <p class="tile-meta">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+                      <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                     </div>
                   </div>
                   <div class="tile">
@@ -530,7 +535,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Tony Stark</p>
-                      <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                     </div>
                   </div>
                   <div class="tile">
@@ -541,7 +546,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Steve Rogers</p>
-                      <p class="tile-meta">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+                      <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                     </div>
                   </div>
                   <div class="tile">
@@ -552,7 +557,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Natasha Romanoff</p>
-                      <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                     </div>
                   </div>
                 </div>
@@ -601,7 +606,7 @@
                   <i class="icon icon-markunread"></i>
                 </div>
                 <h4 class="empty-title">You have no new messages</h4>
-                <p class="empty-meta">Click the button to start a conversation</p>
+                <p class="empty-subtitle">Click the button to start a conversation</p>
                 <div class="empty-action">
                   <button class="btn btn-primary">Send a message</button>
                 </div>
@@ -613,7 +618,7 @@
                   <i class="icon icon-drafts"></i>
                 </div>
                 <h4 class="empty-title">You've successfully signed up</h4>
-                <p class="empty-meta">Click the button to invite your friends</p>
+                <p class="empty-subtitle">Click the button to invite your friends</p>
                 <div class="empty-action">
                   <button class="btn btn-primary">Invite your friends</button>
                 </div>
@@ -628,7 +633,7 @@
                   <i class="icon icon-people"></i>
                 </div>
                 <h4 class="empty-title">You are not following anyone</h4>
-                <p class="empty-meta">Start to meet new friends</p>
+                <p class="empty-subtitle">Start to meet new friends</p>
                 <div class="empty-action input-group input-inline">
                   <input type="text" class="form-input" placeholder="" />
                   <button class="btn btn-primary input-group-btn">Search</button>
@@ -638,7 +643,7 @@
           </div>
 
           <section class="notes">
-            <p>An empty state component can include icons, messages (title and meta messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
+            <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
           </section>
 
 <!-- empty states example -->
@@ -647,7 +652,7 @@
     &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title&quot;</span>&gt;You have no new messages&lt;<span class="tag">/h4</span>&gt;
-  &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-meta&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
+  &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-subtitle&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action&quot;</span>&gt;
     &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
@@ -661,13 +666,13 @@
           <ul class="pagination">
             <li class="page-item page-prev">
               <a href="elements.html">
-                <p class="page-item-meta">Previous</p>
+                <p class="page-item-subtitle">Previous</p>
                 <h4 class="page-item-title">Elements</h4>
               </a>
             </li>
             <li class="page-item page-next">
               <a href="components.html">
-                <p class="page-item-meta">Next</p>
+                <p class="page-item-subtitle">Next</p>
                 <h4 class="page-item-title">Components</h4>
               </a>
             </li>