Add Ads (TEST)

8 files changed, 206 insertions, 2 deletions

diff --git a/docs/components.html b/docs/components.html
index 68d078e..08e98ac 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -263,6 +263,36 @@
       </div>
 
       <div id="content" class="s-content">
+        <div id="components" class="container">
+          <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3>
+        </div>
+
+        <div class="container">
+          <div class="docs-ad">
+            <div class="hide-md">
+              <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+              <!-- GitHub-lg -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:728px;height:90px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9894180784"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+            <div class="show-md">
+              <!-- GitHub-sm -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:300px;height:250px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9278881734"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+          </div>
+        </div>
+        
         <div id="accordions" class="container">
           <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
           <div class="docs-note">
diff --git a/docs/css/docs.css b/docs/css/docs.css
index 4295995..171b6a9 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -130,6 +130,23 @@
   margin: 1.5rem 0;
 }
 
+.s-content .docs-ad {
+  background: #f8f9fa;
+  border-radius: .1rem;
+  display: inline-block;
+  padding: .4rem;
+  position: relative;
+}
+
+.s-content .docs-ad::before {
+  color: #acb3c2;
+  content: "AD";
+  font-size: .6rem;
+  position: absolute;
+  right: .4rem;
+  top: .1rem;
+}
+
 .s-content .column {
   padding: .4rem;
 }
diff --git a/docs/elements.html b/docs/elements.html
index 8f02dc4..12d2276 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -262,6 +262,36 @@
       </div>
 
       <div id="content" class="s-content">
+        <div id="elements" class="container">
+          <h3 class="s-title"><a href="#elements" class="anchor" aria-hidden="true">#</a>Elements</h3>
+        </div>
+
+        <div class="container">
+          <div class="docs-ad">
+            <div class="hide-md">
+              <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+              <!-- GitHub-lg -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:728px;height:90px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9894180784"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+            <div class="show-md">
+              <!-- GitHub-sm -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:300px;height:250px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9278881734"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+          </div>
+        </div>
+
         <div id="typography" class="container">
           <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3>
           <div class="docs-note">
diff --git a/docs/experimentals.html b/docs/experimentals.html
index f47d983..aeb8e83 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -270,6 +270,32 @@
           </div>
         </div>
 
+        <div class="container">
+          <div class="docs-ad">
+            <div class="hide-md">
+              <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+              <!-- GitHub-lg -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:728px;height:90px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9894180784"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+            <div class="show-md">
+              <!-- GitHub-sm -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:300px;height:250px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9278881734"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+          </div>
+        </div>
+
         <div id="calendars" class="container">
           <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3>
           <div class="docs-note">
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 6dc53c6..070c5b3 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -270,6 +270,32 @@
           </div>
         </div>
 
+        <div class="container">
+          <div class="docs-ad">
+            <div class="hide-md">
+              <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+              <!-- GitHub-lg -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:728px;height:90px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9894180784"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+            <div class="show-md">
+              <!-- GitHub-sm -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:300px;height:250px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9278881734"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+          </div>
+        </div>
+
         <div id="installation" class="container">
           <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3>
           <div class="docs-note">
@@ -574,10 +600,10 @@ gulp.task('prefix', function() {
             <p><strong>April 2017</strong></p>
             <ul>
               <li>
-                <a href="components.html#accordions">Accordions</a>: used to toggle sections of content <small class="label label-primary">NEW</small>
+                <a href="components.html#accordions">Accordions</a>: used to toggle sections of content 
               </li>
               <li>
-                <a href="experimentals.html#filters">Filters</a>: CSS only content filters <small class="label label-primary">NEW</small>
+                <a href="experimentals.html#filters">Filters</a>: CSS only content filters 
               </li>
               <li>
                 <a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images
diff --git a/docs/layout.html b/docs/layout.html
index 19d5c6f..39013f3 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -262,6 +262,35 @@
       </div>
 
       <div id="content" class="s-content">
+          <div id="layout" class="container">
+            <h3 class="s-title"><a href="#layout" class="anchor" aria-hidden="true">#</a>Layout</h3>
+          </div>
+  
+          <div class="container">
+            <div class="docs-ad">
+              <div class="hide-md">
+                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <!-- GitHub-lg -->
+                <ins class="adsbygoogle"
+                      style="display:inline-block;width:728px;height:90px"
+                      data-ad-client="ca-pub-2225124559530218"
+                      data-ad-slot="9894180784"></ins>
+                <script>
+                (adsbygoogle = window.adsbygoogle || []).push({});
+                </script>
+              </div>
+              <div class="show-md">
+                <!-- GitHub-sm -->
+                <ins class="adsbygoogle"
+                      style="display:inline-block;width:300px;height:250px"
+                      data-ad-client="ca-pub-2225124559530218"
+                      data-ad-slot="9278881734"></ins>
+                <script>
+                (adsbygoogle = window.adsbygoogle || []).push({});
+                </script>
+              </div>
+            </div>
+          </div>
         <div id="grid" class="container">
           <h3 class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3>
           <div class="docs-note">
diff --git a/docs/src/docs.scss b/docs/src/docs.scss
index a065342..11da1f6 100644
--- a/docs/src/docs.scss
+++ b/docs/src/docs.scss
@@ -132,6 +132,23 @@
     margin: 1.5rem 0;
   }
 
+  .docs-ad {
+    background: $bg-color;
+    border-radius: $border-radius;
+    display: inline-block;
+    padding: $layout-spacing;
+    position: relative;
+
+    &::before {
+      content: "AD";
+      color: $gray-color;
+      font-size: $font-size-sm;
+      position: absolute;
+      right: $layout-spacing;
+      top: $unit-h;
+    }
+  }
+
   .column {
     padding: $layout-spacing;
   }
diff --git a/docs/utilities.html b/docs/utilities.html
index 9247349..b23adda 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -262,6 +262,35 @@
       </div>
 
       <div id="content" class="s-content">
+        <div id="utilities" class="container">
+          <h3 class="s-title"><a href="#utilities" class="anchor" aria-hidden="true">#</a>Utilities</h3>
+        </div>
+
+        <div class="container">
+          <div class="docs-ad">
+            <div class="hide-md">
+              <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+              <!-- GitHub-lg -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:728px;height:90px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9894180784"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+            <div class="show-md">
+              <!-- GitHub-sm -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:300px;height:250px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9278881734"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+          </div>
+        </div>
         <div id="colors" class="container">
           <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3>
           <div class="docs-note">