Merge pull request #522 from picturepan2/0.5.5 v0.5.5

0.5.5

11 files changed, 1024 insertions, 0 deletions

diff --git a/docs/src/experimentals/autocomplete.pug b/docs/src/experimentals/autocomplete.pug
new file mode 100644
index 0000000..c112c46
--- /dev/null
+++ b/docs/src/experimentals/autocomplete.pug
@@ -0,0 +1,135 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'autocomplete'
+  - var parent = 'experimentals'
+  - var title = 'Autocomplete - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('autocomplete', 'Autocomplete')
+    include ../_layout/_ad-g.pug
+    
+    p
+      | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
+
+    .docs-demo.columns
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete
+            .form-autocomplete-input.form-input
+              span.chip
+                | Bruce Banner
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
+                | Thor Odinson
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
+                | Steve Rogers
+              .chip
+                figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                | Tony Stark
+              span.chip.active
+                | Natasha Romanoff
+              input.form-input(type="text" placeholder="")
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete
+            .form-autocomplete-input.form-input.is-focused
+              span.chip
+                | Bruce Banner
+                a.btn.btn-clear(href="#" aria-label="Close" role="button")
+              span.chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson")
+                | Thor Odinson
+                a.btn.btn-clear(href="#" aria-label="Close" role="button")
+              .has-icon-left
+                input.form-input(type="text" placeholder="" value="S")
+                i.form-icon.loading
+            ul.menu
+              li.menu-item
+                a(href="#autocomplete")
+                  .tile.tile-centered
+                    .tile-icon
+                      img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers")
+                    .tile-content
+                      mark S
+                      | teve Roger
+                      mark s
+              li.menu-item
+                a(href="#autocomplete")
+                  .tile.tile-centered
+                    .tile-icon
+                      figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                    .tile-content
+                      | Tony 
+                      mark S
+                      | tark
+
+    p
+      | Add a container element with the #[code form-autocomplete] class.
+      | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component.
+      | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state.
+    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.
+
+    .docs-demo.columns
+      .column.col-9.col-xs-12
+        .form-group
+          .form-autocomplete.autocomplete-oneline
+            .form-autocomplete-input.form-input
+              span.chip
+                | Bruce Banner
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
+                | Thor Odinson
+              .chip
+                img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
+                | Steve Rogers
+              .chip
+                figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                | Tony Stark
+              span.chip.active
+                | Natasha Romanoff
+              input.form-input(type="text" placeholder="")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="form-autocomplete">
+            <!-- autocomplete input container -->
+            <div class="form-autocomplete-input form-input">
+
+              <!-- autocomplete chips -->
+              <div class="chip">
+                <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
+                Thor Odinson
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </div>
+
+              <!-- autocomplete real input box -->
+              <input class="form-input" type="text" placeholder="typing here">
+            </div>
+
+            <!-- autocomplete suggestion list -->
+            <ul class="menu">
+              <!-- menu list items -->
+              <li class="menu-item">
+                <a href="#">
+                  <div class="tile tile-centered">
+                    <div class="tile-icon">
+                      ...
+                    </div>
+                    <div class="tile-content">
+                      ...
+                    </div>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/calendars.pug b/docs/src/experimentals/calendars.pug
new file mode 100644
index 0000000..3c543d2
--- /dev/null
+++ b/docs/src/experimentals/calendars.pug
@@ -0,0 +1,314 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'calendars'
+  - var parent = 'experimentals'
+  - var title = 'Calendars - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('calendars', 'Calendars')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Calendars are designed for date or date range picker and events display. It is made with flex layout.
+
+    .docs-demo.columns
+      .column.col-4.col-md-12
+        .calendar
+          .calendar-nav.navbar
+            button.btn.btn-action.btn-link.btn-lg
+              i.icon.icon-arrow-left
+            .navbar-primary March 2017
+            button.btn.btn-action.btn-link.btn-lg
+              i.icon.icon-arrow-right
+          .calendar-container
+            .calendar-header
+              .calendar-date Sun
+              .calendar-date Mon
+              .calendar-date Tue
+              .calendar-date Wed
+              .calendar-date Thu
+              .calendar-date Fri
+              .calendar-date Sat
+            .calendar-body
+              .calendar-date.prev-month
+                button.date-item 26
+              .calendar-date.prev-month
+                button.date-item 27
+              .calendar-date.prev-month
+                button.date-item 28
+              .calendar-date
+                button.date-item 1
+              .calendar-date
+                button.date-item 2
+              .calendar-date
+                button.date-item 3
+              .calendar-date.tooltip(data-tooltip="Today")
+                button.date-item.date-today 4
+              .calendar-date.tooltip(data-tooltip="Not available")
+                button.date-item(disabled="") 5
+              .calendar-date
+                button.date-item 6
+              .calendar-date
+                button.date-item 7
+              .calendar-date.tooltip(data-tooltip="You have appointments")
+                button.date-item.badge 8
+              .calendar-date
+                button.date-item 9
+              .calendar-date
+                button.date-item 10
+              .calendar-date
+                button.date-item 11
+              .calendar-date
+                button.date-item 12
+              .calendar-date
+                button.date-item 13
+              .calendar-date
+                button.date-item 14
+              .calendar-date
+                button.date-item 15
+              .calendar-date.calendar-range.range-start
+                button.date-item 16
+              .calendar-date.calendar-range
+                button.date-item 17
+              .calendar-date.calendar-range
+                button.date-item 18
+              .calendar-date.calendar-range
+                button.date-item 19
+              .calendar-date.calendar-range.range-end
+                button.date-item 20
+              .calendar-date
+                button.date-item 21
+              .calendar-date
+                button.date-item 22
+              .calendar-date
+                button.date-item 23
+              .calendar-date
+                button.date-item 24
+              .calendar-date
+                button.date-item 25
+              .calendar-date
+                button.date-item 26
+              .calendar-date
+                button.date-item 27
+              .calendar-date
+                button.date-item 28
+              .calendar-date
+                button.date-item 29
+              .calendar-date
+                button.date-item 30
+              .calendar-date
+                button.date-item 31
+              .calendar-date.next-month
+                button.date-item 1
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="calendar">
+            <!-- calendar navbar -->
+            <div class="calendar-nav navbar">
+              <button class="btn btn-action btn-link btn-lg">
+                <i class="icon icon-arrow-left"></i>
+              </button>
+              <div class="navbar-primary">March 2017</div>
+              <button class="btn btn-action btn-link btn-lg">
+                <i class="icon icon-arrow-right"></i>
+              </button>
+            </div>
+
+            <div class="calendar-container">
+              <div class="calendar-header">
+                <div class="calendar-date">Sun</div>
+                <div class="calendar-date">Mon</div>
+                <div class="calendar-date">Tue</div>
+                <div class="calendar-date">Wed</div>
+                <div class="calendar-date">Thu</div>
+                <div class="calendar-date">Fri</div>
+                <div class="calendar-date">Sat</div>
+              </div>
+
+              <div class="calendar-body">
+                <!-- calendar previous month -->
+                <div class="calendar-date prev-month">
+                  <button class="date-item">26</button>
+                </div>
+                ...
+                <div class="calendar-date prev-month">
+                  <button class="date-item">28</button>
+                </div>
+
+                <!-- calendar current month -->
+                <div class="calendar-date">
+                  <button class="date-item">1</button>
+                </div>
+                <div class="calendar-date">
+                  <button class="date-item">2</button>
+                </div>
+                <div class="calendar-date">
+                  <button class="date-item">3</button>
+                </div>
+                <!-- calendar date: today -->
+                <div class="calendar-date">
+                  <button class="date-item date-today">4</button>
+                </div>
+                <!-- calendar date: tooltip -->
+                <div class="calendar-date tooltip" data-tooltip="You have appointments">
+                  <button class="date-item">5</button>
+                </div>
+                <!-- calendar date: not available -->
+                <div class="calendar-date tooltip" data-tooltip="Not available">
+                  <button class="date-item" disabled="">6</button>
+                </div>
+
+                <!-- calendar range -->
+                <div class="calendar-date calendar-range range-start">
+                  <button class="date-item">7</button>
+                </div>
+                <div class="calendar-date calendar-range">
+                  <button class="date-item">8</button>
+                </div>
+                <div class="calendar-date calendar-range range-end">
+                  <button class="date-item">9</button>
+                </div>
+                ...
+                <div class="calendar-date">
+                  <button class="date-item">31</button>
+                </div>
+
+                <!-- calendar next month -->
+                <div class="calendar-date next-month">
+                  <button class="date-item">1</button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+    +docs-subheading('calendars-sizes', 'Calendars sizes')
+
+    .docs-demo.columns
+      .column.col-12
+        .calendar.calendar-lg
+          .calendar-nav.navbar
+            button.btn.btn-action.btn-link.btn-lg
+              i.icon.icon-arrow-left
+            .navbar-primary March 2017
+            button.btn.btn-action.btn-link.btn-lg
+              i.icon.icon-arrow-right
+          .calendar-container
+            .calendar-header
+              .calendar-date Sun
+              .calendar-date Mon
+              .calendar-date Tue
+              .calendar-date Wed
+              .calendar-date Thu
+              .calendar-date Fri
+              .calendar-date Sat
+            .calendar-body
+              .calendar-date.prev-month
+                button.date-item 26
+              .calendar-date.prev-month
+                button.date-item 27
+                .calendar-events
+                  a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival
+              .calendar-date.prev-month
+                button.date-item 28
+              .calendar-date
+                button.date-item 1
+              .calendar-date
+                button.date-item 2
+              .calendar-date
+                button.date-item 3
+              .calendar-date.tooltip(data-tooltip="Today")
+                button.date-item.date-today 4
+              .calendar-date
+                button.date-item(disabled="") 5
+              .calendar-date
+                button.date-item 6
+              .calendar-date
+                button.date-item 7
+              .calendar-date.tooltip(data-tooltip="You have appointments")
+                button.date-item.badge 8
+                .calendar-events
+                  a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event
+                  a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day
+              .calendar-date
+                button.date-item 9
+              .calendar-date
+                button.date-item 10
+              .calendar-date
+                button.date-item 11
+              .calendar-date
+                button.date-item 12
+                .calendar-events
+                  a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day
+              .calendar-date
+                button.date-item 13
+              .calendar-date
+                button.date-item 14
+              .calendar-date
+                button.date-item 15
+              .calendar-date.calendar-range.range-start
+                button.date-item 16
+              .calendar-date.calendar-range
+                button.date-item 17
+              .calendar-date.calendar-range
+                button.date-item 18
+              .calendar-date.calendar-range
+                button.date-item 19
+              .calendar-date.calendar-range.range-end
+                button.date-item 20
+                .calendar-events
+                  a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox
+              .calendar-date
+                button.date-item 21
+              .calendar-date
+                button.date-item 22
+              .calendar-date
+                button.date-item 23
+              .calendar-date
+                button.date-item 24
+              .calendar-date
+                button.date-item 25
+              .calendar-date
+                button.date-item 26
+              .calendar-date
+                button.date-item 27
+              .calendar-date
+                button.date-item 28
+              .calendar-date
+                button.date-item 29
+              .calendar-date
+                button.date-item 30
+              .calendar-date
+                button.date-item 31
+              .calendar-date.next-month.disabled
+                button.date-item 1
+                .calendar-events
+                  a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="calendar calendar-lg">
+            <!-- calendar navbar structure -->
+
+            <div class="calendar-container">
+              <!-- calendar header structure -->
+
+              <div class="calendar-body">
+                <!-- calendar date with events -->
+                <div class="calendar-date">
+                  <button class="date-item active">20</button>
+                  <div class="calendar-events">
+                    <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+    
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/carousels.pug b/docs/src/experimentals/carousels.pug
new file mode 100644
index 0000000..3ae34bb
--- /dev/null
+++ b/docs/src/experimentals/carousels.pug
@@ -0,0 +1,94 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'carousels'
+  - var parent = 'experimentals'
+  - var title = 'Carousels - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('carousels', 'Carousels')
+    include ../_layout/_ad-g.pug
+
+    p Carousels are slideshows for cycling images. It is built in pure CSS.
+
+    .docs-demo.columns
+      .column.col-12
+        .carousel
+          input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="")
+          input#slide-2.carousel-locator(type="radio" name="carousel-radio" hidden="")
+          input#slide-3.carousel-locator(type="radio" name="carousel-radio" hidden="")
+          input#slide-4.carousel-locator(type="radio" name="carousel-radio" hidden="")
+          .carousel-container
+            figure.carousel-item
+              label.item-prev.btn.btn-action.btn-lg(for="slide-4")
+                i.icon.icon-arrow-left
+              label.item-next.btn.btn-action.btn-lg(for="slide-2")
+                i.icon.icon-arrow-right
+              img.img-responsive.rounded(src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper")
+            figure.carousel-item
+              label.item-prev.btn.btn-action.btn-lg(for="slide-1")
+                i.icon.icon-arrow-left
+              label.item-next.btn.btn-action.btn-lg(for="slide-3")
+                i.icon.icon-arrow-right
+              img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+            figure.carousel-item
+              label.item-prev.btn.btn-action.btn-lg(for="slide-2")
+                i.icon.icon-arrow-left
+              label.item-next.btn.btn-action.btn-lg(for="slide-4")
+                i.icon.icon-arrow-right
+              img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper")
+            figure.carousel-item
+              label.item-prev.btn.btn-action.btn-lg(for="slide-3")
+                i.icon.icon-arrow-left
+              label.item-next.btn.btn-action.btn-lg(for="slide-1")
+                i.icon.icon-arrow-right
+              img.img-responsive.rounded(src="../img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper")
+          .carousel-nav
+            label.nav-item.text-hide.c-hand(for="slide-1") 1
+            label.nav-item.text-hide.c-hand(for="slide-2") 2
+            label.nav-item.text-hide.c-hand(for="slide-3") 3
+            label.nav-item.text-hide.c-hand(for="slide-4") 4
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="carousel">
+            <!-- carousel locator -->
+            <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
+            <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
+            <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
+            <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
+            
+            <!-- carousel container -->
+            <div class="carousel-container">
+              <!-- carousel item -->
+              <figure class="carousel-item">
+                <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
+                <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
+              </figure>
+              <figure class="carousel-item">
+                <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
+                <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+              </figure>
+              <figure class="carousel-item">
+                <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
+                <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
+              </figure>
+              <figure class="carousel-item">
+                <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
+                <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
+              </figure>
+            </div>
+            <!-- carousel navigation -->
+            <div class="carousel-nav">
+              <label class="nav-item text-hide c-hand" for="slide-1">1</label>
+              <label class="nav-item text-hide c-hand" for="slide-2">2</label>
+              <label class="nav-item text-hide c-hand" for="slide-3">3</label>
+              <label class="nav-item text-hide c-hand" for="slide-4">4</label>
+            </div>
+          </div>
+      
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/comparison.pug b/docs/src/experimentals/comparison.pug
new file mode 100644
index 0000000..cdf135c
--- /dev/null
+++ b/docs/src/experimentals/comparison.pug
@@ -0,0 +1,45 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'comparison'
+  - var parent = 'experimentals'
+  - var title = 'Comparison sliders - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('comparison', 'Comparison sliders')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
+
+    .docs-demo.columns
+      .column.col-12
+        .comparison-slider
+          figure.comparison-before
+            img.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+            .comparison-label Before
+          figure.comparison-after
+            img.filter-grayscale.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+            .comparison-label After
+            textarea.comparison-resizer(readonly="")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="comparison-slider">
+            <figure class="comparison-before">
+              <!-- image (before) -->
+              <div class="comparison-label">Before</div>
+            </figure>
+
+            <figure class="comparison-after">
+              <!-- image (after) -->
+              <div class="comparison-label">After</div>
+              <textarea class="comparison-resizer" readonly></textarea>
+            </figure>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/filters.pug b/docs/src/experimentals/filters.pug
new file mode 100644
index 0000000..d31c6f7
--- /dev/null
+++ b/docs/src/experimentals/filters.pug
@@ -0,0 +1,123 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'filters'
+  - var parent = 'experimentals'
+  - var title = 'Filters - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('filters', 'Filters')
+    include ../_layout/_ad-g.pug
+
+    p Filters are CSS only content filters.
+
+    .docs-demo.columns
+      .column.col-12
+        .filter
+          input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
+          input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="")
+          input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="")
+          input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="")
+          input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="")
+          .filter-nav
+            label.chip(for="tag-0") All
+            label.chip(for="tag-1") Action
+            label.chip(for="tag-2") Roleplaying
+            label.chip(for="tag-3") Shooter
+            label.chip(for="tag-4") Sports
+          .filter-body.columns
+            .column.col-4.filter-item(data-tag="tag-2")
+              .card
+                .card-header
+                  .card-title Fallout 4
+                  .card-subtitle Roleplaying
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title Halo 5
+                  .card-subtitle Shooter
+            .column.col-4.filter-item(data-tag="tag-1")
+              .card
+                .card-header
+                  .card-title Quantum Break
+                  .card-subtitle Action
+            .column.col-4.filter-item(data-tag="tag-4")
+              .card
+                .card-header
+                  .card-title Forza Horizon 3
+                  .card-subtitle Sports
+            .column.col-4.filter-item(data-tag="tag-2")
+              .card
+                .card-header
+                  .card-title Final Fantasy XV
+                  .card-subtitle Roleplaying
+            .column.col-4.filter-item(data-tag="tag-4")
+              .card
+                .card-header
+                  .card-title NBA 2K17
+                  .card-subtitle Sports
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title Battlefield 1
+                  .card-subtitle Shooter
+            .column.col-4.filter-item(data-tag="tag-1")
+              .card
+                .card-header
+                  .card-title GTA V
+                  .card-subtitle Action
+            .column.col-4.filter-item(data-tag="tag-4")
+              .card
+                .card-header
+                  .card-title FIFA 17
+                  .card-subtitle Sports
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title Overwatch
+                  .card-subtitle Shooter
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title Titanfall 2
+                  .card-subtitle Shooter
+            .column.col-4.filter-item(data-tag="tag-3")
+              .card
+                .card-header
+                  .card-title Gears of Wars 4
+                  .card-subtitle Shooter
+
+    p
+      | Filters use #[code tag-1] to #[code tag-8] to flag different tags.
+      | #[code tag-0] is reserved for clearing filter (or showing all). 
+      | You can overwrite #[code $filter-number] in #[code _filters.scss] to have more filters.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="filter">
+            <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
+            <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
+            <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
+
+            <div class="filter-nav">
+              <label class="chip" for="tag-0">All</label>
+              <label class="chip" for="tag-1">Action</label>
+              <label class="chip" for="tag-2">Roleplaying</label>
+            </div>
+
+            <div class="filter-body">
+              <div class="filter-item card" data-tag="tag-1">
+                <!-- Filter item content -->
+              </div>
+              <div class="filter-item card" data-tag="tag-2">
+                <!-- Filter item content -->
+              </div>
+              <!-- Filter items -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/meters.pug b/docs/src/experimentals/meters.pug
new file mode 100644
index 0000000..5ac11b5
--- /dev/null
+++ b/docs/src/experimentals/meters.pug
@@ -0,0 +1,38 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'meters'
+  - var parent = 'experimentals'
+  - var title = 'Meters - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('meters', 'Meters')
+    include ../_layout/_ad-g.pug
+
+    p Meters represent the value within the known range.
+
+    .docs-demo.columns
+      .column.col-3.col-xs-12
+        meter.meter(value="20" min="0" max="100")
+      .column.col-3.col-xs-12
+        meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100")
+      .column.col-3.col-xs-12
+        meter.meter(value="85" min="0" low="30" high="80" max="100")
+      .column.col-3.col-xs-12
+        meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- Meter is green when low < value < high -->
+          <meter class="meter" value="20" min="0" max="100"></meter>
+          <meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
+          <!-- Meter is yellow when value < low  or high < value -->
+          <meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
+          <!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
+          <meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/off-canvas.pug b/docs/src/experimentals/off-canvas.pug
new file mode 100644
index 0000000..51fe9d0
--- /dev/null
+++ b/docs/src/experimentals/off-canvas.pug
@@ -0,0 +1,61 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'off-canvas'
+  - var parent = 'experimentals'
+  - var title = 'Off-canvas - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('off-canvas', 'Off-canvas')
+    include ../_layout/_ad-g.pug
+
+    p
+      | The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
+    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].
+
+    .docs-demo.columns
+      .column
+        .off-canvas.off-canvas-sidebar-show
+          a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo")
+            i.icon.icon-menu
+          #sidebar-demo.off-canvas-sidebar.flex-centered
+            span Sidebar
+          a.off-canvas-overlay(href="#close")
+          .off-canvas-content
+            .content
+              h4 Lorem ipsum
+              p
+                | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+              p
+                | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+
+    p
+      | You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar].
+      | And remove the #[code active] to close it.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="off-canvas">
+            <!-- off-screen toggle button -->
+            <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
+              <i class="icon icon-menu"></i>
+            </a>
+
+            <div id="sidebar-id" class="off-canvas-sidebar">
+              <!-- off-screen sidebar -->
+            </div>
+
+            <a class="off-canvas-overlay" href="#close"></a>
+
+            <div class="off-canvas-content">
+              <!-- off-screen content -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/parallax.pug b/docs/src/experimentals/parallax.pug
new file mode 100644
index 0000000..df84a5f
--- /dev/null
+++ b/docs/src/experimentals/parallax.pug
@@ -0,0 +1,50 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'parallax'
+  - var parent = 'experimentals'
+  - var title = 'Parallax - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('parallax', 'Parallax')
+    include ../_layout/_ad-g.pug
+
+    p
+      | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
+
+    .docs-demo.columns
+      .column.col-sm-12.col-8.col-mx-auto
+        .parallax
+          .parallax-top-left(tabindex="1")
+          .parallax-top-right(tabindex="2")
+          .parallax-bottom-left(tabindex="3")
+          .parallax-bottom-right(tabindex="4")
+          .parallax-content
+            .parallax-front
+              h2 tvOS parallax demo
+            .parallax-back
+              img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="parallax">
+            <div class="parallax-top-left" tabindex="1"></div>
+            <div class="parallax-top-right" tabindex="2"></div>
+            <div class="parallax-bottom-left" tabindex="3"></div>
+            <div class="parallax-bottom-right" tabindex="4"></div>
+            <div class="parallax-content">
+              <div class="parallax-front">
+                <h2>tvOS parallax demo</h2>
+              </div>
+              <div class="parallax-back">
+                <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
+              </div>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
+          
\ No newline at end of file
diff --git a/docs/src/experimentals/progress.pug b/docs/src/experimentals/progress.pug
new file mode 100644
index 0000000..585b731
--- /dev/null
+++ b/docs/src/experimentals/progress.pug
@@ -0,0 +1,33 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'progress'
+  - var parent = 'experimentals'
+  - var title = 'Progress - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('progress', 'Progress')
+    include ../_layout/_ad-g.pug
+
+    p The Progress indicates the progress completion of a task.
+
+    .docs-demo.columns
+      .column.col-3.col-xs-12
+        progress.progress(value="75" max="100")
+      .column.col-3.col-xs-12
+        progress.progress(value="50" max="100")
+      .column.col-3.col-xs-12
+        progress.progress(value="25" max="100")
+      .column.col-3.col-xs-12
+        progress.progress(max="100")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <progress class="progress" value="25" max="100"></progress>
+          <progress class="progress" max="100"></progress>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/sliders.pug b/docs/src/experimentals/sliders.pug
new file mode 100644
index 0000000..c15d270
--- /dev/null
+++ b/docs/src/experimentals/sliders.pug
@@ -0,0 +1,34 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'sliders'
+  - var parent = 'experimentals'
+  - var title = 'Sliders - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('sliders', 'Sliders')
+    include ../_layout/_ad-g.pug
+
+    p Sliders are for selecting values from ranges.
+    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.
+
+    .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
+        input.slider(type="range" min="0" max="100" value="50" disabled="")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- Sliders -->
+          <input class="slider" type="range" min="0" max="100" value="50">
+          <!-- Sliders with tooltips -->
+          <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/experimentals/timelines.pug b/docs/src/experimentals/timelines.pug
new file mode 100644
index 0000000..1a9165e
--- /dev/null
+++ b/docs/src/experimentals/timelines.pug
@@ -0,0 +1,97 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'timelines'
+  - var parent = 'experimentals'
+  - var title = 'Timelines - Experimentals - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('timelines', 'Timelines')
+    include ../_layout/_ad-g.pug
+
+    p Timelines are ordered sequences of activities.
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        .timeline
+          #timeline-example-1.timeline-item
+            .timeline-left
+              a.timeline-icon.tooltip(href="#timeline-example-1" data-tooltip="March 2016")
+            .timeline-content
+              .tile
+                .tile-content
+                  p.tile-subtitle March 2016
+                  p.tile-title Initial commit
+          #timeline-example-2.timeline-item
+            .timeline-left
+              a.timeline-icon.icon-lg.tooltip(href="#timeline-example-2" data-tooltip="February 2017")
+                i.icon.icon-check
+            .timeline-content
+              .tile
+                .tile-content
+                  p.tile-subtitle February 2017
+                  p.tile-title New Documents experience
+                  p.tile-title
+                    a(href="components.html#bars") Bars
+                    | : represent the progress of a task
+                  p.tile-title
+                    a(href="components.html#steps") Steps
+                    | : progress indicators of a sequence of task steps
+                  p.tile-title
+                    a(href="components.html#tiles") Tiles
+                    | : repeatable or embeddable information blocks
+                .tile-action
+                  button.btn View
+          #timeline-example-3.timeline-item
+            .timeline-left
+              a.timeline-icon.icon-lg.tooltip(href="#timeline-example-3" data-tooltip="March 2017")
+                i.icon.icon-check
+            .timeline-content
+              .tile
+                .tile-content
+                  p.tile-subtitle March 2017
+                  p.tile-title
+                    a(href="elements.html#icons") Icons
+                    | : single-element, responsive and pure CSS icons
+                  p.tile-title
+                    a(href="components.html#popovers") Popovers
+                    | : small overlay content containers
+                  p.tile-title
+                    a(href="experimentals.html#calendars") Calendars
+                    | : date or date range picker and events display
+                  p.tile-title
+                    a(href="experimentals.html#carousels") Carousels
+                    | : slideshows for cycling images
+                .tile-action
+                  button.btn View
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="timeline">
+            <div class="timeline-item" id="timeline-example-1">
+              <div class="timeline-left">
+                <a class="timeline-icon" href="#timeline-example-1"></a>
+              </div>
+              <div class="timeline-content">
+                <!-- tiles structure -->
+              </div>
+            </div>
+
+            <div class="timeline-item" id="timeline-example-2">
+              <div class="timeline-left">
+                <a class="timeline-icon icon-lg" href="#timeline-example-2">
+                  <i class="icon icon-check"></i>
+                </a>
+              </div>
+              <div class="timeline-content">
+                <!-- tiles structure -->
+              </div>
+            </div>
+            ...
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file