From c67deb4708c44178c3a0ea46d8279da1672c32b7 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 5 Jun 2018 21:31:02 +0800
Subject: Update docs demo margin

---
 docs/elements.html | 96 ++++++++++++++++++++++++------------------------------
 1 file changed, 42 insertions(+), 54 deletions(-)

(limited to 'docs/elements.html')

diff --git a/docs/elements.html b/docs/elements.html
index 7038e74..0a96949 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -133,7 +133,7 @@
             <h3 class="s-title"><a class="anchor" href="#typography" aria-hidden="true">#</a>Typography</h3>
             <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
             <h4 class="s-subtitle" id="typography-headings"><a class="anchor" href="#typography-headings" aria-hidden="true">#</a>Headings</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <h1>H1 Heading <small class="label">40px</small></h1>
               </div>
@@ -166,7 +166,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="typography-semantic-text"><a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a>Semantic text elements</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12"><abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code></div>
               <div class="column col-6 col-xs-12"><strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code></div>
               <div class="column col-6 col-xs-12">
@@ -260,7 +260,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="typography-lists"><a class="anchor" href="#typography-lists" aria-hidden="true">#</a>Lists</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4 col-xs-12">
                 <ul class="list">
                   <li>list item 1</li>
@@ -320,7 +320,7 @@
           <div class="container" id="tables">
             <h3 class="s-title"><a class="anchor" href="#tables" aria-hidden="true">#</a>Tables</h3>
             <p>Tables include default styles for tables and data sets.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <table class="table table-striped">
                   <thead>
@@ -381,7 +381,7 @@
           <div class="container" id="buttons">
             <h3 class="s-title"><a class="anchor" href="#buttons" aria-hidden="true">#</a>Buttons</h3>
             <p>Buttons include simple button styles for actions in different types and sizes.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <button class="btn">default button</button>
                 <button class="btn btn-primary">primary button</button>
@@ -396,7 +396,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>link button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="buttons-colors"><a class="anchor" href="#buttons-colors" aria-hidden="true">#</a>Button colors</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <button class="btn btn-success">success button</button>
                 <button class="btn btn-error">error button</button>
@@ -409,7 +409,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-error"</span>&gt;</span>error button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="buttons-sizes"><a class="anchor" href="#buttons-sizes" aria-hidden="true">#</a>Button sizes</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button>
                 <button class="btn btn-primary btn-lg">large button</button>
@@ -436,7 +436,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> small<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 </code></pre>
             <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-xs-12">
                 <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
                 <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
@@ -453,7 +453,7 @@
 </code></pre>
             <h4 class="s-subtitle" id="buttons-states"><a class="anchor" href="#buttons-states" aria-hidden="true">#</a>Button states</h4>
             <p>Add the <code>active</code> class for active button state style.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <button class="btn active">default active</button>
                 <button class="btn btn-primary active">primary active</button>
@@ -461,7 +461,7 @@
               </div>
             </div>
             <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <button class="btn disabled" tabindex="-1">default disabled</button>
                 <button class="btn btn-primary" disabled="" tabindex="-1">primary disabled</button>
@@ -473,7 +473,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 </code></pre>
             <p>A button with the <code>loading</code> class can show loading indicator.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <button class="btn loading">default button</button>
                 <button class="btn btn-primary loading">primary button</button>
@@ -485,31 +485,29 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary loading"</span>&gt;</span>primary button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="buttons-groups"><a class="anchor" href="#buttons-groups" aria-hidden="true">#</a>Button groups</h4>
-            <div class="columns">
-              <div class="column col-md-12">
+            <div class="docs-demo columns">
+              <div class="column col-6 col-md-12">
                 <div class="btn-group">
                   <button class="btn">first button</button>
                   <button class="btn">second button</button>
                   <button class="btn">third button</button>
                 </div>
               </div>
-              <div class="column col-md-12">
+              <div class="column col-6 col-md-12">
                 <div class="btn-group btn-group-block">
                   <button class="btn btn-primary">first button</button>
                   <button class="btn btn-primary">second button</button>
                   <button class="btn btn-primary">third button</button>
                 </div>
               </div>
-            </div>
-            <div class="columns">
-              <div class="column col-md-12">
+              <div class="column col-6 col-md-12">
                 <div class="btn-group">
                   <button class="btn btn-sm active">first button</button>
                   <button class="btn btn-sm">second button</button>
                   <button class="btn btn-sm">third button</button>
                 </div>
               </div>
-              <div class="column col-md-12">
+              <div class="column col-6 col-md-12">
                 <div class="btn-group btn-group-block">
                   <button class="btn btn-primary btn-sm active">first button</button>
                   <button class="btn btn-primary btn-sm">second button</button>
@@ -529,7 +527,7 @@
           <div class="container" id="forms">
             <h3 class="s-title"><a class="anchor" href="#forms" aria-hidden="true">#</a>Forms</h3>
             <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <div class="form-group">
                   <label class="form-label" for="input-example-1">Name</label>
@@ -547,7 +545,7 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <div class="form-group">
                   <label class="form-label" for="input-example-3">Message</label>
@@ -561,7 +559,7 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <div class="form-group">
                   <select class="form-select">
@@ -591,7 +589,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <form>
                   <div class="form-group">
@@ -619,7 +617,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <div class="form-group">
                   <label class="form-switch">
@@ -641,7 +639,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <div class="form-group">
                   <label class="form-checkbox">
@@ -668,7 +666,7 @@
             <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 class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
                 <form class="form-horizontal" action="#forms">
                   <div class="form-group">
@@ -751,7 +749,7 @@
 </code></pre>
             <h4 class="s-subtitle" id="forms-sizes"><a class="anchor" href="#forms-sizes" aria-hidden="true">#</a>Form sizes</h4>
             <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4 col-xs-12">
                 <label class="form-label label-sm">Label</label>
               </div>
@@ -766,8 +764,6 @@
                   <option>Hipchat</option>
                 </select>
               </div>
-            </div>
-            <div class="columns">
               <div class="column col-4 col-xs-12">
                 <label class="form-label label-lg">Label</label>
               </div>
@@ -789,7 +785,7 @@
             <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element.
               And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4 col-xs-12">
                 <div class="has-icon-left">
                   <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
@@ -805,8 +801,6 @@
                   <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
                 </div>
               </div>
-            </div>
-            <div class="columns">
               <div class="column col-4 col-xs-12">
                 <div class="has-icon-right">
                   <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
@@ -830,7 +824,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
             <p>You can use the <code>loading</code> class for loading or posting state.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4 col-xs-12">
                 <div class="has-icon-right">
                   <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon loading"></i>
@@ -854,7 +848,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="forms-input"><a class="anchor" href="#forms-input" aria-hidden="true">#</a>Input types</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
                 <form class="form-horizontal" action="#forms">
                   <div class="form-group">
@@ -933,8 +927,8 @@
               </div>
             </div>
             <h4 class="s-subtitle" id="forms-input-groups"><a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a>Input groups</h4>
-            <div class="columns">
-              <div class="column col-xs-12">
+            <div class="docs-demo columns">
+              <div class="column col-6 col-xs-12">
                 <div class="input-group">
                   <input class="form-input input-sm" type="text" placeholder="username">
                   <select class="form-select select-sm">
@@ -944,15 +938,13 @@
                   </select>
                 </div>
               </div>
-              <div class="column col-xs-12">
+              <div class="column col-6 col-xs-12">
                 <div class="input-group"><span class="input-group-addon addon-sm">slack.com/</span>
                   <input class="form-input input-sm" type="text" placeholder="site name">
                   <button class="btn btn-primary input-group-btn btn-sm">Submit</button>
                 </div>
               </div>
-            </div>
-            <div class="columns">
-              <div class="column col-xs-12">
+              <div class="column col-6 col-xs-12">
                 <div class="input-group">
                   <input class="form-input" type="text" placeholder="username">
                   <select class="form-select">
@@ -962,15 +954,13 @@
                   </select>
                 </div>
               </div>
-              <div class="column col-xs-12">
+              <div class="column col-6 col-xs-12">
                 <div class="input-group"><span class="input-group-addon">slack.com/</span>
                   <input class="form-input" type="text" placeholder="site name">
                   <button class="btn btn-primary input-group-btn">Submit</button>
                 </div>
               </div>
-            </div>
-            <div class="columns">
-              <div class="column col-xs-12">
+              <div class="column col-6 col-xs-12">
                 <div class="input-group">
                   <label class="form-switch">
                     <input type="checkbox"><i class="form-icon"></i>
@@ -978,7 +968,7 @@
                   <input class="form-input" type="text" placeholder="name">
                 </div>
               </div>
-              <div class="column col-xs-12">
+              <div class="column col-6 col-xs-12">
                 <div class="input-group">
                   <label class="form-checkbox">
                     <input type="checkbox"><i class="form-icon"></i>
@@ -986,9 +976,7 @@
                   <input class="form-input" type="text" placeholder="name">
                 </div>
               </div>
-            </div>
-            <div class="columns">
-              <div class="column col-xs-12">
+              <div class="column col-6 col-xs-12">
                 <div class="input-group">
                   <input class="form-input input-lg" type="text" placeholder="username">
                   <select class="form-select select-lg">
@@ -998,7 +986,7 @@
                   </select>
                 </div>
               </div>
-              <div class="column col-xs-12">
+              <div class="column col-6 col-xs-12">
                 <div class="input-group"><span class="input-group-addon addon-lg">slack.com/</span>
                   <input class="form-input input-lg" type="text" placeholder="site name">
                   <button class="btn btn-primary input-group-btn btn-lg">Submit</button>
@@ -1031,7 +1019,7 @@
             <p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements.
               Use the <code>form-input-hint</code> class to provide form validation success and error messages.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
                 <fieldset>
                   <legend>Input</legend>
@@ -1122,7 +1110,7 @@
             <h4 class="s-subtitle" id="forms-disabled"><a class="anchor" href="#forms-disabled" aria-hidden="true">#</a>Form disabled styles</h4>
             <p>
                Add the <code>disabled</code> attribute to the element or &lt;fieldset&gt; for a disabled form components style.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <form action="#forms">
                   <fieldset disabled="">
@@ -1220,7 +1208,7 @@
             <p>Add the <code>label</code> class to &lt;span&gt; or &lt;small&gt; elements.
               You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div>
             </div>
             <p>Add the <code>label-rounded</code> class to have rounded labels.</p>
@@ -1260,7 +1248,7 @@
             <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to &lt;img&gt; or &lt;video&gt; elements. The media will crop itself to fit inside the element (and you don't need another container).
               This feature can replace the classic background image trick. Microsoft Edge support <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">is shipped</a>  with Build Number 16299+.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <figure class="figure"><img class="img-fit-contain rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
                   <figcaption class="figure-caption text-center">img-fit-contain</figcaption>
@@ -1283,7 +1271,7 @@
               And the included class <code>figure-caption</code> will provide basic style for caption.
               Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <figure class="figure"><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
                   <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
@@ -1296,7 +1284,7 @@
               The ratio is 16:9 by default.
               You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="video-responsive">
                   <iframe width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen=""></iframe>
-- 
cgit v1.3.1-23-gd82d