Add Filters code

1 files changed, 128 insertions, 0 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 9f850cc..312cbdb 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -60,6 +60,9 @@
                 <a href="experimentals.html#comparison">Comparison slider</a>
               </li>
               <li class="nav-item">
+                <a href="experimentals.html#filters">Filters</a>
+              </li>
+              <li class="nav-item">
                 <a href="experimentals.html#meters">Meters</a>
               </li>
               <li class="nav-item">
@@ -336,6 +339,131 @@
 
         </section>
 
+        <section id="filters" class="container">
+          <header class="text-center"><h3>Filters</h3></header>
+          <section class="notes">
+            <p><strong>Filters</strong> are CSS only content filters.</p>
+          </section>
+          <div class="columns">
+            <div class="column col-12">
+              <div class="filter">
+                <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked />
+                <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden />
+              	<input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden />
+                <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden />
+              	<input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden />
+
+                <div class="filter-nav">
+                  <label class="chip" for="tag-all">All</label>
+                  <label class="chip" for="tag-action">Action</label>
+                  <label class="chip" for="tag-roleplaying">Roleplaying</label>
+                  <label class="chip" for="tag-shooter">Shooter</label>
+                  <label class="chip" for="tag-sports">Sports</label>
+                </div>
+                <div class="filter-body columns">
+                  <div class="column col-4" data-tag="tag-roleplaying">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Fallout 4</div>
+                        <div class="card-subtitle">Roleplaying</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-shooter">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Halo 5</div>
+                        <div class="card-subtitle">Shooter</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-action">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Quantum Break</div>
+                        <div class="card-subtitle">Action</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-sports">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Forza Horizon 3</div>
+                        <div class="card-subtitle">Sports</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-roleplaying">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Final Fantasy XV</div>
+                        <div class="card-subtitle">Roleplaying</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-sports">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">NBA 2K17</div>
+                        <div class="card-subtitle">Sports</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-shooter">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Battlefield 1</div>
+                        <div class="card-subtitle">Shooter</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-action">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">GTA V</div>
+                        <div class="card-subtitle">Action</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-sports">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">FIFA 17</div>
+                        <div class="card-subtitle">Sports</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-shooter">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Overwatch</div>
+                        <div class="card-subtitle">Shooter</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-shooter">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Titanfall 2</div>
+                        <div class="card-subtitle">Shooter</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="column col-4" data-tag="tag-shooter">
+                    <div class="filter-item card">
+                      <div class="card-header">
+                        <div class="card-title">Gears of Wars 4</div>
+                        <div class="card-subtitle">Shooter</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </section>
+
         <section id="meters" class="container">
           <header class="text-center"><h3>Meters</h3></header>
           <section class="notes">