Merge pull request #402 from picturepan2/0.5.1 v0.5.1

0.5.1

1 files changed, 26 insertions, 32 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 0d0679e..5488d8b 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -7,10 +7,12 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="author" content="https://github.com/picturepan2/">
   <title>Elements - Spectre.css CSS Framework</title>
-  <link rel="stylesheet" href="dist/spectre.css">
-  <link rel="stylesheet" href="dist/spectre-icons.css">
-  <link rel="stylesheet" href="dist/spectre-exp.css">
-  <link rel="stylesheet" href="css/docs.css">
+  <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico">
+  <link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png">
+  <link rel="stylesheet" href="dist/spectre.min.css">
+  <link rel="stylesheet" href="dist/spectre-icons.min.css">
+  <link rel="stylesheet" href="dist/spectre-exp.min.css">
+  <link rel="stylesheet" href="dist/docs.min.css">
 </head>
 <body>
   <div class="docs-container off-canvas off-canvas-sidebar-show">
@@ -119,9 +121,6 @@
                   <a href="components.html">Accordions</a>
                 </li>
                 <li class="menu-item">
-                  <a href="components.html#autocomplete">Autocomplete</a>
-                </li>
-                <li class="menu-item">
                   <a href="components.html#avatars">Avatars</a>
                 </li>
                 <li class="menu-item">
@@ -220,7 +219,10 @@
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="experimentals.html">Calendars</a>
+                  <a href="experimentals.html">Autocomplete</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#calendars">Calendars</a>
                 </li>
                 <li class="menu-item">
                   <a href="experimentals.html#carousels">Carousels</a>
@@ -544,15 +546,7 @@
 
       <div class="container">
         <div class="docs-ad docs-ad-sidebar">
-          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-          <!-- github-vertical-sm -->
-          <ins class="adsbygoogle"
-              style="display:inline-block;width:120px;height:240px"
-              data-ad-client="ca-pub-2225124559530218"
-              data-ad-slot="5087273059"></ins>
-          <script>
-          (adsbygoogle = window.adsbygoogle || []).push({});
-          </script>
+          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script>
         </div>
       </div>
 
@@ -1030,32 +1024,32 @@
 
         <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4>
         <div class="docs-note">
-          <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p>
+          <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container. And add the <code>col-[1-12]</code> and <code>col-xs/sm/lg/xl-[1-12]</code> class to the child elements for responsive form row layout. </p>
         </div>
         <div class="columns">
           <div class="column col-9 col-sm-12">
             <form class="form-horizontal" action="#forms">
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label" for="input-example-4">Name</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <input class="form-input" type="text" id="input-example-4" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label" for="input-example-5">Email</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <input class="form-input" type="email" id="input-example-5" placeholder="Email">
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label">Gender</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <label class="form-radio">
                     <input type="radio" name="gender">
                     <i class="form-icon"></i> Male
@@ -1067,10 +1061,10 @@
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label">Source</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <select class="form-select" multiple>
                     <option>Slack</option>
                     <option>Skype</option>
@@ -1079,7 +1073,7 @@
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-9 col-ml-auto">
+                <div class="col-9 col-sm-12 col-ml-auto">
                   <label class="form-switch">
                     <input type="checkbox">
                     <i class="form-icon"></i> Send me emails with news and tips
@@ -1087,15 +1081,15 @@
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-3">
+                <div class="col-3 col-sm-12">
                   <label class="form-label" for="input-example-6">Message</label>
                 </div>
-                <div class="col-9">
+                <div class="col-9 col-sm-12">
                   <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
                 </div>
               </div>
               <div class="form-group">
-                <div class="col-9 col-ml-auto">
+                <div class="col-9 col-sm-12 col-ml-auto">
                   <label class="form-checkbox">
                     <input type="checkbox">
                     <i class="form-icon"></i> Remember me
@@ -1109,10 +1103,10 @@
 <!-- forms -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">&quot;form-horizontal&quot;</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3 col-sm-12&quot;</span>&gt;
       &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9 col-sm-12&quot;</span>&gt;
       &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">/div</span>&gt;