Update the Docs completely

19 files changed, 1913 insertions, 0 deletions

diff --git a/docs/src/components/accordions.pug b/docs/src/components/accordions.pug
new file mode 100644
index 0000000..a3c8fcf
--- /dev/null
+++ b/docs/src/components/accordions.pug
@@ -0,0 +1,129 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'accordions'
+  - var parent = 'components'
+  - var title = 'Accordions - Components - 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('accordions', 'Accordions')
+    include ../_layout/_ad-g.pug
+    
+    p Accordions are used to toggle sections of content.
+
+    .docs-demo.columns
+      .column.col-6.col-md-12
+        .accordion
+          input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="")
+          label.accordion-header.c-hand(for="accordion-1")
+            i.icon.icon-arrow-right.mr-1
+            | Elements
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Element 1
+              li.menu-item
+                a(href="#accordions") Element 2
+        .accordion
+          input#accordion-2(type="radio" name="accordion-radio" hidden="")
+          label.accordion-header.c-hand(for="accordion-2")
+            i.icon.icon-arrow-right.mr-1
+            | Layout
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Layout 1
+              li.menu-item
+                a(href="#accordions") Layout 2
+        .accordion
+          input#accordion-3(type="radio" name="accordion-radio" hidden="")
+          label.accordion-header.c-hand(for="accordion-3")
+            i.icon.icon-arrow-right.mr-1
+            | Components
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Component 1
+              li.menu-item
+                a(href="#accordions") Component 2
+      .column.col-6.col-md-12
+        .accordion
+          input#accordion-4(type="checkbox" name="accordion-checkbox" hidden="" checked="")
+          label.accordion-header.c-hand(for="accordion-4")
+            | Elements
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Element 1
+              li.menu-item
+                a(href="#accordions") Element 2
+        .accordion
+          input#accordion-5(type="checkbox" name="accordion-checkbox" hidden="")
+          label.accordion-header.c-hand(for="accordion-5")
+            | Layout
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Layout 1
+              li.menu-item
+                a(href="#accordions") Layout 2
+        .accordion
+          input#accordion-6(type="checkbox" name="accordion-checkbox" hidden="")
+          label.accordion-header.c-hand(for="accordion-6")
+            | Components
+          .accordion-body
+            ul.menu.menu-nav
+              li.menu-item
+                a(href="#accordions") Component 1
+              li.menu-item
+                a(href="#accordions") Component 2
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- standard Accordions example -->
+          <div class="accordion">
+            <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
+            <label class="accordion-header" for="accordion-1">
+              <i class="icon icon-arrow-right mr-1"></i>
+              Title
+            </label>
+            <div class="accordion-body">
+              <!-- Accordions content -->
+            </div>
+          </div>
+
+          <!-- mutually exclusive Accordions example (with same input names) -->
+          <div class="accordion">
+            <input type="radio" id="accordion-1" name="accordion-radio" hidden>
+            <label class="accordion-header" for="accordion-1">
+              Title
+            </label>
+            <div class="accordion-body">
+              <!-- Accordions content -->
+            </div>
+          </div>
+
+    p
+      | Alternatively, you can use #[code details] and #[code summary] instead of #[code input] radio or checkbox trick.
+      | Add the #[code open] attribute to #[code details] to expand it.
+      | Microsoft Edge support is #[a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank") under consideration].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- details and summary Accordions example -->
+          <details class="accordion" open>
+            <summary class="accordion-header">
+              <i class="icon icon-arrow-right mr-1"></i>
+              Title
+            </summary>
+            <div class="accordion-body">
+              <!-- Accordions content -->
+            </div>
+          </details>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/avatars.pug b/docs/src/components/avatars.pug
new file mode 100644
index 0000000..a513648
--- /dev/null
+++ b/docs/src/components/avatars.pug
@@ -0,0 +1,114 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'avatars'
+  - var parent = 'components'
+  - var title = 'Avatars - Components - 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('avatars', 'Avatars')
+    include ../_layout/_ad-g.pug
+    
+    p Avatars are user profile pictures. 
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        figure.avatar.avatar-xl
+          img(src="../img/avatar-1.png" alt="Avatar XL")
+        figure.avatar.avatar-lg
+          img(src="../img/avatar-2.png" alt="Avatar LG")
+        figure.avatar
+          img(src="../img/avatar-3.png" alt="Avatar")
+        figure.avatar.avatar-sm
+          img(src="../img/avatar-4.png" alt="Avatar SM")
+        figure.avatar.avatar-xs
+          img(src="../img/avatar-5.png" alt="Avatar XS")
+      .column.col-6.col-xs-12
+        figure.avatar.avatar-xl(data-initial="YZ")
+        figure.avatar.avatar-lg(data-initial="YZ")
+        figure.avatar(data-initial="YZ")
+        figure.avatar.avatar-sm(data-initial="YZ")
+        figure.avatar.avatar-xs(data-initial="YZ")
+
+    p
+      | Add the #[code avatar] class to #{'<img>'} element.
+      | There are 4 additional sizes available, including #[code avatar-xl](64px), #[code avatar-lg](48px), #[code avatar-sm](24px), and #[code avatar-xs](16px).
+      | By default, the avatar size is 32px.
+    p
+      | For users who don't have profile pictures, you may use their initials for avatars.
+      | Add the #[code avatar] class and avatar size class to #{'<div>'}  element.
+      | The #[code data-initial] attribute is the name appear inside the avatar.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- Basic avatar examples -->
+          <figure class="avatar avatar-xl">
+            <img src="img/avatar-1.png" alt="...">
+          </figure>
+
+          <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+          <!-- Show initals when avatar image is unavailable or not fully loaded -->
+          <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+            <img src="img/avatar-1.png" alt="...">
+          </figure>
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        figure.avatar.avatar-xl
+          img(src="../img/avatar-1.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-2.png" alt="Avatar")
+        figure.avatar.avatar-lg
+          img(src="../img/avatar-2.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-3.png" alt="Avatar")
+        figure.avatar
+          img(src="../img/avatar-3.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-4.png" alt="Avatar")
+        figure.avatar.avatar-sm
+          img(src="../img/avatar-4.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-5.png" alt="Avatar")
+        figure.avatar.avatar-xs
+          img(src="../img/avatar-5.png" alt="Avatar")
+          img.avatar-icon(src="../img/avatar-1.png" alt="Avatar")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="avatar avatar-xl">
+            <img src="img/avatar-1.png" alt="...">
+            <img src="img/avatar-5.png" class="avatar-icon" alt="...">
+          </figure>
+
+    +docs-subheading('avatars-presence', 'Avatar presence')
+            
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        figure.avatar.avatar-xl(data-initial="YZ")
+          i.avatar-presence.online
+        figure.avatar.avatar-lg(data-initial="YZ")
+          i.avatar-presence.busy
+        figure.avatar(data-initial="YZ")
+          i.avatar-presence.away
+        figure.avatar.avatar-sm(data-initial="YZ")
+          i.avatar-presence.offline
+        figure.avatar.avatar-xs(data-initial="YZ")
+          i.avatar-presence.online
+
+    p
+      | Avatars support presence indicators.
+      | You can add an #{'<i>'} element with the #[code avatar-presence] class, and add #[code online], #[code busy] or #[code away] class for different status colors.
+      | The default is gray which means offline.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <figure class="avatar avatar-xl">
+            <img src="img/avatar-1.png" alt="...">
+            <i class="avatar-presence online"></i>
+          </figure>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/badges.pug b/docs/src/components/badges.pug
new file mode 100644
index 0000000..f6232a2
--- /dev/null
+++ b/docs/src/components/badges.pug
@@ -0,0 +1,75 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'badges'
+  - var parent = 'components'
+  - var title = 'Badges - Components - 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('badges', 'Badges')
+    include ../_layout/_ad-g.pug
+
+    p Badges are often used as unread number indicators.
+
+    .docs-demo.columns
+      .column.col-3.col-xs-6
+        span.badge(data-badge="")
+          | Notifications
+      .column.col-3.col-xs-6
+        span.badge(data-badge="8")
+          | Notifications
+      .column.col-3.col-xs-6
+        span.badge(data-badge="88")
+          | Notifications
+      .column.col-3.col-xs-6
+        span.badge(data-badge="888")
+          | Notifications
+
+    p
+      | Add the #[code badge] class to non self closing elements.
+      | And add the #[code data-badge] attribute to define the content of a badge.
+      | The badge will appear in the top-right direction of the element.
+    p
+      | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.
+
+    .docs-demo.columns
+      .column.col-sm-12
+        button.btn.badge(data-badge="") Button
+        button.btn.badge(data-badge="8") Button
+      .column.col-sm-12
+        button.btn.btn-primary.badge(data-badge="") Button
+        button.btn.btn-primary.badge(data-badge="8") Button
+      .column.col-sm-12
+        figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ")
+          img(src="../img/avatar-1.png" alt="YZ")
+        figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ")
+          img(src="../img/avatar-2.png" alt="YZ")
+        figure.avatar.badge(data-badge="8" data-initial="YZ")
+          img(src="../img/avatar-3.png" alt="YZ")
+
+    p
+      | Badges support #[code button] and #[code avatars] elements as well.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <span class="badge">
+            Notifications
+          </span>
+
+          <span class="badge" data-badge="8">
+            Notifications
+          </span>
+
+          <button class="btn badge" data-badge="8">
+            Button
+          </button>
+
+          <figure class="avatar badge" data-badge="8" data-initial="YZ">
+            <img src="img/avatar-3.png" alt="YZ">
+          </figure>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/bars.pug b/docs/src/components/bars.pug
new file mode 100644
index 0000000..31d8418
--- /dev/null
+++ b/docs/src/components/bars.pug
@@ -0,0 +1,98 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'bars'
+  - var parent = 'components'
+  - var title = 'Bars - Components - 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('bars', 'Bars')
+    include ../_layout/_ad-g.pug
+
+    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.
+
+    .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")
+      .column.col-8.col-xs-12
+        .bar
+          .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
+      .column.col-8.col-xs-12
+        .bar
+          .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
+          .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15%
+          .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10%
+          .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15%
+
+    p
+      | Add a container element with the #[code bar] class.
+      | And add child elements with the #[code bar-item] class.
+      | The width percentage value is needed for every #[code bar-item].
+
+    p
+      | There is the #[code bar-sm] class for thinner Bars.
+      | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- normal bars -->
+          <div class="bar bar-sm">
+            <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+
+          <!-- multi-bars -->
+          <div class="bar">
+            <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
+            <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
+          </div>
+
+    +docs-subheading('bars-slider', 'Slider bars')
+
+    .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")
+      .column.col-8.col-xs-12
+        .bar.bar-slider
+          .bar-item(role="progressbar" style="width:15%;")
+            button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider")
+          .bar-item(role="progressbar" style="width:65%;")
+            button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider")
+
+    p
+      | You can add the #[code bar-slider] class to the Bars container.
+      | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item.
+      | You need to set the #[code bar-item] width manually to have the slider point.
+
+    p
+      | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- normal slider -->
+          <div class="bar bar-slider">
+            <div class="bar-item" role="progressbar" style="width:25%;">
+              <button class="bar-slider-btn btn" role="slider"></button>
+            </div>
+          </div>
+
+          <!-- range slider -->
+          <div class="bar bar-slider">
+            <div class="bar-item" role="progressbar" style="width:15%;">
+              <button class="bar-slider-btn btn" role="slider"></button>
+            </div>
+            <div class="bar-item" role="progressbar" style="width:65%;">
+              <button class="bar-slider-btn btn" role="slider"></button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/breadcrumbs.pug b/docs/src/components/breadcrumbs.pug
new file mode 100644
index 0000000..c6f4ffe
--- /dev/null
+++ b/docs/src/components/breadcrumbs.pug
@@ -0,0 +1,61 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'breadcrumbs'
+  - var parent = 'components'
+  - var title = 'Breadcrumbs - Components - 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('breadcrumbs', 'Breadcrumbs')
+    include ../_layout/_ad-g.pug
+
+    p Breadcrumbs are used as navigational hierarchies to indicate current location.
+
+    .docs-demo.columns
+      .column.col-12
+        ul.breadcrumb
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+      .column.col-12
+        ul.breadcrumb
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Change avatar") Change avatar
+      .column.col-12
+        ul.breadcrumb
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+          li.breadcrumb-item
+            a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+          li.breadcrumb-item
+            | Search result: 
+            a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre
+
+    p
+      | Add a container element with the #[code breadcrumb] class.
+      | And add child elements with the #[code breadcrumb-item] class.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="breadcrumb">
+            <li class="breadcrumb-item">
+              <a href="#">Home</a>
+            </li>
+            <li class="breadcrumb-item">
+              <a href="#">Settings</a>
+            </li>
+            <li class="breadcrumb-item">
+              <a href="#">Change avatar</a>
+            </li>
+          </ul>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/cards.pug b/docs/src/components/cards.pug
new file mode 100644
index 0000000..7dbcd83
--- /dev/null
+++ b/docs/src/components/cards.pug
@@ -0,0 +1,110 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'cards'
+  - var parent = 'components'
+  - var title = 'Cards - Components - 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('cards', 'Cards')
+    include ../_layout/_ad-g.pug
+
+    p Cards are flexible content containers.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-image
+            img.img-responsive(src="../img/osx-el-capitan.jpg" alt="OS X El Capitan")
+          .card-header
+            .card-title.h5 Microsoft
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | Empower every person and every organization on the planet to achieve more.
+          .card-footer
+            a.btn.btn-primary(href="#cards") Do
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Apple
+            .card-subtitle.text-gray Hardware and software
+          .card-image
+            img.img-responsive(src="../img/osx-yosemite.jpg" alt="OS X Yosemite")
+          .card-body
+            | To make a contribution to the world by making tools for the mind that advance humankind.
+          .card-footer
+            .btn-group.btn-group-block
+              button.btn.btn-primary Buy
+              button.btn Buy
+              button.btn Buy
+      .column.col-6.col-xs-12
+        .card
+          .card-image
+            img.img-responsive(src="../img/macos-sierra-2.jpg" alt="macOS Sierra")
+          .card-header
+            button.btn.btn-primary.float-right
+              i.icon.icon-plus
+            .card-title.h5 Google I/O
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+      .column.col-6.col-xs-12
+        .card
+          .card-image
+            img.img-responsive(src="../img/osx-el-capitan-2.jpg" alt="OS X El Capitan")
+          .card-footer
+            a.btn.btn-primary(href="#cards") Buy
+            a.btn.btn-link(href="#cards") Share
+          .card-body
+            strong Surface Studio
+            | . Turn your desk into a Studio. Surface Studio is designed for the creative process.
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Apple
+            .card-subtitle.text-gray Hardware and software
+          .card-body
+            | To make a contribution to the world by making tools for the mind that advance humankind.
+          .card-image
+            img.img-responsive(src="../img/macos-sierra.jpg" alt="macOS Sierra")
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Google
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | Organize the world’s information and make it universally accessible and useful.
+          .card-image
+            img.img-responsive(src="../img/osx-yosemite-2.jpg" alt="OS X Yosemite")
+          .card-footer
+            a.btn.btn-primary(href="#cards") Search
+            a.btn.btn-link(href="#cards") Share
+
+    p
+      | Add a container element with the #[code card] class.
+      | And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes.
+      | The #[code card-image] can be placed in any position.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="card">
+            <div class="card-image">
+              <img src="img/osx-el-capitan.jpg" class="img-responsive">
+            </div>
+            <div class="card-header">
+              <div class="card-title h5">...</div>
+              <div class="card-subtitle text-gray">...</div>
+            </div>
+            <div class="card-body">
+              ...
+            </div>
+            <div class="card-footer">
+              <button class="btn btn-primary">...</button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/chips.pug b/docs/src/components/chips.pug
new file mode 100644
index 0000000..18bcf9d
--- /dev/null
+++ b/docs/src/components/chips.pug
@@ -0,0 +1,60 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'chips'
+  - var parent = 'components'
+  - var title = 'Chips - Components - 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('chips', 'Chips')
+    include ../_layout/_ad-g.pug
+
+    p Chips are complex entities in small blocks. 
+
+    .docs-demo.columns
+      .column.col-12
+        span.chip
+          | Crime
+        span.chip
+          | Drama
+        span.chip
+          | Biography
+          a.btn.btn-clear(href="#" aria-label="Close" role="button")
+        span.chip
+          | Mystery
+          a.btn.btn-clear(href="#" aria-label="Close" role="button")
+      .column.col-12
+        .chip
+          figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+          | Tony Stark
+        .chip
+          img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson")
+          | Thor Odinson
+        .chip
+          img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers")
+          | Steve Rogers
+
+    p
+      | Add a container element with the #[code chip] class.
+      | And add child text element, buttons or avatars with the #[code avatar] class.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <span class="chip">Crime</span>
+      
+          <span class="chip">
+            Biography
+            <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+          </span>
+
+          <div class="chip">
+            <img src="img/avatar-1.png" class="avatar avatar-sm">
+            Yan Zhu
+            <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/empty.pug b/docs/src/components/empty.pug
new file mode 100644
index 0000000..b23ce8c
--- /dev/null
+++ b/docs/src/components/empty.pug
@@ -0,0 +1,66 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'empty'
+  - var parent = 'components'
+  - var title = 'Empty states - Components - 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('empty', 'Empty states')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
+
+    .docs-demo.columns
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-mail
+          p.empty-title.h5 You have no new messages
+          p.empty-subtitle Click the button to start a conversation
+          .empty-action
+            button.btn.btn-primary Send a message
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-mail
+          p.empty-title.h5 You've successfully signed up
+          p.empty-subtitle Click the button to invite your friends
+          .empty-action
+            button.btn.btn-primary Invite your friends
+          .empty-action
+            button.btn.btn-link Skip
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-people
+          p.empty-title.h5 You are not following anyone
+          p.empty-subtitle Start to meet new friends
+          .empty-action.input-group.input-inline
+            input.form-input(type="text" placeholder="")
+            button.btn.btn-primary.input-group-btn Search
+
+    p
+      | An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+      | Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements.
+      | HTML structure is exampled below.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="empty">
+            <div class="empty-icon">
+              <i class="icon icon-people"></i>
+            </div>
+            <p class="empty-title h5">You have no new messages</p>
+            <p class="empty-subtitle">Click the button to start a conversation.</p>
+            <div class="empty-action">
+              <button class="btn btn-primary">Send a message</button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/menu.pug b/docs/src/components/menu.pug
new file mode 100644
index 0000000..e358056
--- /dev/null
+++ b/docs/src/components/menu.pug
@@ -0,0 +1,200 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'menu'
+  - var parent = 'components'
+  - var title = 'Menu - Components - 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('menu', 'Menu')
+    include ../_layout/_ad-g.pug
+
+    p Menus are vertical list of links or buttons for actions and navigation.
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        ul.menu
+          li.menu-item
+            .tile.tile-centered
+              .tile-icon
+                img.avatar(src="../img/avatar-4.png" alt="Avatar")
+              .tile-content
+                | Steve Rogers
+          li.divider
+          li.menu-item
+            .menu-badge
+              label.label.label-primary 2
+            a.active(href="#menus")
+              | My profile
+          li.menu-item
+            a(href="#menus")
+              | Settings
+          li.menu-item
+            a(href="#menus")
+              | Logout
+      .column.col-4.col-xs-12
+        ul.menu
+          li.divider(data-content="LINKS")
+          li.menu-item
+            a(href="#menus") Slack
+          li.menu-item
+            a(href="#menus") Hipchat
+          li.menu-item
+            a(href="#menus") Skype
+      .column.col-4.col-xs-12
+        ul.menu
+          li.menu-item
+            label.form-checkbox
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  form-checkbox
+          li.menu-item
+            label.form-radio
+              input(type="radio" checked="")
+              i.form-icon
+              |  form-radio
+          li.menu-item
+            label.form-switch
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  form-switch
+
+    p
+      | Add a container element with the #[code menu] class.
+      | And add child elements with the #[code menu-item] class.
+      | You can separate menu items with a #[code divider].
+      | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
+    p
+      | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="menu">
+            <!-- menu header text -->
+            <li class="divider" data-content="LINKS">
+            </li>
+            <!-- menu item standard -->
+            <li class="menu-item">
+              <a href="#">
+                <i class="icon icon-link"></i> Slack
+              </a>
+            </li>
+            <!-- menu item with form control -->
+            <li class="menu-item">
+              <label class="form-checkbox">
+                <input type="checkbox">
+                <i class="form-icon"></i> form-checkbox
+              </label>
+            </li>
+            <!-- menu divider -->
+            <li class="divider"></li>
+            <!-- menu item with badge -->
+            <li class="menu-item">
+              <div class="menu-badge">
+                <label class="label label-primary">2</label>
+              </div>
+              <a href="#">
+                <i class="icon icon-link"></i> Settings
+              </a>
+            </li>
+          </ul>
+            
+    +docs-subheading('menu-dropdown', 'Dropdown menu')
+
+    p The dropdown is a combination of buttons and menus.
+
+    .docs-demo.columns
+      .column.col-xs-12
+        .dropdown
+          .btn-group
+            a.btn.btn-primary dropdown button
+            a.btn.btn-primary.dropdown-toggle(tabindex="0")
+              i.icon.icon-caret
+            ul.menu
+              li.menu-item
+                a(href="#dropdowns")
+                  | Slack
+              li.menu-item
+                a(href="#dropdowns")
+                  | Hipchat
+              li.menu-item
+                a(href="#dropdowns")
+                  | Skype
+      .column.col-xs-12
+        .dropdown
+          a.btn.btn-link.dropdown-toggle(tabindex="0")
+            | dropdown button 
+            i.icon.icon-caret
+          ul.menu
+            li.menu-item
+              a(href="#dropdowns")
+                | Slack
+            li.menu-item
+              a(href="#dropdowns")
+                | Hipchat
+            li.menu-item
+              a(href="#dropdowns")
+                | Skype
+
+    p
+      | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event.
+    p
+      | Add a container element with the #[code dropdown] class.
+      | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it.
+      | You also need to add #[code tabindex] to make the buttons focusable.
+    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.
+
+    .docs-demo.columns
+      .column.col-xs-12.text-right
+        .dropdown.dropdown-right
+          a.btn.btn-primary.dropdown-toggle(tabindex="0")
+            | dropdown button 
+            i.icon.icon-caret
+          ul.menu.text-left
+            li.menu-item
+              a(href="#dropdowns") Slack
+            li.menu-item
+              a(href="#dropdowns") Hipchat
+            li.menu-item
+              a(href="#dropdowns") Skype
+
+    p
+      | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- basic dropdown button -->
+          <div class="dropdown">
+            <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+              dropdown menu <i class="icon icon-caret"></i>
+            </a>
+            <!-- menu component -->
+            <ul class="menu">
+              ...
+            </ul>
+          </div>
+
+          <!-- dropdown button group -->
+          <div class="dropdown">
+            <div class="btn-group">
+              <a href="#" class="btn">
+                dropdown button
+              </a>
+              <a href="#" class="btn dropdown-toggle" tabindex="0">
+                <i class="icon icon-caret"></i>
+              </a>
+
+              <!-- menu component -->
+              <ul class="menu">
+                ...
+              </ul>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/modals.pug b/docs/src/components/modals.pug
new file mode 100644
index 0000000..f084864
--- /dev/null
+++ b/docs/src/components/modals.pug
@@ -0,0 +1,157 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'modals'
+  - var parent = 'components'
+  - var title = 'Modals - Components - 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('modals', 'Modals')
+    include ../_layout/_ad-g.pug
+
+    p Modals are flexible dialog prompts.
+
+    .docs-demo.columns
+      .column
+        a.btn.btn-primary(href="#example-modal-1") Open Modal
+        #example-modal-1.modal
+          a.modal-overlay(href="#modals" aria-label="Close")
+          .modal-container(role="document")
+            .modal-header
+              a.btn.btn-clear.float-right(href="#modals" aria-label="Close")
+              .modal-title.h5 Modal title
+            .modal-body
+              .content
+                p This is the content inside the modal.
+                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.
+                h4 Cupcake ipsum
+                p
+                  | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+                p
+                  | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+                h4 Candy ipsum
+                p
+                  | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+                p
+                  | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+            .modal-footer
+              button.btn.btn-primary Share
+              a.btn.btn-link(href="#modals") Close
+
+    p
+      | Add a container element with the #[code modal] class.
+      | And add a real container #[code modal-container] and overlay #[code modal-overlay] inside it.
+      | You can add child elements with the #[code modal-header], #[code modal-body] and #[code modal-footer] - any or all of them.
+    p
+      | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
+      | To make a modal appear, add the #[code active] class to the #[code modal] container.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="modal active" id="modal-id">
+            <a href="#close" class="modal-overlay" aria-label="Close"></a>
+            <div class="modal-container">
+              <div class="modal-header">
+                <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
+                <div class="modal-title h5">Modal title</div>
+              </div>
+              <div class="modal-body">
+                <div class="content">
+                  <!-- content here -->
+                </div>
+              </div>
+              <div class="modal-footer">
+                ...
+              </div>
+            </div>
+          </div>
+          
+    +docs-subheading('modals-sizes', 'Modal sizes')
+
+    .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
+          a.modal-overlay(href="#modals-sizes" aria-label="Close")
+          .modal-container(role="document")
+            .modal-header
+              a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
+              .modal-title.h5 Modal title
+            .modal-body
+              .content
+                form
+                  .form-group
+                    label.form-label(for="input-example-7") Name
+                    input#input-example-7.form-input(type="text" placeholder="Name")
+                  .form-group
+                    label.form-label Gender
+                    label.form-radio
+                      input(type="radio" name="gender")
+                      i.form-icon
+                      |  Male
+                    label.form-radio
+                      input(type="radio" name="gender" checked="")
+                      i.form-icon
+                      |  Female
+            .modal-footer
+              button.btn.btn-primary Submit
+              a.btn.btn-link(href="#modals-sizes" aria-label="Close") Close
+
+    p
+      | Use the #[code modal-sm] class for a smaller modal dialog.
+      | The container max width is #[code 320px].
+
+    .docs-demo.columns
+      .column
+        a.btn.btn-primary(href="#example-modal-3") Open large size Modal
+        #example-modal-3.modal.modal-lg
+          a.modal-overlay(href="#modals-sizes" aria-label="Close")
+          .modal-container(role="document")
+            .modal-header
+              a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
+              .modal-title.h5 Modal title
+            .modal-body
+              .content
+                p This is the content inside the modal.
+                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.
+                h4 Cupcake ipsum
+                p
+                  | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+                p
+                  | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+                h4 Candy ipsum
+                p
+                  | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+                p
+                  | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+            .modal-footer
+              button.btn.btn-primary Share
+              a.btn.btn-link(href="#modals-sizes") Close
+
+    p
+      | Use the #[code modal-lg] class for a full size modal.
+      | The container max width is #[code 960px].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="modal modal-sm">
+            <a href="#close" class="modal-overlay" aria-label="Close"></a>
+            <div class="modal-container">
+              <!-- modal structure here -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/nav.pug b/docs/src/components/nav.pug
new file mode 100644
index 0000000..3ee2097
--- /dev/null
+++ b/docs/src/components/nav.pug
@@ -0,0 +1,73 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'nav'
+  - var parent = 'components'
+  - var title = 'Nav - Components - 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('nav', 'Nav')
+    include ../_layout/_ad-g.pug
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        ul.nav
+          li.nav-item
+            a(href="#nav") Elements
+          li.nav-item.active
+            a(href="#nav") Layout
+            ul.nav
+              li.nav-item
+                a(href="#nav") Flexbox grid
+              li.nav-item
+                a(href="#nav") Responsive
+              li.nav-item
+                a(href="#nav") Navbar
+              li.nav-item
+                a(href="#nav") Empty states
+          li.nav-item
+            a(href="#nav") Components
+          li.nav-item
+            a(href="#nav") Utilities
+
+    p
+      | Add a container element with the #[code nav] class.
+      | And add child elements with the #[code nav-item] class.
+      | The #[code nav-item] with the #[code active] class will be highlighted.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="nav">
+            <li class="nav-item">
+              <a href="#">Elements</a>
+            </li>
+            <li class="nav-item active">
+              <a href="#">Layout</a>
+              <ul class="nav">
+                <li class="nav-item">
+                  <a href="#">Flexbox grid</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#">Responsive</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#">Navbar</a>
+                </li>
+                <li class="nav-item">
+                  <a href="#">Empty states</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a href="#">Components</a>
+            </li>
+            <li class="nav-item">
+              <a href="#">Utilities</a>
+            </li>
+          </ul>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/pagination.pug b/docs/src/components/pagination.pug
new file mode 100644
index 0000000..c20f8b2
--- /dev/null
+++ b/docs/src/components/pagination.pug
@@ -0,0 +1,118 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'pagination'
+  - var parent = 'components'
+  - var title = 'Pagination - Components - 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('pagination', 'Pagination')
+    include ../_layout/_ad-g.pug
+
+    .docs-demo.columns
+      .column.col-xs-12
+        ul.pagination
+          li.page-item
+            a(href="#pagination") Prev
+          li.page-item
+            a(href="#pagination") 1
+          li.page-item
+            span ...
+          li.page-item
+            a(href="#pagination") 4
+          li.page-item.active
+            a(href="#pagination") 5
+          li.page-item
+            a(href="#pagination") 6
+          li.page-item
+            span ...
+          li.page-item
+            a(href="#pagination") 9
+          li.page-item
+            a(href="#pagination") Next
+      .column.col-xs-12
+        ul.pagination
+          li.page-item.disabled
+            a(href="#pagination" tabindex="-1") Prev
+          li.page-item.active
+            a(href="#pagination") 1
+          li.page-item
+            a(href="#pagination") 2
+          li.page-item
+            a(href="#pagination") 3
+          li.page-item
+            span ...
+          li.page-item
+            a(href="#pagination") 9
+          li.page-item
+            a(href="#pagination") Next
+
+    p
+      | Add a container element with the #[code pagination] class.
+      | And add child elements with the #[code page-item] class.
+      | The #[code page-item] with the #[code active] class will be highlighted.
+      | You can add the #[code disabled] class to the #[code page-item] to have unclickable page links.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="pagination">
+            <li class="page-item disabled">
+              <a href="#" tabindex="-1">Previous</a>
+            </li>
+            <li class="page-item active">
+              <a href="#">1</a>
+            </li>
+            <li class="page-item">
+              <a href="#">2</a>
+            </li>
+            <li class="page-item">
+              <a href="#">3</a>
+            </li>
+            <li class="page-item">
+              <span>...</span>
+            </li>
+            <li class="page-item">
+              <a href="#">12</a>
+            </li>
+            <li class="page-item">
+              <a href="#">Next</a>
+            </li>
+          </ul>
+
+    .docs-demo.columns
+      .column.col-12
+        ul.pagination
+          li.page-item.page-prev
+            a(href="#pagination")
+              .page-item-subtitle Previous
+              .page-item-title.h5 Getting started
+          li.page-item.page-next
+            a(href="#pagination")
+              .page-item-subtitle Next
+              .page-item-title.h5 Layout
+
+    p You could use previous and next pagination to navigate. 
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="pagination">
+            <li class="page-item page-prev">
+              <a href="#">
+                <div class="page-item-subtitle">Previous</div>
+                <div class="page-item-title h5">Getting started</div>
+              </a>
+            </li>
+            <li class="page-item page-next">
+              <a href="#">
+                <div class="page-item-subtitle">Next</div>
+                <div class="page-item-title h5">Layout</div>
+              </a>
+            </li>
+          </ul>
+          
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/panels.pug b/docs/src/components/panels.pug
new file mode 100644
index 0000000..487b8d4
--- /dev/null
+++ b/docs/src/components/panels.pug
@@ -0,0 +1,130 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'panels'
+  - var parent = 'components'
+  - var title = 'Panels - Components - 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('panels', 'Panels')
+    include ../_layout/_ad-g.pug
+
+    p Panels are flexible view container with auto-expand content section.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .panel
+          .panel-header.text-center
+            figure.avatar.avatar-lg
+              img(src="../img/avatar-2.png" alt="Avatar")
+            .panel-title.h5.mt-10 Bruce Banner
+            .panel-subtitle THE HULK
+          nav.panel-nav
+            ul.tab.tab-block
+              li.tab-item.active
+                a(href="#panels")
+                  | Profile
+              li.tab-item
+                a(href="#panels")
+                  | Files
+              li.tab-item
+                a(href="#panels")
+                  | Tasks
+          .panel-body
+            .tile.tile-centered
+              .tile-content
+                .tile-title.text-bold E-mail
+                .tile-subtitle bruce.banner@hulk.com
+              .tile-action
+                button.btn.btn-link.btn-action.btn-lg.tooltip.tooltip-left(data-tooltip="Edit E-mail")
+                  i.icon.icon-edit
+            .tile.tile-centered
+              .tile-content
+                .tile-title.text-bold Skype
+                .tile-subtitle bruce.banner
+              .tile-action
+                button.btn.btn-link.btn-action.btn-lg
+                  i.icon.icon-edit
+            .tile.tile-centered
+              .tile-content
+                .tile-title.text-bold Location
+                .tile-subtitle Dayton, Ohio
+              .tile-action
+                button.btn.btn-link.btn-action.btn-lg
+                  i.icon.icon-edit
+          .panel-footer
+            button.btn.btn-primary.btn-block Save
+      .column.col-6.col-xs-12
+        .panel
+          .panel-header
+            .panel-title.h6 Comments
+          .panel-body
+            .tile
+              .tile-icon
+                figure.avatar
+                  img(src="../img/avatar-1.png" alt="Avatar")
+              .tile-content
+                p.tile-title.text-bold Thor Odinson
+                p.tile-subtitle
+                  | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+            .tile
+              .tile-icon
+                figure.avatar
+                  img(src="../img/avatar-2.png" alt="Avatar")
+              .tile-content
+                p.tile-title.text-bold Bruce Banner
+                p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+            .tile
+              .tile-icon
+                figure.avatar(data-initial="TS")
+              .tile-content
+                p.tile-title.text-bold Tony Stark
+                p.tile-subtitle
+                  | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+            .tile
+              .tile-icon
+                figure.avatar
+                  img(src="../img/avatar-4.png" alt="Avatar")
+              .tile-content
+                p.tile-title.text-bold Steve Rogers
+                p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+            .tile
+              .tile-icon
+                figure.avatar
+                  img(src="../img/avatar-3.png" alt="Avatar")
+              .tile-content
+                p.tile-title.text-bold Natasha Romanoff
+                p.tile-subtitle
+                  | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+          .panel-footer
+            .input-group
+              input.form-input(type="text" placeholder="Hello")
+              button.btn.btn-primary.input-group-btn Send
+
+    p
+      | Add a container element with the #[code panel] class.
+      | And add child elements with the #[code panel-header], #[code panel-nav], #[code panel-body] and/or #[code panel-footer] classes.
+      | The #[code panel-body] can be auto expanded and vertically scrollable.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="panel">
+            <div class="panel-header">
+              <div class="panel-title">Comments</div>
+            </div>
+            <div class="panel-nav">
+              <!-- navigation components: tabs, breadcrumbs or pagination -->
+            </div>
+            <div class="panel-body">
+              <!-- contents -->
+            </div>
+            <div class="panel-footer">
+              <!-- buttons or inputs -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/popovers.pug b/docs/src/components/popovers.pug
new file mode 100644
index 0000000..25bfe20
--- /dev/null
+++ b/docs/src/components/popovers.pug
@@ -0,0 +1,99 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'popovers'
+  - var parent = 'components'
+  - var title = 'Popovers - Components - 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('popovers', 'Popovers')
+    include ../_layout/_ad-g.pug
+
+    p Popovers are small overlay content containers. Popovers component is built entirely in CSS.
+
+    .docs-demo.columns
+      .column.col-3.col-sm-6
+        .popover
+          a.btn.btn-primary(href="#popovers")
+            | top popover
+          .popover-container
+            .card
+              .card-header
+                .card-title.h5 Apple
+                .card-subtitle.text-gray Software and hardware
+              .card-body
+                | To make a contribution to the world by making tools for the mind that advance humankind.
+              .card-footer
+                button.btn.btn-primary Buy
+      .column.col-3.col-sm-6
+        .popover.popover-right
+          a.btn.btn-primary(href="#popovers")
+            | right popover
+          .popover-container
+            .card
+              .card-header
+                .card-title.h5 Apple
+                .card-subtitle.text-gray Software and hardware
+              .card-body
+                | To make a contribution to the world by making tools for the mind that advance humankind.
+              .card-footer
+                button.btn.btn-primary Buy
+      .column.col-3.col-sm-6
+        .popover.popover-bottom
+          a.btn.btn-primary(href="#popovers")
+            | bottom popover
+          .popover-container
+            .card
+              .card-header
+                .card-title.h5 Apple
+                .card-subtitle.text-gray Software and hardware
+              .card-body
+                | To make a contribution to the world by making tools for the mind that advance humankind.
+              .card-footer
+                button.btn.btn-primary Buy
+      .column.col-3.col-sm-6
+        .popover.popover-left
+          a.btn.btn-primary(href="#popovers")
+            | left popover
+          .popover-container
+            .card
+              .card-header
+                .card-title.h5 Apple
+                .card-subtitle.text-gray Software and hardware
+              .card-body
+                | To make a contribution to the world by making tools for the mind that advance humankind.
+              .card-footer
+                button.btn.btn-primary Buy
+
+    p
+      | Wrap an element by a container with the #[code popover] class.
+      | And add a container with the #[code popover-container] next to the element.
+      | You can use #[a(href="#cards") Cards] component inside the #[code popover-container].
+    p
+      | Also, you can add the #[code popover-right], #[code popover-bottom] or #[code popover-left] class to define the position.
+      | By default, the popovers appear above the element.
+      
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="popover popover-right">
+            <button class="btn btn-primary">right popover</button>
+            <div class="popover-container">
+              <div class="card">
+                <div class="card-header">
+                  ...
+                </div>
+                <div class="card-body">
+                  ...
+                </div>
+                <div class="card-footer">
+                  ...
+                </div>
+              </div>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/steps.pug b/docs/src/components/steps.pug
new file mode 100644
index 0000000..57f0feb
--- /dev/null
+++ b/docs/src/components/steps.pug
@@ -0,0 +1,62 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'steps'
+  - var parent = 'components'
+  - var title = 'Steps - Components - 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('steps', 'Steps')
+    include ../_layout/_ad-g.pug
+
+    p Steps are progress indicators of a sequence of task steps.
+
+    .docs-demo.columns
+      .column.col-12
+        ul.step
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip")
+          li.step-item.active
+            a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip")
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip")
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip")
+      .column.col-12
+        ul.step
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2
+          li.step-item.active
+            a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3
+          li.step-item
+            a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4
+
+    p
+      | Add a container element with the #[code step] class.
+      | And add child elements with the #[code step-item] class.
+      | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress.
+      
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="step">
+            <li class="step-item">
+              <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
+            </li>
+            <li class="step-item active">
+              <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
+            </li>
+            <li class="step-item">
+              <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
+            </li>
+            <li class="step-item">
+              <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
+            </li>
+          </ul>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/tabs.pug b/docs/src/components/tabs.pug
new file mode 100644
index 0000000..0050682
--- /dev/null
+++ b/docs/src/components/tabs.pug
@@ -0,0 +1,148 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tabs'
+  - var parent = 'components'
+  - var title = 'Tabs - Components - 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('tabs', 'Tabs')
+    include ../_layout/_ad-g.pug
+
+    p Tabs enable quick switch between different views.
+          
+    .docs-demo.columns
+      .column.col-6.col-sm-12
+        ul.tab
+          li.tab-item.active
+            a(href="#tabs")
+              | Music
+          li.tab-item
+            a(href="#tabs")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+          li.tab-item
+            a(href="#tabs")
+              | Store
+      .column.col-6.col-sm-12
+        ul.tab.tab-block
+          li.tab-item.active
+            a(href="#tabs")
+              | Music
+          li.tab-item
+            a(href="#tabs")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+
+    p
+      | Add a container element with the #[code tab] class. 
+      | And add child elements with the #[code tab-item] class. 
+      | You can add the #[code tab-block] class for a full-width tab.
+      | The #[code tab-item] or its child #{'<a>'} with the #[code active] class will be highlighted.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="tab tab-block">
+            <li class="tab-item active">
+              <a href="#">Music</a>
+            </li>
+            <li class="tab-item">
+              <a href="#" class="active">Playlists</a>
+            </li>
+            <li class="tab-item">
+              <a href="#">Radio</a>
+            </li>
+            <li class="tab-item">
+              <a href="#">Connect</a>
+            </li>
+          </ul>
+
+    .docs-demo.columns
+      .column.col-sm-12
+        ul.tab
+          li.tab-item.active
+            a.badge(href="#tabs" data-badge="999")
+              | Music
+          li.tab-item
+            a(href="#tabs")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+      .column.col-sm-12
+        ul.tab.tab-block
+          li.tab-item.active
+            a.badge(href="#tabs" data-badge="9")
+              | Music
+          li.tab-item
+            a.badge(href="#tabs" data-badge="99")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+
+    p
+      | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="tab tab-block">
+            <li class="tab-item active">
+              <a href="#" class="badge" data-badge="9">
+                Music
+              </a>
+            </li>
+          </ul>
+
+    .docs-demo.columns
+      .column.col-12
+        ul.tab
+          li.tab-item.active
+            a(href="#tabs")
+              | Music
+              span.btn.btn-clear
+          li.tab-item
+            a(href="#tabs")
+              | Playlists
+          li.tab-item
+            a(href="#tabs")
+              | Radio
+          li.tab-item
+            a(href="#tabs")
+              | Store
+          li.tab-item.tab-action
+            .input-group.input-inline
+              input.form-input.input-sm(type="text" placeholder="search")
+              button.btn.btn-primary.btn-sm.input-group-btn Search
+
+    p
+      | You could add a search box or buttons inside a tab.
+      | Add the #[code tab-action] class to the #[code tab-item].
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <ul class="tab">
+            <li class="tab-item active">
+              <a href="#">
+                Music
+              </a>
+            </li>
+            <li class="tab-item tab-action">
+              <div class="input-group input-inline">
+                <input class="form-input input-sm" type="text" placeholder="search">
+                <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+              </div>
+            </li>
+          </ul>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/tiles.pug b/docs/src/components/tiles.pug
new file mode 100644
index 0000000..25bd042
--- /dev/null
+++ b/docs/src/components/tiles.pug
@@ -0,0 +1,108 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tiles'
+  - var parent = 'components'
+  - var title = 'Tiles - Components - 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('tiles', 'Tiles')
+    include ../_layout/_ad-g.pug
+
+    p Tiles are repeatable or embeddable information blocks.
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        .tile
+          .tile-icon
+            figure.avatar.avatar-lg
+              img(src="../img/avatar-3.png" alt="Avatar")
+          .tile-content
+            p.tile-title The Avengers
+            p.tile-subtitle.text-gray
+              | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+          .tile-action
+            button.btn.btn-primary Join
+            button.btn Contact
+      .column.col-9.col-sm-12
+        .tile
+          .tile-icon
+            figure.avatar.avatar-lg
+              img(src="../img/avatar-2.png" alt="Avatar")
+          .tile-content
+            p.tile-title The S.H.I.E.L.D.
+            p.tile-subtitle.text-gray The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+            p
+              button.btn.btn-primary.btn-sm Join
+              button.btn.btn-sm Contact
+
+    p
+      | Add a container with the #[code tile] class.
+      | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes.
+      | The #[code tile-icon] and #[code tile-action] are optional.
+    p
+      | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="tile">
+            <div class="tile-icon">
+              <div class="example-tile-icon">
+                <i class="icon icon-file centered"></i>
+              </div>
+            </div>
+            <div class="tile-content">
+              <p class="tile-title">The Avengers</p>
+              <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+            </div>
+            <div class="tile-action">
+              <button class="btn btn-primary">Join</button>
+            </div>
+          </div>
+
+    +docs-subheading('tiles-compact', 'Compact tiles')
+
+    p
+      | There is compact version of Tiles component, which is often used as contact and file info blocks.
+    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.
+
+    .docs-demo.columns
+      .column.col-6.col-md-9.col-xs-12
+        .tile.tile-centered
+          .tile-icon
+            .example-tile-icon
+              i.icon.icon-mail.centered
+          .tile-content
+            .tile-title spectre-docs.pdf
+            .tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017
+          .tile-action
+            button.btn.btn-link.btn-action
+              i.icon.icon-more-vert
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="tile tile-centered">
+            <div class="tile-icon">
+              <div class="example-tile-icon">
+                <i class="icon icon-file centered"></i>
+              </div>
+            </div>
+            <div class="tile-content">
+              <div class="tile-title">spectre-docs.pdf</div>
+              <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
+            </div>
+            <div class="tile-action">
+              <button class="btn btn-link">
+                <i class="icon icon-more-vert"></i>
+              </button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/toasts.pug b/docs/src/components/toasts.pug
new file mode 100644
index 0000000..d1d9bb9
--- /dev/null
+++ b/docs/src/components/toasts.pug
@@ -0,0 +1,65 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'toasts'
+  - var parent = 'components'
+  - var title = 'Toasts - Components - 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('toasts', 'Toasts')
+    include ../_layout/_ad-g.pug
+
+    p Toasts are used to show alert or information to users.
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        .toast
+          button.btn.btn-clear.float-right
+          h6 Toast Title
+          | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      .column.col-9.col-sm-12
+        .toast.toast-primary
+          button.btn.btn-clear.float-right
+          | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+    p
+      | Add a container element with the #[code toast] class.
+      | You can add any text within the container, and even icons. 
+      | You may also add a close button with the #[code btn-clear] class if you need.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="toast">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </div>
+
+    .docs-demo.columns
+      .column.col-sm-12
+        .toast.toast-success
+          button.btn.btn-clear.float-right
+          | Toast success
+      .column.col-sm-12
+        .toast.toast-warning
+          button.btn.btn-clear.float-right
+          | Toast warning
+      .column.col-sm-12
+        .toast.toast-error
+          button.btn.btn-clear.float-right
+          | Toast error
+
+    p
+      | And you can add the #[code toast-primary], #[code toast-success], #[code toast-warning] or #[code toast-error] class for additional toast colors.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="toast toast-primary">
+            <button class="btn btn-clear float-right"></button>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/components/tooltips.pug b/docs/src/components/tooltips.pug
new file mode 100644
index 0000000..7fdafde
--- /dev/null
+++ b/docs/src/components/tooltips.pug
@@ -0,0 +1,40 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tooltips'
+  - var parent = 'components'
+  - var title = 'Tooltips - Components - 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('tooltips', 'Tooltips')
+    include ../_layout/_ad-g.pug
+
+    p Tooltips provide context information labels that appear on hover and focus.
+
+    .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
+        button.btn.btn-primary.tooltip.tooltip-right(data-tooltip="Right Tooltip Text") right tooltip
+      .column.col-xs-12
+        button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip
+      .column.col-xs-12
+        button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text") left tooltip
+
+    p Tooltips component is built entirely in CSS.
+    p
+      | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements.
+    p
+      | And add the #[code tooltip-right], #[code tooltip-bottom] or #[code tooltip-left] class to define the position of a tooltip.
+      | By default, the tooltip appears above the element.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+          <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+    
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file