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/components.html               | 70 +++++++++++++--------------
 docs/dist/docs.css                 |  9 ++--
 docs/dist/docs.min.css             |  2 +-
 docs/elements.html                 | 96 +++++++++++++++++---------------------
 docs/experimentals.html            | 26 +++++------
 docs/layout.html                   | 18 +++----
 docs/src/contents/accordions.pug   |  2 +-
 docs/src/contents/autocomplete.pug |  4 +-
 docs/src/contents/avatars.pug      |  6 +--
 docs/src/contents/badges.pug       |  4 +-
 docs/src/contents/bars.pug         |  7 +--
 docs/src/contents/breadcrumbs.pug  |  2 +-
 docs/src/contents/buttons.pug      | 25 +++++-----
 docs/src/contents/calendars.pug    |  4 +-
 docs/src/contents/cards.pug        |  2 +-
 docs/src/contents/carousels.pug    |  2 +-
 docs/src/contents/chips.pug        |  2 +-
 docs/src/contents/colors.pug       |  6 +--
 docs/src/contents/comparison.pug   |  2 +-
 docs/src/contents/cursor.pug       |  2 +-
 docs/src/contents/divider.pug      |  8 ++--
 docs/src/contents/empty.pug        |  2 +-
 docs/src/contents/filters.pug      |  2 +-
 docs/src/contents/forms.pug        | 49 +++++++++----------
 docs/src/contents/grid.pug         |  8 ++--
 docs/src/contents/labels.pug       |  2 +-
 docs/src/contents/loading.pug      |  4 +-
 docs/src/contents/media.pug        |  6 +--
 docs/src/contents/menu.pug         |  6 +--
 docs/src/contents/meters.pug       |  2 +-
 docs/src/contents/modals.pug       |  6 +--
 docs/src/contents/nav.pug          |  2 +-
 docs/src/contents/navbar.pug       |  4 +-
 docs/src/contents/off-canvas.pug   |  2 +-
 docs/src/contents/pagination.pug   |  4 +-
 docs/src/contents/panels.pug       |  2 +-
 docs/src/contents/parallax.pug     |  2 +-
 docs/src/contents/popovers.pug     |  3 +-
 docs/src/contents/progress.pug     |  2 +-
 docs/src/contents/responsive.pug   |  6 +--
 docs/src/contents/shapes.pug       |  2 +-
 docs/src/contents/sliders.pug      |  2 +-
 docs/src/contents/steps.pug        |  2 +-
 docs/src/contents/tables.pug       |  2 +-
 docs/src/contents/tabs.pug         |  6 +--
 docs/src/contents/tiles.pug        |  4 +-
 docs/src/contents/timelines.pug    |  2 +-
 docs/src/contents/toasts.pug       |  4 +-
 docs/src/contents/tooltips.pug     |  2 +-
 docs/src/contents/typography.pug   |  6 +--
 docs/src/scss/docs.scss            |  9 ++--
 docs/utilities.html                | 20 ++++----
 52 files changed, 222 insertions(+), 252 deletions(-)

(limited to 'docs')

diff --git a/docs/components.html b/docs/components.html
index 4185433..f30a70e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -132,7 +132,7 @@
           <div class="container" id="accordions">
             <h3 class="s-title"><a class="anchor" href="#accordions" aria-hidden="true">#</a>Accordions</h3>
             <p>Accordions are used to toggle sections of content.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-md-12">
                 <div class="accordion">
                   <input id="accordion-1" type="radio" name="accordion-radio" hidden="" checked="">
@@ -239,7 +239,7 @@
           <div class="container" id="avatars">
             <h3 class="s-title"><a class="anchor" href="#avatars" aria-hidden="true">#</a>Avatars</h3>
             <p>Avatars are user profile pictures. </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <figure class="avatar avatar-xl"><img src="img/avatar-1.png" alt="Avatar XL"></figure>
                 <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar LG"></figure>
@@ -264,7 +264,7 @@
               Add the <code>avatar</code> class and avatar size class to &lt;div&gt;  element.
               The <code>data-initial</code> attribute is the name appear inside the avatar.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <figure class="avatar avatar-xl"><img src="img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-2.png" alt="Avatar"></figure>
                 <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-3.png" alt="Avatar"></figure>
@@ -290,7 +290,7 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
   </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <figure class="avatar avatar-xl" data-initial="YZ"><i class="avatar-presence online"></i></figure>
                 <figure class="avatar avatar-lg" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
@@ -312,7 +312,7 @@
           <div class="container" id="badges">
             <h3 class="s-title"><a class="anchor" href="#badges" aria-hidden="true">#</a>Badges</h3>
             <p>Badges are often used as unread number indicators.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-xs-6"><span class="badge" data-badge="">Notifications</span></div>
               <div class="column col-3 col-xs-6"><span class="badge" data-badge="8">Notifications</span></div>
               <div class="column col-3 col-xs-6"><span class="badge" data-badge="88">Notifications</span></div>
@@ -323,7 +323,7 @@
               The badge will appear in the top-right direction of the element.
             </p>
             <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-sm-12">
                 <button class="btn badge" data-badge="">Button</button>
                 <button class="btn badge" data-badge="8">Button</button>
@@ -361,21 +361,17 @@
               Bars represent the progress of a task or the value within the known range.
               Bars are custom components for displaying HTML5 &lt;progress&gt;, &lt;meter&gt; and input range elements.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <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>
-            <div class="columns">
               <div class="column col-8 col-xs-12">
                 <div class="bar">
                   <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div>
                 </div>
               </div>
-            </div>
-            <div class="columns">
               <div class="column col-8 col-xs-12">
                 <div class="bar">
                   <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div>
@@ -403,7 +399,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="bars-slider"><a class="anchor" href="#bars-slider" aria-hidden="true">#</a>Slider bars</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-8 col-xs-12">
                 <div class="bar bar-slider">
                   <div class="bar-item" role="progressbar" style="width:50%;">
@@ -411,8 +407,6 @@
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="columns">
               <div class="column col-8 col-xs-12">
                 <div class="bar bar-slider">
                   <div class="bar-item" role="progressbar" style="width:15%;">
@@ -449,7 +443,7 @@
           <div class="container" id="breadcrumbs">
             <h3 class="s-title"><a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a>Breadcrumbs</h3>
             <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <ul class="breadcrumb">
                   <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
@@ -489,7 +483,7 @@
           <div class="container" id="cards">
             <h3 class="s-title"><a class="anchor" href="#cards" aria-hidden="true">#</a>Cards</h3>
             <p>Cards are flexible content containers.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <div class="card">
                   <div class="card-image"><img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan"></div>
@@ -581,7 +575,7 @@
           <div class="container" id="chips">
             <h3 class="s-title"><a class="anchor" href="#chips" aria-hidden="true">#</a>Chips</h3>
             <p>Chips are complex entities in small blocks. </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div>
               <div class="column col-12">
                 <div class="chip">
@@ -610,7 +604,7 @@
           <div class="container" id="empty">
             <h3 class="s-title"><a class="anchor" href="#empty" aria-hidden="true">#</a>Empty states</h3>
             <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="empty">
                   <div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div>
@@ -665,7 +659,7 @@
           <div class="container" id="menu">
             <h3 class="s-title"><a class="anchor" href="#menu" aria-hidden="true">#</a>Menu</h3>
             <p>Menus are vertical list of links or buttons for actions and navigation.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4 col-xs-12">
                 <ul class="menu">
                   <li class="menu-item">
@@ -750,7 +744,7 @@
   </code></pre>
             <h4 class="s-subtitle" id="menu-dropdown"><a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a>Dropdown menu</h4>
             <p>The dropdown is a combination of buttons and menus.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-xs-12">
                 <div class="dropdown">
                   <div class="btn-group"><a class="btn btn-primary">dropdown button</a><a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a>
@@ -778,7 +772,7 @@
               You also need to add <code>tabindex</code> to make the buttons focusable.
             </p>
             <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-xs-12 text-right">
                 <div class="dropdown dropdown-right"><a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
                   <ul class="menu text-left">
@@ -821,7 +815,7 @@
           <div class="container" id="modals">
             <h3 class="s-title"><a class="anchor" href="#modals" aria-hidden="true">#</a>Modals</h3>
             <p>Modals are flexible dialog prompts.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a>
                 <div class="modal" id="example-modal-1"><a class="modal-overlay" href="#modals" aria-label="Close"></a>
                   <div class="modal-container" role="document">
@@ -876,7 +870,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="modals-sizes"><a class="anchor" href="#modals-sizes" aria-hidden="true">#</a>Modal sizes</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12"><a class="btn btn-primary" href="#example-modal-2">Open small size Modal</a>
                 <div class="modal modal-sm" id="example-modal-2"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
                   <div class="modal-container" role="document">
@@ -912,7 +906,7 @@
             <p>Use the <code>modal-sm</code> class for a smaller modal dialog.
               The container max width is <code>320px</code>.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column"><a class="btn btn-primary" href="#example-modal-3">Open large size Modal</a>
                 <div class="modal modal-lg" id="example-modal-3"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
                   <div class="modal-container" role="document">
@@ -952,7 +946,7 @@
           </div>
           <div class="container" id="nav">
             <h3 class="s-title"><a class="anchor" href="#nav" aria-hidden="true">#</a>Nav</h3>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <ul class="nav">
                   <li class="nav-item"><a href="#nav">Elements</a></li>
@@ -1004,7 +998,7 @@
           </div>
           <div class="container" id="pagination">
             <h3 class="s-title"><a class="anchor" href="#pagination" aria-hidden="true">#</a>Pagination</h3>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-xs-12">
                 <ul class="pagination">
                   <li class="page-item"><a href="#pagination">Prev</a></li>
@@ -1059,7 +1053,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <ul class="pagination">
                   <li class="page-item page-prev"><a href="#pagination">
@@ -1090,7 +1084,7 @@
           <div class="container" id="panels">
             <h3 class="s-title"><a class="anchor" href="#panels" aria-hidden="true">#</a>Panels</h3>
             <p>Panels are flexible view container with auto-expand content section.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <div class="panel">
                   <div class="panel-header text-center">
@@ -1222,7 +1216,7 @@
           <div class="container" id="popovers">
             <h3 class="s-title"><a class="anchor" href="#popovers" aria-hidden="true">#</a>Popovers</h3>
             <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-sm-6">
                 <div class="popover"><a class="btn btn-primary" href="#popovers">top popover</a>
                   <div class="popover-container">
@@ -1315,7 +1309,7 @@
           <div class="container" id="steps">
             <h3 class="s-title"><a class="anchor" href="#steps" aria-hidden="true">#</a>Steps</h3>
             <p>Steps are progress indicators of a sequence of task steps.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <ul class="step">
                   <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip"></a></li>
@@ -1356,7 +1350,7 @@
           <div class="container" id="tabs">
             <h3 class="s-title"><a class="anchor" href="#tabs" aria-hidden="true">#</a>Tabs</h3>
             <p>Tabs enable quick switch between different views.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-sm-12">
                 <ul class="tab">
                   <li class="tab-item active"><a href="#tabs">Music</a></li>
@@ -1393,7 +1387,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-sm-12">
                 <ul class="tab">
                   <li class="tab-item active"><a class="badge" href="#tabs" data-badge="999">Music</a></li>
@@ -1418,7 +1412,7 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <ul class="tab">
                   <li class="tab-item active"><a href="#tabs">Music<span class="btn btn-clear"></span></a></li>
@@ -1455,7 +1449,7 @@
           <div class="container" id="tiles">
             <h3 class="s-title"><a class="anchor" href="#tiles" aria-hidden="true">#</a>Tiles</h3>
             <p>Tiles are repeatable or embeddable information blocks.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
                 <div class="tile">
                   <div class="tile-icon">
@@ -1512,7 +1506,7 @@
             <p>Add the <code>tile-centered</code> class to the container <code>tile</code>.
               The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-md-9 col-xs-12">
                 <div class="tile tile-centered">
                   <div class="tile-icon">
@@ -1548,7 +1542,7 @@
           <div class="container" id="toasts">
             <h3 class="s-title"><a class="anchor" href="#toasts" aria-hidden="true">#</a>Toasts</h3>
             <p>Toasts are used to show alert or information to users.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
                 <div class="toast">
                   <button class="btn btn-clear float-right"></button>
@@ -1569,7 +1563,7 @@
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 <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-sm-12">
                 <div class="toast toast-success">
                   <button class="btn btn-clear float-right"></button>Toast success
@@ -1595,7 +1589,7 @@
           <div class="container" id="tooltips">
             <h3 class="s-title"><a class="anchor" href="#tooltips" aria-hidden="true">#</a>Tooltips</h3>
             <p>Tooltips provide context information labels that appear on hover and focus.</p>
-            <div class="columns text-center">
+            <div class="docs-demo columns text-center">
               <div class="column col-xs-12">
                 <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button>
               </div>
diff --git a/docs/dist/docs.css b/docs/dist/docs.css
index 56db536..68d17bc 100644
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
@@ -144,8 +144,9 @@
   margin-top: .4rem;
 }
 
-.docs-content .docs-note {
-  margin: 1.5rem 0;
+.docs-content .docs-demo {
+  padding-bottom: 1rem;
+  padding-top: 1rem;
 }
 
 .docs-content .docs-ad {
@@ -184,10 +185,6 @@
   font-size: .7rem;
 }
 
-.docs-content .columns {
-  margin-bottom: 1rem;
-}
-
 .docs-content .column {
   padding: .4rem;
 }
diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css
index 1578bf3..47fe08d 100644
--- a/docs/dist/docs.min.css
+++ b/docs/dist/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-note{margin:1.5rem 0}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .columns{margin-bottom:1rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file
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>
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 978788d..0225fbd 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -140,7 +140,7 @@
           <div class="container" id="autocomplete">
             <h3 class="s-title"><a class="anchor" href="#autocomplete" aria-hidden="true">#</a>Autocomplete</h3>
             <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-xs-12">
                 <div class="form-group">
                   <div class="form-autocomplete">
@@ -194,7 +194,7 @@
               Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
               The autocomplete HTML structure is exampled below.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-xs-12">
                 <div class="form-group">
                   <div class="form-autocomplete autocomplete-oneline">
@@ -246,7 +246,7 @@
           <div class="container" id="calendars">
             <h3 class="s-title"><a class="anchor" href="#calendars" aria-hidden="true">#</a>Calendars</h3>
             <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4 col-md-12">
                 <div class="calendar">
                   <div class="calendar-nav navbar">
@@ -376,7 +376,7 @@
               </div>
             </div>
             <h4 class="s-subtitle" id="calendars-sizes"><a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a>Calendars sizes</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="calendar calendar-lg">
                   <div class="calendar-nav navbar">
@@ -514,7 +514,7 @@
           <div class="container" id="carousels">
             <h3 class="s-title"><a class="anchor" href="#carousels" aria-hidden="true">#</a>Carousels</h3>
             <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="carousel">
                   <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
@@ -552,7 +552,7 @@
           <div class="container" id="comparison">
             <h3 class="s-title"><a class="anchor" href="#comparison" aria-hidden="true">#</a>Comparison sliders</h3>
             <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="comparison-slider">
                   <figure class="comparison-before"><img class="rounded" src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper">
@@ -581,7 +581,7 @@
           <div class="container" id="filters">
             <h3 class="s-title"><a class="anchor" href="#filters" aria-hidden="true">#</a>Filters</h3>
             <p>Filters are CSS only content filters.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="filter">
                   <input class="filter-tag" id="tag-0" type="radio" name="filter-radio" hidden="" checked="">
@@ -726,7 +726,7 @@
           <div class="container" id="meters">
             <h3 class="s-title"><a class="anchor" href="#meters" aria-hidden="true">#</a>Meters</h3>
             <p>Meters represent the value within the known range.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-xs-12">
                 <meter class="meter" value="20" min="0" max="100"></meter>
               </div>
@@ -755,7 +755,7 @@
               By default, the off-canvas menu is collapsed whenever the window width is.
               But you can add the <code>off-canvas-sidebar-show</code> class to the <code>off-canvas</code> to make the sidebar expanded when the window width is larger than or equal to <strong>960px</strong>.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <div class="off-canvas off-canvas-sidebar-show"><a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-demo"><i class="icon icon-menu"></i></a>
                   <div class="off-canvas-sidebar flex-centered" id="sidebar-demo"><span>Sidebar</span></div><a class="off-canvas-overlay" href="#close"></a>
@@ -792,7 +792,7 @@
           <div class="container" id="parallax">
             <h3 class="s-title"><a class="anchor" href="#parallax" aria-hidden="true">#</a>Parallax</h3>
             <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-sm-12 col-8 col-mx-auto">
                 <div class="parallax">
                   <div class="parallax-top-left" tabindex="1"></div>
@@ -827,7 +827,7 @@
           <div class="container" id="progress">
             <h3 class="s-title"><a class="anchor" href="#progress" aria-hidden="true">#</a>Progress</h3>
             <p>The Progress indicates the progress completion of a task.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-xs-12">
                 <progress class="progress" value="75" max="100"></progress>
               </div>
@@ -850,7 +850,7 @@
             <p>You can add the class <code>tooltip</code> to have tooltip labels.
               If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
               </div>
@@ -866,7 +866,7 @@
           <div class="container" id="timelines">
             <h3 class="s-title"><a class="anchor" href="#timelines" aria-hidden="true">#</a>Timelines</h3>
             <p>Timelines are ordered sequences of activities.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
                 <div class="timeline">
                   <div class="timeline-item" id="timeline-example-1">
diff --git a/docs/layout.html b/docs/layout.html
index 65d8008..3c27fec 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -132,7 +132,7 @@
           <div class="container" id="grid">
             <h3 class="s-title"><a class="anchor" href="#grid" aria-hidden="true">#</a>Flexbox grid</h3>
             <p>Layout includes flexbox based responsive grid system with 12 columns.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <div class="bg-primary text-secondary docs-block"></div>
               </div>
@@ -205,7 +205,7 @@
               You can specific the width of each column by adding class <code>col-<1-12></code>.
             </p>
             <p>And you can add the <code>col-gapless</code> class to the <code>columns</code> to have gapless columns.</p>
-            <div class="columns col-gapless">
+            <div class="docs-demo columns col-gapless">
               <div class="column col-6">
                 <div class="bg-gray docs-block">col-6 (gapless)</div>
               </div>
@@ -220,7 +220,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
             <p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p>
-            <div class="columns col-oneline">
+            <div class="docs-demo columns col-oneline">
               <div class="column col-8">
                 <div class="bg-gray docs-block">col-8</div>
               </div>
@@ -294,7 +294,7 @@
 </code></pre>
             <h4 class="s-subtitle" id="grid-nesting"><a class="anchor" href="#grid-nesting" aria-hidden="true">#</a>Grid nesting</h4>
             <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6">
                 <div class="bg-gray">
                   <div class="docs-block">col-6</div>
@@ -328,7 +328,7 @@
           <div class="container" id="responsive">
             <h3 class="s-title"><a class="anchor" href="#responsive" aria-hidden="true">#</a>Responsive</h3>
             <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-10 col-lg-8 col-md-6 col-sm-4">
                 <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div>
               </div>
@@ -367,7 +367,7 @@
 </code></pre>
             <h4 class="s-subtitle" id="responsive-visibility"><a class="anchor" href="#responsive-visibility" aria-hidden="true">#</a>Responsive visibility</h4>
             <p>The responsive visibility utilities help show and hide elements on specific viewport sizes.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <table class="docs-table table table-striped text-center">
                   <thead>
@@ -483,7 +483,7 @@
               <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>.</li>
               <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>.</li>
             </ul>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <table class="docs-table table table-striped text-center">
                   <thead>
@@ -608,7 +608,7 @@
           <div class="container" id="navbar">
             <h3 class="s-title"><a class="anchor" href="#navbar" aria-hidden="true">#</a>Navbar</h3>
             <p>Navbar is a layout container that appears in the header of apps and websites.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <div class="navbar">
                   <div class="navbar-section"><a class="navbar-brand mr-2" href="#navbar">Spectre.css</a><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div>
@@ -640,7 +640,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span>
 </code></pre>
             <p>You can use <code>navbar-center</code> class to have a centered section.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="navbar">
                   <div class="navbar-section"><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="#navbar">Examples</a></div>
diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug
index 8914516..4e6838b 100644
--- a/docs/src/contents/accordions.pug
+++ b/docs/src/contents/accordions.pug
@@ -1,6 +1,6 @@
 p Accordions are used to toggle sections of content.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-md-12
     .accordion
       input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="")
diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug
index ca93c8a..5224c45 100644
--- a/docs/src/contents/autocomplete.pug
+++ b/docs/src/contents/autocomplete.pug
@@ -1,7 +1,7 @@
 p
   | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-xs-12
     .form-group
       .form-autocomplete
@@ -62,7 +62,7 @@ p
   | Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
   | The autocomplete HTML structure is exampled below.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-xs-12
     .form-group
       .form-autocomplete.autocomplete-oneline
diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug
index ff8f6c6..2e9886c 100644
--- a/docs/src/contents/avatars.pug
+++ b/docs/src/contents/avatars.pug
@@ -1,6 +1,6 @@
 p Avatars are user profile pictures. 
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     figure.avatar.avatar-xl
       img(src="img/avatar-1.png" alt="Avatar XL")
@@ -28,7 +28,7 @@ p
   | Add the #[code avatar] class and avatar size class to #{'<div>'}  element.
   | The #[code data-initial] attribute is the name appear inside the avatar.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     figure.avatar.avatar-xl
       img(src="img/avatar-1.png" alt="Avatar")
@@ -66,7 +66,7 @@ pre.code(data-lang='HTML')
         <img src="img/avatar-1.png" alt="...">
       </figure>
         
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     figure.avatar.avatar-xl(data-initial="YZ")
       i.avatar-presence.online
diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug
index 250fb39..40b42ea 100644
--- a/docs/src/contents/badges.pug
+++ b/docs/src/contents/badges.pug
@@ -1,6 +1,6 @@
 p Badges are often used as unread number indicators.
 
-.columns
+.docs-demo.columns
   .column.col-3.col-xs-6
     span.badge(data-badge="")
       | Notifications
@@ -21,7 +21,7 @@ p
 p
   | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.
 
-.columns
+.docs-demo.columns
   .column.col-sm-12
     button.btn.badge(data-badge="") Button
     button.btn.badge(data-badge="8") Button
diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug
index 58d7f3c..df0d17b 100644
--- a/docs/src/contents/bars.pug
+++ b/docs/src/contents/bars.pug
@@ -2,15 +2,13 @@ p
   | Bars represent the progress of a task or the value within the known range.
   | Bars are custom components for displaying HTML5 #{'<progress>'}, #{'<meter>'} and input range elements.
 
-.columns
+.docs-demo.columns
   .column.col-8.col-xs-12
     .bar.bar-sm
       .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
-.columns
   .column.col-8.col-xs-12
     .bar
       .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
-.columns
   .column.col-8.col-xs-12
     .bar
       .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
@@ -42,12 +40,11 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('bars-slider', 'Slider bars')
 
-.columns
+.docs-demo.columns
   .column.col-8.col-xs-12
     .bar.bar-slider
       .bar-item(role="progressbar" style="width:50%;")
         button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
-.columns
   .column.col-8.col-xs-12
     .bar.bar-slider
       .bar-item(role="progressbar" style="width:15%;")
diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug
index b1b66c5..ccde5e1 100644
--- a/docs/src/contents/breadcrumbs.pug
+++ b/docs/src/contents/breadcrumbs.pug
@@ -1,6 +1,6 @@
 p Breadcrumbs are used as navigational hierarchies to indicate current location.
 
-.columns
+.docs-demo.columns
   .column.col-12
     ul.breadcrumb
       li.breadcrumb-item
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
index 8f8dbb1..3fbf5da 100644
--- a/docs/src/contents/buttons.pug
+++ b/docs/src/contents/buttons.pug
@@ -1,6 +1,6 @@
 p Buttons include simple button styles for actions in different types and sizes.
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn default button
     button.btn.btn-primary primary button
@@ -19,7 +19,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('buttons-colors', 'Button colors')
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.btn-success success button
     button.btn.btn-error error button
@@ -38,7 +38,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('buttons-sizes', 'Button sizes')
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.btn-primary.btn-lg
       | large 
@@ -75,7 +75,7 @@ pre.code(data-lang='HTML')
 p
   | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB).
 
-.columns
+.docs-demo.columns
   .column.col-xs-12
     button.btn.btn-action.btn-primary.btn-lg
       i.icon.icon-menu
@@ -102,7 +102,7 @@ pre.code(data-lang='HTML')
 p
   | Add the #[code active] class for active button state style.
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.active default active
     button.btn.btn-primary.active primary active
@@ -111,7 +111,7 @@ p
 p
   | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.disabled(tabindex="-1") default disabled
     button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
@@ -127,7 +127,7 @@ pre.code(data-lang='HTML')
 p
   | A button with the #[code loading] class can show loading indicator.
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.loading default button
     button.btn.btn-primary.loading primary button
@@ -142,24 +142,23 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('buttons-groups', 'Button groups')
 
-.columns
-  .column.col-md-12
+.docs-demo.columns
+  .column.col-6.col-md-12
     .btn-group
       button.btn first button
       button.btn second button
       button.btn third button
-  .column.col-md-12
+  .column.col-6.col-md-12
     .btn-group.btn-group-block
       button.btn.btn-primary first button
       button.btn.btn-primary second button
       button.btn.btn-primary third button
-.columns
-  .column.col-md-12
+  .column.col-6.col-md-12
     .btn-group
       button.btn.btn-sm.active first button
       button.btn.btn-sm second button
       button.btn.btn-sm third button
-  .column.col-md-12
+  .column.col-6.col-md-12
     .btn-group.btn-group-block
       button.btn.btn-primary.btn-sm.active first button
       button.btn.btn-primary.btn-sm second button
diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug
index 0806844..60866dd 100644
--- a/docs/src/contents/calendars.pug
+++ b/docs/src/contents/calendars.pug
@@ -1,7 +1,7 @@
 p
   | Calendars are designed for date or date range picker and events display. It is made with flex layout.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-md-12
     .calendar
       .calendar-nav.navbar
@@ -93,7 +93,7 @@ p
 
 +docs-subheading('calendars-sizes', 'Calendars sizes')
 
-.columns
+.docs-demo.columns
   .column.col-12
     .calendar.calendar-lg
       .calendar-nav.navbar
diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug
index 4fb3671..be8d17e 100644
--- a/docs/src/contents/cards.pug
+++ b/docs/src/contents/cards.pug
@@ -1,6 +1,6 @@
 p Cards are flexible content containers.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .card
       .card-image
diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug
index 5ce41fa..c9c0045 100644
--- a/docs/src/contents/carousels.pug
+++ b/docs/src/contents/carousels.pug
@@ -1,6 +1,6 @@
 p Carousels are slideshows for cycling images. It is built in pure CSS.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .carousel
       input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="")
diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug
index ff02780..7ac2a25 100644
--- a/docs/src/contents/chips.pug
+++ b/docs/src/contents/chips.pug
@@ -1,6 +1,6 @@
 p Chips are complex entities in small blocks. 
 
-.columns
+.docs-demo.columns
   .column.col-12
     span.chip
       | Crime
diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug
index 84a86be..fad27c9 100644
--- a/docs/src/contents/colors.pug
+++ b/docs/src/contents/colors.pug
@@ -2,7 +2,7 @@ p Color utilities are used for changing colors for text, link and background.
 
 +docs-subheading('colors-text', 'Text colors')
 
-.columns
+.docs-demo.columns
   .column.col-12
     p
       span.text-primary primary color
@@ -30,7 +30,7 @@ pre.code(data-lang='HTML')
       <span class="text-warning">warning color</span>
       <span class="text-error">error color</span>
 
-.columns
+.docs-demo.columns
   .column.col-12
     p
       a.text-primary.p-1(href="#colors") primary link
@@ -60,7 +60,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('colors-background', 'Background colors')
 
-.columns
+.docs-demo.columns
   .column.col-12
     p
       span.bg-primary.p-1.rounded primary bg
diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug
index 5f6ce38..954981d 100644
--- a/docs/src/contents/comparison.pug
+++ b/docs/src/contents/comparison.pug
@@ -1,7 +1,7 @@
 p
   | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .comparison-slider
       figure.comparison-before
diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursor.pug
index df92600..ed290b8 100644
--- a/docs/src/contents/cursor.pug
+++ b/docs/src/contents/cursor.pug
@@ -1,6 +1,6 @@
 p Cursor utilities specify which mouse cursor to display when mouseover.
 
-.columns
+.docs-demo.columns
   .column.col-4
     .bg-gray.docs-block.c-hand c-hand
   .column.col-4
diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug
index e84ff11..92faa70 100644
--- a/docs/src/contents/divider.pug
+++ b/docs/src/contents/divider.pug
@@ -1,14 +1,16 @@
 p A Divider is used for separating elements.
 
-.columns
+.docs-demo.columns
   .column
     .divider
-.columns
+
+.docs-demo.columns
   .column
     | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
     .divider.text-center(data-content="OR")
     | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
-.columns
+
+.docs-demo.columns
   .column
     form
       .form-group
diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug
index 0ac70dc..880090d 100644
--- a/docs/src/contents/empty.pug
+++ b/docs/src/contents/empty.pug
@@ -1,7 +1,7 @@
 p
   | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .empty
       .empty-icon
diff --git a/docs/src/contents/filters.pug b/docs/src/contents/filters.pug
index 0c61640..e2e70b3 100644
--- a/docs/src/contents/filters.pug
+++ b/docs/src/contents/filters.pug
@@ -1,6 +1,6 @@
 p Filters are CSS only content filters.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .filter
       input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index bcfde1a..75c096e 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -1,7 +1,7 @@
 p
   | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       label.form-label(for="input-example-1") Name
@@ -19,7 +19,7 @@ pre.code(data-lang='HTML')
         <input class="form-input" type="text" id="input-example-1" placeholder="Name">
       </div>
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       label.form-label(for="input-example-3") Message
@@ -34,7 +34,7 @@ pre.code(data-lang='HTML')
         <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
       </div>
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       select.form-select
@@ -62,7 +62,7 @@ pre.code(data-lang='HTML')
         </select>
       </div>
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     form
       .form-group
@@ -92,7 +92,7 @@ pre.code(data-lang='HTML')
         </label>
       </div>
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       label.form-switch
@@ -116,7 +116,7 @@ pre.code(data-lang='HTML')
         </label>
       </div>
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       label.form-checkbox
@@ -149,7 +149,7 @@ p
   | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container.
   | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     form.form-horizontal(action="#forms")
       .form-group
@@ -220,7 +220,7 @@ pre.code(data-lang='HTML')
 p
   | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     label.form-label.label-sm Label
   .column.col-4.col-xs-12
@@ -231,7 +231,6 @@ p
       option Slack
       option Skype
       option Hipchat
-.columns
   .column.col-4.col-xs-12
     label.form-label.label-lg Label
   .column.col-4.col-xs-12
@@ -256,7 +255,7 @@ p
   | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element.
   | And add the icon with #[code form-icon] class next to the #{'<input>'}.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     .has-icon-left
       input.form-input.input-sm(type="text" placeholder="Name")
@@ -269,7 +268,6 @@ p
     .has-icon-left
       input.form-input.input-lg(type="text" placeholder="Name")
       i.form-icon.icon.icon-arrow-right
-.columns
   .column.col-4.col-xs-12
     .has-icon-right
       input.form-input.input-sm(type="text" placeholder="Name")
@@ -295,7 +293,7 @@ pre.code(data-lang='HTML')
 p
   | You can use the #[code loading] class for loading or posting state.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     .has-icon-right
       input.form-input.input-sm(type="text" placeholder="Name")
@@ -320,7 +318,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('forms-input', 'Input types')
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     form.form-horizontal(action="#forms")
       .form-group
@@ -371,54 +369,51 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('forms-input-groups', 'Input groups')
 
-.columns
-  .column.col-xs-12
+.docs-demo.columns
+  .column.col-6.col-xs-12
     .input-group
       input.form-input.input-sm(type="text" placeholder="username")
       select.form-select.select-sm
         option Slack
         option Skype
         option Hipchat
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       span.input-group-addon.addon-sm slack.com/
       input.form-input.input-sm(type="text" placeholder="site name")
       button.btn.btn-primary.input-group-btn.btn-sm Submit
-.columns
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       input.form-input(type="text" placeholder="username")
       select.form-select
         option Slack
         option Skype
         option Hipchat
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       span.input-group-addon slack.com/
       input.form-input(type="text" placeholder="site name")
       button.btn.btn-primary.input-group-btn Submit
-.columns
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       label.form-switch
         input(type="checkbox")
         i.form-icon
       input.form-input(type="text" placeholder="name")
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       label.form-checkbox
         input(type="checkbox")
         i.form-icon
       input.form-input(type="text" placeholder="name")
-.columns
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       input.form-input.input-lg(type="text" placeholder="username")
       select.form-select.select-lg
         option Slack
         option Skype
         option Hipchat
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       span.input-group-addon.addon-lg slack.com/
       input.form-input.input-lg(type="text" placeholder="site name")
@@ -456,7 +451,7 @@ p
   | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
   | Use the #[code form-input-hint] class to provide form validation success and error messages.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     fieldset
       legend Input
@@ -542,7 +537,7 @@ pre.code(data-lang='HTML')
 p 
   | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     form(action="#forms")
       fieldset(disabled="")
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
index d0172fb..0665262 100644
--- a/docs/src/contents/grid.pug
+++ b/docs/src/contents/grid.pug
@@ -1,7 +1,7 @@
 p
   | Layout includes flexbox based responsive grid system with 12 columns.
 
-.columns
+.docs-demo.columns
   .column
     .bg-primary.text-secondary.docs-block
   .column
@@ -59,7 +59,7 @@ p
 p
   | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
 
-.columns.col-gapless
+.docs-demo.columns.col-gapless
   .column.col-6
     .bg-gray.docs-block col-6 (gapless)
   .column.col-6
@@ -77,7 +77,7 @@ pre.code(data-lang='HTML')
 p
   | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row.
 
-.columns.col-oneline
+.docs-demo.columns.col-oneline
   .column.col-8
     .bg-gray.docs-block col-8
   .column.col-8
@@ -143,7 +143,7 @@ pre.code(data-lang='HTML')
 p
   | To nest grids, add the new #[code columns] and #[code column] structure within an existing column.
 
-.columns
+.docs-demo.columns
   .column.col-6
     .bg-gray
       .docs-block col-6
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
index 2d55412..cef66d2 100644
--- a/docs/src/contents/labels.pug
+++ b/docs/src/contents/labels.pug
@@ -13,7 +13,7 @@ p
   | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements.
   | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
 
-.columns
+.docs-demo.columns
   .column
     span.label.label-rounded.mr-1 default label
     span.label.label-rounded.label-primary primary label
diff --git a/docs/src/contents/loading.pug b/docs/src/contents/loading.pug
index c7643b2..38a1dad 100644
--- a/docs/src/contents/loading.pug
+++ b/docs/src/contents/loading.pug
@@ -2,14 +2,14 @@ p
   | Loading indicator is used for loading or updating.
   | You can add the #[code loading] class to a container for loading status.
 
-.columns
+.docs-demo.columns
   .column.col-12.text-center
     .loading
 
 p
   | Add the #[code loading-lg] class for large size.
 
-.columns
+.docs-demo.columns
   .column.col-12.text-center
     .loading.loading-lg
 
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
index fcb8d36..ee78fcc 100644
--- a/docs/src/contents/media.pug
+++ b/docs/src/contents/media.pug
@@ -15,7 +15,7 @@ p
   a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank") is shipped
   |   with Build Number 16299+.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     figure.figure
       img.img-fit-contain.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
@@ -41,7 +41,7 @@ p
   | And the included class #[code figure-caption] will provide basic style for caption.
   | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
 
-.columns
+.docs-demo.columns
   .column.col-12
     figure.figure
       img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
@@ -55,7 +55,7 @@ p
   | The ratio is 16:9 by default.
   | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .video-responsive
       iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug
index fe7825b..45ba53b 100644
--- a/docs/src/contents/menu.pug
+++ b/docs/src/contents/menu.pug
@@ -1,6 +1,6 @@
 p Menus are vertical list of links or buttons for actions and navigation.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     ul.menu
       li.menu-item
@@ -93,7 +93,7 @@ pre.code(data-lang='HTML')
 
 p The dropdown is a combination of buttons and menus.
 
-.columns
+.docs-demo.columns
   .column.col-xs-12
     .dropdown
       .btn-group
@@ -135,7 +135,7 @@ p
 p
   | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen.
 
-.columns
+.docs-demo.columns
   .column.col-xs-12.text-right
     .dropdown.dropdown-right
       a.btn.btn-primary.dropdown-toggle(tabindex="0")
diff --git a/docs/src/contents/meters.pug b/docs/src/contents/meters.pug
index dd6899c..8f96070 100644
--- a/docs/src/contents/meters.pug
+++ b/docs/src/contents/meters.pug
@@ -1,6 +1,6 @@
 p Meters represent the value within the known range.
 
-.columns
+.docs-demo.columns
   .column.col-3.col-xs-12
     meter.meter(value="20" min="0" max="100")
   .column.col-3.col-xs-12
diff --git a/docs/src/contents/modals.pug b/docs/src/contents/modals.pug
index 29580c9..54a6fcd 100644
--- a/docs/src/contents/modals.pug
+++ b/docs/src/contents/modals.pug
@@ -1,6 +1,6 @@
 p Modals are flexible dialog prompts.
 
-.columns
+.docs-demo.columns
   .column
     a.btn.btn-primary(href="#example-modal-1") Open Modal
     #example-modal-1.modal
@@ -62,7 +62,7 @@ pre.code(data-lang='HTML')
       
 +docs-subheading('modals-sizes', 'Modal sizes')
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     a.btn.btn-primary(href="#example-modal-2") Open small size Modal
     #example-modal-2.modal.modal-sm
@@ -95,7 +95,7 @@ p
   | Use the #[code modal-sm] class for a smaller modal dialog.
   | The container max width is #[code 320px].
 
-.columns
+.docs-demo.columns
   .column
     a.btn.btn-primary(href="#example-modal-3") Open large size Modal
     #example-modal-3.modal.modal-lg
diff --git a/docs/src/contents/nav.pug b/docs/src/contents/nav.pug
index 537b6d2..f40964a 100644
--- a/docs/src/contents/nav.pug
+++ b/docs/src/contents/nav.pug
@@ -1,4 +1,4 @@
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     ul.nav
       li.nav-item
diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug
index 21d13e4..fd4ac29 100644
--- a/docs/src/contents/navbar.pug
+++ b/docs/src/contents/navbar.pug
@@ -1,6 +1,6 @@
 p Navbar is a layout container that appears in the header of apps and websites.
 
-.columns
+.docs-demo.columns
   .column
     .navbar
       .navbar-section
@@ -36,7 +36,7 @@ pre.code(data-lang='HTML')
 p
   | You can use #[code navbar-center] class to have a centered section.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .navbar
       .navbar-section
diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug
index 7e45132..3e24f4c 100644
--- a/docs/src/contents/off-canvas.pug
+++ b/docs/src/contents/off-canvas.pug
@@ -4,7 +4,7 @@ p
   | By default, the off-canvas menu is collapsed whenever the window width is.
   | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px].
 
-.columns
+.docs-demo.columns
   .column
     .off-canvas.off-canvas-sidebar-show
       a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo")
diff --git a/docs/src/contents/pagination.pug b/docs/src/contents/pagination.pug
index 83a3f92..c90f6de 100644
--- a/docs/src/contents/pagination.pug
+++ b/docs/src/contents/pagination.pug
@@ -1,4 +1,4 @@
-.columns
+.docs-demo.columns
   .column.col-xs-12
     ul.pagination
       li.page-item
@@ -69,7 +69,7 @@ pre.code(data-lang='HTML')
         </li>
       </ul>
 
-.columns
+.docs-demo.columns
   .column.col-12
     ul.pagination
       li.page-item.page-prev
diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug
index 3651c81..fdf057e 100644
--- a/docs/src/contents/panels.pug
+++ b/docs/src/contents/panels.pug
@@ -1,6 +1,6 @@
 p Panels are flexible view container with auto-expand content section.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .panel
       .panel-header.text-center
diff --git a/docs/src/contents/parallax.pug b/docs/src/contents/parallax.pug
index 88d2c17..b448b43 100644
--- a/docs/src/contents/parallax.pug
+++ b/docs/src/contents/parallax.pug
@@ -1,7 +1,7 @@
 p
   | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
 
-.columns
+.docs-demo.columns
   .column.col-sm-12.col-8.col-mx-auto
     .parallax
       .parallax-top-left(tabindex="1")
diff --git a/docs/src/contents/popovers.pug b/docs/src/contents/popovers.pug
index ca81e54..b2c1b33 100644
--- a/docs/src/contents/popovers.pug
+++ b/docs/src/contents/popovers.pug
@@ -1,5 +1,6 @@
 p Popovers are small overlay content containers. Popovers component is built entirely in CSS.
-.columns
+
+.docs-demo.columns
   .column.col-3.col-sm-6
     .popover
       a.btn.btn-primary(href="#popovers")
diff --git a/docs/src/contents/progress.pug b/docs/src/contents/progress.pug
index 22a09c1..23af0af 100644
--- a/docs/src/contents/progress.pug
+++ b/docs/src/contents/progress.pug
@@ -1,6 +1,6 @@
 p The Progress indicates the progress completion of a task.
 
-.columns
+.docs-demo.columns
   .column.col-3.col-xs-12
     progress.progress(value="75" max="100")
   .column.col-3.col-xs-12
diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug
index 8898958..9737755 100644
--- a/docs/src/contents/responsive.pug
+++ b/docs/src/contents/responsive.pug
@@ -1,6 +1,6 @@
 p Spectre provides a neat responsive layout grid system and responsive visibility utilities.
 
-.columns
+.docs-demo.columns
   .column.col-10.col-lg-8.col-md-6.col-sm-4
     .bg-gray.docs-block
       | col-10 
@@ -68,7 +68,7 @@ pre.code(data-lang='HTML')
 
 p The responsive visibility utilities help show and hide elements on specific viewport sizes.
 
-.columns
+.docs-demo.columns
   .column.col-12
     table.docs-table.table.table-striped.text-center
       thead
@@ -156,7 +156,7 @@ ul
   li
     | #[code hide-xl] hides elements when the window width is smaller than or equal to #[strong 1280px].
 
-.columns
+.docs-demo.columns
   .column.col-12
     table.docs-table.table.table-striped.text-center
       thead
diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug
index fc07d4d..7abf513 100644
--- a/docs/src/contents/shapes.pug
+++ b/docs/src/contents/shapes.pug
@@ -1,6 +1,6 @@
 p Shape utilities are used for change element shapes.
 
-.columns
+.docs-demo.columns
   .column.col-6.text-center
     .bg-primary.text-light.docs-shape.rounded.centered
       | rounded
diff --git a/docs/src/contents/sliders.pug b/docs/src/contents/sliders.pug
index de3597b..754833c 100644
--- a/docs/src/contents/sliders.pug
+++ b/docs/src/contents/sliders.pug
@@ -3,7 +3,7 @@ p
   | You can add the class #[code tooltip] to have tooltip labels.
   | If no #[code data-tooltip] is set, the #[code value] will be used instead.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);")
   .column.col-6.col-xs-12
diff --git a/docs/src/contents/steps.pug b/docs/src/contents/steps.pug
index 5cf8b84..0109e02 100644
--- a/docs/src/contents/steps.pug
+++ b/docs/src/contents/steps.pug
@@ -1,6 +1,6 @@
 p Steps are progress indicators of a sequence of task steps.
 
-.columns
+.docs-demo.columns
   .column.col-12
     ul.step
       li.step-item
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
index 64e4ffd..4cb996c 100644
--- a/docs/src/contents/tables.pug
+++ b/docs/src/contents/tables.pug
@@ -1,6 +1,6 @@
 p Tables include default styles for tables and data sets.
 
-.columns
+.docs-demo.columns
   .column.col-12
     table.table.table-striped
       thead
diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug
index f89005d..fea99ad 100644
--- a/docs/src/contents/tabs.pug
+++ b/docs/src/contents/tabs.pug
@@ -1,6 +1,6 @@
 p Tabs enable quick switch between different views.
       
-.columns
+.docs-demo.columns
   .column.col-6.col-sm-12
     ul.tab
       li.tab-item.active
@@ -51,7 +51,7 @@ pre.code(data-lang='HTML')
         </li>
       </ul>
 
-.columns
+.docs-demo.columns
   .column.col-sm-12
     ul.tab
       li.tab-item.active
@@ -89,7 +89,7 @@ pre.code(data-lang='HTML')
         </li>
       </ul>
 
-.columns
+.docs-demo.columns
   .column.col-12
     ul.tab
       li.tab-item.active
diff --git a/docs/src/contents/tiles.pug b/docs/src/contents/tiles.pug
index e1e7379..cd8b994 100644
--- a/docs/src/contents/tiles.pug
+++ b/docs/src/contents/tiles.pug
@@ -1,6 +1,6 @@
 p Tiles are repeatable or embeddable information blocks.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     .tile
       .tile-icon
@@ -58,7 +58,7 @@ p
   | Add the #[code tile-centered] class to the container #[code tile].
   | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-md-9.col-xs-12
     .tile.tile-centered
       .tile-icon
diff --git a/docs/src/contents/timelines.pug b/docs/src/contents/timelines.pug
index 1badfdf..c654c9e 100644
--- a/docs/src/contents/timelines.pug
+++ b/docs/src/contents/timelines.pug
@@ -1,6 +1,6 @@
 p Timelines are ordered sequences of activities.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     .timeline
       #timeline-example-1.timeline-item
diff --git a/docs/src/contents/toasts.pug b/docs/src/contents/toasts.pug
index cf4c31a..e35e4dd 100644
--- a/docs/src/contents/toasts.pug
+++ b/docs/src/contents/toasts.pug
@@ -1,6 +1,6 @@
 p Toasts are used to show alert or information to users.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     .toast
       button.btn.btn-clear.float-right
@@ -23,7 +23,7 @@ pre.code(data-lang='HTML')
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       </div>
 
-.columns
+.docs-demo.columns
   .column.col-sm-12
     .toast.toast-success
       button.btn.btn-clear.float-right
diff --git a/docs/src/contents/tooltips.pug b/docs/src/contents/tooltips.pug
index bda259a..08906e6 100644
--- a/docs/src/contents/tooltips.pug
+++ b/docs/src/contents/tooltips.pug
@@ -1,6 +1,6 @@
 p Tooltips provide context information labels that appear on hover and focus.
 
-.columns.text-center
+.docs-demo.columns.text-center
   .column.col-xs-12
     button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip
   .column.col-xs-12
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
index 28ffc17..876a956 100644
--- a/docs/src/contents/typography.pug
+++ b/docs/src/contents/typography.pug
@@ -3,7 +3,7 @@ p
 
 +docs-subheading('typography-headings', 'Headings')
 
-.columns
+.docs-demo.columns
   .column.col-12
     h1
       | H1 Heading 
@@ -54,7 +54,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('typography-semantic-text', 'Semantic text elements')
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     abbr(title='Internationalization') I18N
     code.ml-2 abbr
@@ -206,7 +206,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('typography-lists', 'Lists')
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     ul.list
       li list item 1
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index e17f832..8887d4d 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -151,8 +151,9 @@
     }
   }
 
-  .docs-note {
-    margin: 1.5rem 0;
+  .docs-demo {
+    padding-bottom: 1rem;
+    padding-top: 1rem;
   }
 
   .docs-ad {
@@ -195,10 +196,6 @@
     font-size: $font-size-sm;
   }
 
-  .columns {
-    margin-bottom: 1rem;
-  }
-
   .column {
     padding: $layout-spacing;
   }
diff --git a/docs/utilities.html b/docs/utilities.html
index 5032ec7..b17bec3 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -133,7 +133,7 @@
             <h3 class="s-title"><a class="anchor" href="#colors" aria-hidden="true">#</a>Color utilities</h3>
             <p>Color utilities are used for changing colors for text, link and background.</p>
             <h4 class="s-subtitle" id="colors-text"><a class="anchor" href="#colors-text" aria-hidden="true">#</a>Text colors</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <p><span class="text-primary">primary color</span></p>
                 <p><span class="text-secondary">secondary color</span></p>
@@ -152,7 +152,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>&gt;</span>warning color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <p><a class="text-primary p-1" href="#colors">primary link</a></p>
                 <p><a class="text-secondary p-1" href="#colors">secondary link</a></p>
@@ -172,7 +172,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="colors-background"><a class="anchor" href="#colors-background" aria-hidden="true">#</a>Background colors</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <p><span class="bg-primary p-1 rounded">primary bg</span></p>
                 <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p>
@@ -194,7 +194,7 @@
           <div class="container" id="cursor">
             <h3 class="s-title"><a class="anchor" href="#cursor" aria-hidden="true">#</a>Cursor utilities</h3>
             <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4">
                 <div class="bg-gray docs-block c-hand">c-hand</div>
               </div>
@@ -255,17 +255,17 @@
           <div class="container" id="divider">
             <h3 class="s-title"><a class="anchor" href="#divider" aria-hidden="true">#</a>Divider</h3>
             <p>A Divider is used for separating elements.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <div class="divider"></div>
               </div>
             </div>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
                 <div class="divider text-center" data-content="OR"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
               </div>
             </div>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <form>
                   <div class="form-group">
@@ -322,13 +322,13 @@
               Loading indicator is used for loading or updating.
               You can add the <code>loading</code> class to a container for loading status.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12 text-center">
                 <div class="loading"></div>
               </div>
             </div>
             <p>Add the <code>loading-lg</code> class for large size.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12 text-center">
                 <div class="loading loading-lg"></div>
               </div>
@@ -378,7 +378,7 @@
           <div class="container" id="shapes">
             <h3 class="s-title"><a class="anchor" href="#shapes" aria-hidden="true">#</a>Shape utilities</h3>
             <p>Shape utilities are used for change element shapes.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 text-center">
                 <div class="bg-primary text-light docs-shape rounded centered">rounded</div>
               </div>
-- 
cgit v1.3.1-23-gd82d