CHG: Reuse more codes

1 files changed, 9 insertions, 7 deletions

diff --git a/docs/components.html b/docs/components.html
index 46fc50a..b175ed8 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -104,7 +104,7 @@
             <div class="column col-9 col-xs-12">
               <div class="form-group">
                 <div class="form-autocomplete">
-                  <div class="form-autocomplete-input">
+                  <div class="form-autocomplete-input form-input">
                     <div class="chip">
                       Bruce Banner
                       <button class="btn btn-clear"></button>
@@ -135,7 +135,7 @@
             <div class="column col-9 col-xs-12">
               <div class="form-group">
                 <div class="form-autocomplete">
-                  <div class="form-autocomplete-input is-focused">
+                  <div class="form-autocomplete-input form-input is-focused">
                     <div class="chip">
                       Bruce Banner
                       <button class="btn btn-clear"></button>
@@ -183,7 +183,7 @@
 <!-- autocomplete example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete&quot;</span>&gt;
   <span class="com">&lt;!-- autocomplete input container --&gt;</span>
-  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-input&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-input form-input&quot;</span>&gt;
     <span class="com">&lt;!-- autocomplete chips --&gt;</span>
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
       &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span> /&gt;
@@ -378,19 +378,21 @@
             <p><strong>Bars</strong> represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code> and <code>meter</code> elements.</p>
           </section>
           <div class="columns">
-            <div class="column col-6 col-xs-12">
+            <div class="column col-8 col-xs-12">
               <div class="bar bar-sm">
                 <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
               </div>
             </div>
-            <div class="column col-6 col-xs-12">
+          </div>
+          <div class="columns">
+            <div class="column col-8 col-xs-12">
               <div class="bar">
                 <div class="bar-item tooltip" data-tooltip="50%" style="width:50%;"></div>
               </div>
             </div>
           </div>
           <div class="columns">
-            <div class="column col-12 col-xs-12">
+            <div class="column col-8 col-xs-12">
               <div class="bar">
                 <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
                 <div class="bar-item tooltip" data-tooltip="15%" style="width:15%;background:#818bd5;">15%</div>
@@ -729,7 +731,7 @@
         <section id="menus" class="container">
           <header class="text-center"><h3>Menus</h3></header>
           <section class="notes">
-            <p>The <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p>
+            <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p>
           </section>
           <div class="columns">
             <div class="column col-xs-12">