Update the Docs completely

8 files changed, 1694 insertions, 0 deletions

diff --git a/docs/src/elements/buttons.pug b/docs/src/elements/buttons.pug
new file mode 100644
index 0000000..04e3101
--- /dev/null
+++ b/docs/src/elements/buttons.pug
@@ -0,0 +1,194 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'buttons'
+  - var parent = 'elements'
+  - var title = 'Buttons - Elements - 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('buttons', 'Buttons')
+    include ../_layout/_ad-g.pug
+
+    p Buttons include simple button styles for actions in different types and sizes.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn default button
+        button.btn.btn-primary primary button
+        button.btn.btn-link link button
+
+    p
+      | Add the #[code btn] class to #{'<a>'}, #{'<input>'} or #{'<button>'} elements for a default button. 
+      | There are classes #[code btn-primary] and #[code btn-link] for predefined primary and link buttons.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn">default button</button>
+          <button class="btn btn-primary">primary button</button>
+          <button class="btn btn-link">link button</button>
+
+    +docs-subheading('buttons-colors', 'Button colors')
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.btn-success success button
+        button.btn.btn-error error button
+
+    p
+      | Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color.
+      | If you need more button colors, please use 
+      a(href="getting-started.html#variables-buttons") button mixins
+      |  to create your own button color variants.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-success">success button</button>
+          <button class="btn btn-error">error button</button>
+
+    +docs-subheading('buttons-sizes', 'Button sizes')
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.btn-primary.btn-lg
+          | large 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary.btn-lg large button
+      .column.col-12
+        button.btn.btn-primary
+          | normal 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary normal button
+      .column.col-12
+        button.btn.btn-primary.btn-sm
+          | small 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary.btn-sm small button
+
+
+    p
+      | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. 
+      | Also, you can add the #[code btn-block] class for a full-width button.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-lg">large button</button>
+          <button class="btn btn-sm">small button</button>
+
+          <button class="btn btn-block">block button</button>
+
+          <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+          <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+          <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+
+    p
+      | Please note that you could use the #[code btn-action] class for a square button, or add another #[code s-circle] class for a round button, which is often used as a Float Action Button (FAB).
+
+    .docs-demo.columns
+      .column.col-xs-12
+        button.btn.btn-action.btn-primary.btn-lg
+          i.icon.icon-menu
+        button.btn.btn-action.btn-primary
+          i.icon.icon-menu
+        button.btn.btn-action.btn-primary.btn-sm
+          i.icon.icon-menu
+      .column.col-xs-12
+        button.btn.btn-action.btn-primary.btn-lg.s-circle
+          i.icon.icon-arrow-up
+        button.btn.btn-action.btn-primary.s-circle
+          i.icon.icon-arrow-up
+        button.btn.btn-action.btn-primary.btn-sm.s-circle
+          i.icon.icon-arrow-up
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+          <button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>
+
+    +docs-subheading('buttons-states', 'Button states')
+
+    p
+      | Add the #[code active] class for active button state style.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.active default active
+        button.btn.btn-primary.active primary active
+        button.btn.btn-link.active link active
+
+    p
+      | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.disabled(tabindex="-1") default disabled
+        button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
+        button.btn.btn-link(disabled="" tabindex="-1") link disabled
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- buttons with disabled state -->
+          <button class="btn disabled" tabindex="-1">disabled button</button>
+          <button class="btn" disabled tabindex="-1">disabled button</button>
+
+    p
+      | A button with the #[code loading] class can show loading indicator.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.loading default button
+        button.btn.btn-primary.loading primary button
+        button.btn.btn-link.loading link button
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- buttons with loading state -->
+          <button class="btn loading">button</button>
+          <button class="btn btn-primary loading">primary button</button>
+
+    +docs-subheading('buttons-groups', 'Button groups')
+
+    .docs-demo.columns
+      .column.col-6.col-md-12
+        .btn-group
+          button.btn first button
+          button.btn second button
+          button.btn third button
+      .column.col-6.col-md-12
+        .btn-group.btn-group-block
+          button.btn.btn-primary first button
+          button.btn.btn-primary second button
+          button.btn.btn-primary third button
+      .column.col-6.col-md-12
+        .btn-group
+          button.btn.btn-sm.active first button
+          button.btn.btn-sm second button
+          button.btn.btn-sm third button
+      .column.col-6.col-md-12
+        .btn-group.btn-group-block
+          button.btn.btn-primary.btn-sm.active first button
+          button.btn.btn-primary.btn-sm second button
+          button.btn.btn-primary.btn-sm third button
+        
+    p
+      | If you want to use buttons as a group, add the #[code btn-group] class to the container.
+      | You can add the #[code btn-group-block] class for a full-width button group.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="btn-group btn-group-block">
+            <button class="btn">first button</button>
+            <button class="btn">second button</button>
+            <button class="btn">third button</button>
+          </div> 
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/elements/code.pug b/docs/src/elements/code.pug
new file mode 100644
index 0000000..894b617
--- /dev/null
+++ b/docs/src/elements/code.pug
@@ -0,0 +1,38 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'code'
+  - var parent = 'elements'
+  - var title = 'Code - Elements - 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('code', 'Code')
+    include ../_layout/_ad-g.pug
+
+    p Code is used for styling inline and multiline code snippets.
+    p
+      | For inline code, you can use the #{'<code>'} element. 
+      | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
+      | The #[code data-lang] attribute is rendered as the language name in the top right.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- code snippets -->
+          <button class="btn">
+            Submit
+          </button>
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+          &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+            Submit
+          &lt;<span class="tag">/button</span>&gt;
+          </code></pre>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/elements/forms.pug b/docs/src/elements/forms.pug
new file mode 100644
index 0000000..5532860
--- /dev/null
+++ b/docs/src/elements/forms.pug
@@ -0,0 +1,713 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'forms'
+  - var parent = 'elements'
+  - var title = 'Forms - Elements - 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('forms', 'Forms')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          label.form-label(for="input-example-1") Name
+          input#input-example-1.form-input(type="text" placeholder="Name")
+        .form-group
+          label.form-label(for="input-example-2") Email
+          input#input-example-2.form-input(type="email" placeholder="Email")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form input control -->
+          <div class="form-group">
+            <label class="form-label" for="input-example-1">Name</label>
+            <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+          </div>
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          label.form-label(for="input-example-3") Message
+          textarea#input-example-3.form-input(placeholder="Textarea" rows="3")
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form textarea control -->
+          <div class="form-group">
+            <label class="form-label" for="input-example-3">Message</label>
+            <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+          </div>
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          select.form-select
+            option Choose an option
+            option Slack
+            option Skype
+            option Hipchat
+        .form-group
+          select.form-select(multiple="")
+            option Choose an option
+            option Slack
+            option Skype
+            option Hipchat
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form select control -->
+          <div class="form-group">
+            <select class="form-select">
+              <option>Choose an option</option>
+              <option>Slack</option>
+              <option>Skype</option>
+              <option>Hipchat</option>
+            </select>
+          </div>
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        form
+          .form-group
+            label.form-label Gender
+            label.form-radio
+              input(type="radio" name="gender" checked="")
+              i.form-icon
+              |  Male
+            label.form-radio
+              input(type="radio" name="gender")
+              i.form-icon
+              |  Female
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form radio control -->
+          <div class="form-group">
+            <label class="form-label">Gender</label>
+            <label class="form-radio">
+              <input type="radio" name="gender" checked>
+              <i class="form-icon"></i> Male
+            </label>
+            <label class="form-radio">
+              <input type="radio" name="gender">
+              <i class="form-icon"></i> Female
+            </label>
+          </div>
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          label.form-switch
+            input(type="checkbox")
+            i.form-icon
+            |  Send me emails with news and tips
+        .form-group
+          label.form-switch
+            input(type="checkbox" checked="")
+            i.form-icon
+            |  Send me emails with news and tips
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form switch control -->
+          <div class="form-group">
+            <label class="form-switch">
+              <input type="checkbox">
+              <i class="form-icon"></i> Send me emails with news and tips
+            </label>
+          </div>
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .form-group
+          label.form-checkbox
+            input(type="checkbox")
+            i.form-icon
+            |  Remember me
+        .form-group
+          label.form-checkbox
+            input(type="checkbox" checked="")
+            i.form-icon
+            |  Remember me
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form checkbox control -->
+          <div class="form-group">
+            <label class="form-checkbox">
+              <input type="checkbox">
+              <i class="form-icon"></i> Remember me
+            </label>
+          </div>
+
+    .docs-demo.columns
+      .column
+        .form-group
+          label.form-checkbox
+            input#docs-demo-checkbox(type="checkbox")
+            i.form-icon
+            |  Select all
+
+    script.
+      document.getElementById("docs-demo-checkbox").indeterminate = true;
+
+    p
+      | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true].
+
+    +docs-subheading('forms-inline', 'Inline forms')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        form
+          .form-group
+            label.form-radio.form-inline
+              input(type="radio" name="gender" checked="")
+              i.form-icon
+              |  Male
+            label.form-radio.form-inline
+              input(type="radio" name="gender")
+              i.form-icon
+              |  Female
+          .form-group
+            label.form-checkbox.form-inline
+              input(type="checkbox")
+              i.form-icon
+              |  Checkbox 1
+            label.form-checkbox.form-inline
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  Checkbox 2
+
+    p
+      | You can add the #[code form-inline] class to the form components to make them inline in one row.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="form-group">
+            <label class="form-radio form-inline">
+              <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+            </label>
+            <label class="form-radio form-inline">
+              <input type="radio" name="gender"><i class="form-icon"></i> Female
+            </label>
+          </div>
+
+          <div class="form-group">
+            <label class="form-checkbox form-inline">
+              <input type="checkbox"><i class="form-icon"></i> Checkbox 1
+            </label>
+            <label class="form-checkbox form-inline">
+              <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
+            </label>
+          </div>
+
+    +docs-subheading('forms-horizontal', 'Horizontal forms')
+
+    p
+      | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container.
+      | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        form.form-horizontal(action="#forms")
+          .form-group
+            .col-3.col-sm-12
+              label.form-label(for="input-example-4") Name
+            .col-9.col-sm-12
+              input#input-example-4.form-input(type="text" placeholder="Name")
+          .form-group
+            .col-3.col-sm-12
+              label.form-label(for="input-example-5") Email
+            .col-9.col-sm-12
+              input#input-example-5.form-input(type="email" placeholder="Email")
+          .form-group
+            .col-3.col-sm-12
+              label.form-label Gender
+            .col-9.col-sm-12
+              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
+          .form-group
+            .col-3.col-sm-12
+              label.form-label Source
+            .col-9.col-sm-12
+              select.form-select(multiple="")
+                option Slack
+                option Skype
+                option Hipchat
+          .form-group
+            .col-9.col-sm-12.col-ml-auto
+              label.form-switch
+                input(type="checkbox")
+                i.form-icon
+                |  Send me emails with news and tips
+          .form-group
+            .col-3.col-sm-12
+              label.form-label(for="input-example-6") Message
+            .col-9.col-sm-12
+              textarea#input-example-6.form-input(placeholder="Textarea" rows="3")
+          .form-group
+            .col-9.col-sm-12.col-ml-auto
+              label.form-checkbox
+                input(type="checkbox")
+                i.form-icon
+                |  Remember me
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <form class="form-horizontal">
+            <div class="form-group">
+              <div class="col-3 col-sm-12">
+                <label class="form-label" for="input-example-1">Name</label>
+              </div>
+              <div class="col-9 col-sm-12">
+                <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+              </div>
+            </div>
+            <!-- form structure -->
+          </form>
+
+    +docs-subheading('forms-sizes', 'Form sizes')
+
+    p
+      | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        label.form-label.label-sm Label
+      .column.col-4.col-xs-12
+        input.form-input.input-sm(type="text" placeholder="Name")
+      .column.col-4.col-xs-12
+        select.form-select.select-sm
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+      .column.col-4.col-xs-12
+        label.form-label.label-lg Label
+      .column.col-4.col-xs-12
+        input.form-input.input-lg(type="text" placeholder="Name")
+      .column.col-4.col-xs-12
+        select.form-select.select-lg
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+
+    p
+      | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes.
+
+    +docs-subheading('forms-icons', 'Form icons')
+
+    p
+      | Spectre Form components has 
+      a(href="#icons") Spectre Icons
+      |  support.
+    p
+      | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element.
+      | And add the icon with #[code form-icon] class next to the #{'<input>'}.
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        .has-icon-left
+          input.form-input.input-sm(type="text" placeholder="Name")
+          i.form-icon.icon.icon-arrow-right
+      .column.col-4.col-xs-12
+        .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet")
+          input.form-input(type="text" placeholder="Name")
+          i.form-icon.icon.icon-arrow-right
+      .column.col-4.col-xs-12
+        .has-icon-left
+          input.form-input.input-lg(type="text" placeholder="Name")
+          i.form-icon.icon.icon-arrow-right
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input.input-sm(type="text" placeholder="Name")
+          i.form-icon.icon.icon-check
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input(type="text" placeholder="Name")
+          i.form-icon.icon.icon-check
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input.input-lg(type="text" placeholder="Name")
+          i.form-icon.icon.icon-check
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form input with Spectre icon -->
+          <div class="has-icon-left">
+            <input type="text" class="form-input" placeholder="...">
+            <i class="form-icon icon icon-check"></i>
+          </div>
+
+    p
+      | You can use the #[code loading] class for loading or posting state.
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input.input-sm(type="text" placeholder="Name")
+          i.form-icon.loading
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input(type="text" placeholder="Name")
+          i.form-icon.loading
+      .column.col-4.col-xs-12
+        .has-icon-right
+          input.form-input.input-lg(type="text" placeholder="Name")
+          i.form-icon.loading
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- form input with loading icon -->
+          <div class="has-icon-right">
+            <input type="text" class="form-input" placeholder="...">
+            <i class="form-icon loading"></i>
+          </div>
+
+    +docs-subheading('forms-input', 'Input types')
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        form.form-horizontal(action="#forms")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-8") Email
+            .col-9
+              input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-9") URL
+            .col-9
+              input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-10") Search
+            .col-9
+              input#input-example-10.form-input(type="search" placeholder="Search")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-11") Tel
+            .col-9
+              input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-12") Password
+            .col-9
+              input#input-example-12.form-input(type="password" placeholder="Password" value="123456789")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-13") Number
+            .col-9
+              input#input-example-13.form-input(type="number" placeholder="00" value="66")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-14") Date
+            .col-9
+              input#input-example-14.form-input(type="date" value="2016-12-31")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-15") Color
+            .col-9
+              input#input-example-15.form-input(type="color" value="#5755d9")
+          .form-group
+            .col-3
+              label.form-label(for="input-example-16") File
+            .col-9
+              input#input-example-16.form-input(type="file")
+
+    +docs-subheading('forms-input-groups', 'Input groups')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .input-group
+          input.form-input.input-sm(type="text" placeholder="username")
+          select.form-select.select-sm
+            option Slack
+            option Skype
+            option Hipchat
+      .column.col-6.col-xs-12
+        .input-group
+          span.input-group-addon.addon-sm slack.com/
+          input.form-input.input-sm(type="text" placeholder="site name")
+          button.btn.btn-primary.input-group-btn.btn-sm Submit
+      .column.col-6.col-xs-12
+        .input-group
+          input.form-input(type="text" placeholder="username")
+          select.form-select
+            option Slack
+            option Skype
+            option Hipchat
+      .column.col-6.col-xs-12
+        .input-group
+          span.input-group-addon slack.com/
+          input.form-input(type="text" placeholder="site name")
+          button.btn.btn-primary.input-group-btn Submit
+      .column.col-6.col-xs-12
+        .input-group
+          label.form-switch
+            input(type="checkbox")
+            i.form-icon
+          input.form-input(type="text" placeholder="name")
+      .column.col-6.col-xs-12
+        .input-group
+          label.form-checkbox
+            input(type="checkbox")
+            i.form-icon
+          input.form-input(type="text" placeholder="name")
+      .column.col-6.col-xs-12
+        .input-group
+          input.form-input.input-lg(type="text" placeholder="username")
+          select.form-select.select-lg
+            option Slack
+            option Skype
+            option Hipchat
+      .column.col-6.col-xs-12
+        .input-group
+          span.input-group-addon.addon-lg slack.com/
+          input.form-input.input-lg(type="text" placeholder="site name")
+          button.btn.btn-primary.input-group-btn.btn-lg Submit
+
+    p
+      | If you want to attach text and button along with an input, add the #[code input-group] class to the input container.
+      | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- normal input group -->
+          <div class="input-group">
+            <span class="input-group-addon">...</span>
+            <input type="text" class="form-input" placeholder="...">
+          </div>
+
+          <!-- large input group -->
+          <div class="input-group">
+            <span class="input-group-addon addon-lg">...</span>
+            <input type="text" class="form-input input-lg" placeholder="...">
+          </div>
+
+          <!-- normal input group with button -->
+          <div class="input-group">
+            <span class="input-group-addon">...</span>
+            <input type="text" class="form-input" placeholder="...">
+            <button class="btn btn-primary input-group-btn">Submit</button>
+          </div>
+
+    +docs-subheading('forms-validation', 'Form validation styles')
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        fieldset
+          legend Input
+          .form-group
+            label.form-label(for="input-example-17") Name
+            input#input-example-17.form-input.is-success(type="text" placeholder="Name")
+            p.form-input-hint The name is valid.
+          .form-group.has-error
+            label.form-label(for="input-example-18") Password
+            input#input-example-18.form-input(type="password" placeholder="Password")
+            p.form-input-hint Passwords must have at least 8 characters.
+        fieldset
+          legend Select
+          .form-group
+            select.form-select.is-error
+              option Choose an option
+              option Slack
+              option Skype
+              option Hipchat
+            p.form-input-hint The option is invalid.
+          .form-group.has-success
+            select.form-select
+              option Choose an option
+              option Slack
+              option Skype
+              option Hipchat
+            p.form-input-hint The option is available.
+        fieldset
+          legend Checkbox, Radio and Switch (Error state only)
+          .form-group
+            label.form-checkbox.is-error
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  I'm not a robot.
+          .form-group.has-error
+            label.form-radio
+              input(type="radio" name="gender" checked="")
+              i.form-icon
+              |  Male
+            label.form-radio
+              input(type="radio" name="gender")
+              i.form-icon
+              |  Female
+          .form-group
+            label.form-switch.is-error
+              input(type="checkbox" checked="")
+              i.form-icon
+              |  Send me emails with news and tips
+
+    p
+      | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
+      | Use the #[code form-input-hint] class to provide form validation success and error messages.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <form>
+            <!-- form validation class: has-success -->
+            <div class="form-group has-success">
+              <label class="form-label" for="input-example-1">Name</label>
+              <input class="form-input" type="text" id="input-example-1" placeholder="...">
+              <p class="form-input-hint">The name is invalid.</p>
+            </div>
+
+            <!-- form validation class: is-success -->
+            <div class="form-group">
+              <label class="form-label" for="input-example-1">Name</label>
+              <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+              <p class="form-input-hint">The name is invalid.</p>
+            </div>
+
+            <!-- form validation example for checkbox, radio and switch -->
+            <div class="form-group">
+              <label class="form-checkbox is-error">
+                <input type="checkbox">
+                <i class="form-icon"></i> Remember me
+              </label>
+            </div>
+          </form>
+
+    .docs-demo.columns
+      .column.col-9.col-sm-12
+        .form-group
+          label.form-label(for="input-example-21") Email
+          input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$")
+        .form-group
+          label.form-label(for="input-example-22") Password
+          input#input-example-22.form-input(type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$")
+
+    p
+      | You can use input #[code pattern] attribute to validate the value as well.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- pattern validation example for Email -->
+          <input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">
+
+          <!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
+          <input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
+
+    +docs-subheading('forms-disabled', 'Form disabled styles')
+
+    p 
+      | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        form(action="#forms")
+          fieldset(disabled="")
+            .form-group
+              label.form-label(for="input-example-19") Name
+              input#input-example-19.form-input(type="text" placeholder="Name")
+            .form-group
+              label.form-label Gender
+              label.form-radio
+                input(type="radio" name="gender" disabled="")
+                i.form-icon
+                |  Male
+              label.form-radio
+                input(type="radio" name="gender" disabled="")
+                i.form-icon
+                |  Female
+            .form-group
+              select.form-select(disabled="")
+                option Choose an option
+                option Slack
+                option Skype
+                option Hipchat
+            .form-group
+              label.form-switch
+                input(type="checkbox" disabled="")
+                i.form-icon
+                |  Send me emails with news and tips
+            .form-group
+              label.form-label(for="input-example-20") Message
+              textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="")
+            .form-group
+              label.form-checkbox
+                input(type="checkbox" disabled="")
+                i.form-icon
+                |  Remember me
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <form action="#forms">
+            <fieldset disabled>
+              <div class="form-group">
+                <label class="form-label" for="input-example-19">Name</label>
+                <input class="form-input" type="text" id="input-example-19" placeholder="Name">
+              </div>
+              <div class="form-group">
+                <label class="form-label">Gender</label>
+                <label class="form-radio">
+                  <input type="radio" name="gender" disabled>
+                  <i class="form-icon"></i> Male
+                </label>
+                <label class="form-radio">
+                  <input type="radio" name="gender" disabled>
+                  <i class="form-icon"></i> Female
+                </label>
+              </div>
+              <div class="form-group">
+                <select class="form-select" disabled>
+                  <option>Choose an option</option>
+                  <option>Slack</option>
+                  <option>Skype</option>
+                  <option>Hipchat</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label class="form-switch">
+                  <input type="checkbox" disabled>
+                  <i class="form-icon"></i> Send me emails with news and tips
+                </label>
+              </div>
+              <div class="form-group">
+                <label class="form-label" for="input-example-20">Message</label>
+                <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
+              </div>
+              <div class="form-group">
+                <label class="form-checkbox">
+                  <input type="checkbox" disabled>
+                  <i class="form-icon"></i> Remember me
+                </label>
+              </div>
+            </fieldset>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/elements/icons.pug b/docs/src/elements/icons.pug
new file mode 100644
index 0000000..1430fe4
--- /dev/null
+++ b/docs/src/elements/icons.pug
@@ -0,0 +1,213 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'icons'
+  - var parent = 'elements'
+  - var title = 'Icons - Elements - 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('icons', 'Icons')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Icons are single-element, responsive and pure CSS icons.
+      | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{'<head>'} to have these CSS icons.
+
+    +docs-subheading('icons-navigation', 'Navigation icons')
+
+    .columns
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-arrow-up
+        p icon-arrow-up
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-arrow-right
+        p icon-arrow-right
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-arrow-down
+        p icon-arrow-down
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-arrow-left
+        p icon-arrow-left
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-upward
+        p icon-upward
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-forward
+        p icon-forward
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-downward
+        p icon-downward
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-back
+        p icon-back
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-caret
+        p icon-caret
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-menu
+        p icon-menu
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-apps
+        p icon-apps
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-more-horiz
+        p icon-more-horiz
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-more-vert
+        p icon-more-vert
+
+    +docs-subheading('icons-action', 'Action icons')
+
+    .columns
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-resize-horiz
+        p icon-resize-horiz
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-resize-vert
+        p icon-resize-vert
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-plus
+        p icon-plus
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-minus
+        p icon-minus
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-cross
+        p icon-cross
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-check
+        p icon-check
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-stop
+        p icon-stop
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-shutdown
+        p icon-shutdown
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-refresh
+        p icon-refresh
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-search
+        p icon-search
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-flag
+        p icon-flag
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-bookmark
+        p icon-bookmark
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-edit
+        p icon-edit
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-delete
+        p icon-delete
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-share
+        p icon-share
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-download
+        p icon-download
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-upload
+        p icon-upload
+
+    +docs-subheading('icons-object', 'Object icons')
+
+    .columns
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-mail
+        p icon-mail
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-people
+        p icon-people
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-message
+        p icon-message
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-photo
+        p icon-photo
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-time
+        p icon-time
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-location
+        p icon-location
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-link
+        p icon-link
+      .column.col-3.col-md-6
+        button.btn.btn-primary.btn-action.btn-lg
+          i.icon.icon-emoji
+        p icon-emoji
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <i class="icon icon-menu"></i>
+
+    +docs-subheading('icons-sizes', 'Icon sizes')
+
+    p
+      | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
+      | You can set #[code font-size] to have different icon sizes.
+
+    .columns
+      .column.col-3.col-md-6
+        p
+          i.icon.icon-2x.icon-mail
+        p icon-2x (32px)
+      .column.col-3.col-md-6
+        p
+          i.icon.icon-3x.icon-mail
+        p icon-3x (48px)
+      .column.col-3.col-md-6
+        p
+          i.icon.icon-4x.icon-mail
+        p icon-4x (64px)
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <i class="icon icon-2x icon-mail"></i>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/elements/labels.pug b/docs/src/elements/labels.pug
new file mode 100644
index 0000000..7232d42
--- /dev/null
+++ b/docs/src/elements/labels.pug
@@ -0,0 +1,51 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'labels'
+  - var parent = 'elements'
+  - var title = 'Labels - Elements - 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('labels', 'Labels')
+    include ../_layout/_ad-g.pug
+
+    p Labels are formatted text tags for highlighted, informative information.
+
+    .docs-demo.columns
+      .column
+        span.label.mr-1 default label
+        span.label.label-primary.mr-1 primary label
+        span.label.label-secondary.mr-1 secondary label
+        span.label.label-success.mr-1 success label
+        span.label.label-warning.mr-1 warning label
+        span.label.label-error error label
+      
+    p
+      | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements.
+      | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- normal labels -->
+          <span class="label">default label</span>
+          <span class="label label-primary">primary label</span>
+
+    .docs-demo.columns
+      .column
+        span.label.label-rounded.mr-1 default label
+        span.label.label-rounded.label-primary primary label
+
+    p
+      | Add the #[code label-rounded] class to have rounded labels.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- rounded labels -->
+          <span class="label label-rounded label-primary">primary label</span>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/elements/media.pug b/docs/src/elements/media.pug
new file mode 100644
index 0000000..05cd719
--- /dev/null
+++ b/docs/src/elements/media.pug
@@ -0,0 +1,89 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'media'
+  - var parent = 'elements'
+  - var title = 'Media - Elements - 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('media', 'Media')
+    include ../_layout/_ad-g.pug
+
+    p Media includes responsive images, figures and video classes.
+
+    +docs-subheading('media-images', 'Images')
+
+    p
+      | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes.
+
+    .columns
+      .column.col-12
+        img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
+
+    p
+      | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{'<img>'} or #{'<video>'} elements. The media will crop itself to fit inside the element (and you don't need another container).
+      | This feature can replace the classic background image trick. Microsoft Edge support 
+      a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank") is shipped
+      |   with Build Number 16299+.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        figure.figure
+          img.img-fit-contain.rounded(src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
+          figcaption.figure-caption.text-center img-fit-contain
+      .column.col-6.col-xs-12
+        figure.figure
+          img.img-fit-cover.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
+          figcaption.figure-caption.text-center img-fit-cover
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+          <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+          <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
+    +docs-subheading('media-figure', 'Figure')
+
+    p
+      | You can use the element #{'<figure>'} for an image with a caption.
+      | Add the #[code figure] class to #{'<figure>'} element.
+      | The images with the #[code img-responsive] class will be responsive.
+      | And the included class #[code figure-caption] will provide basic style for caption.
+      | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
+
+    .docs-demo.columns
+      .column.col-12
+        figure.figure
+          img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+          figcaption.figure-caption.text-center macOS Yosemite wallpaper
+
+    +docs-subheading('media-video', 'Video')
+
+    p
+      | For responsive video, add a container with the #[code video-responsive] class. 
+      | Insert any YouTube, Youku or other iframe/embed video inside the container. 
+      | The ratio is 16:9 by default.
+      | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
+
+    .docs-demo.columns
+      .column.col-12
+        .video-responsive
+          iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
+
+    p
+      | For responsive #{'<video>'} elements, you can add the #[code video-responsive] class directly.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="video-responsive video-responsive-4-3">
+            <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+          </div>
+
+          <video class="video-responsive" src="...">...</video>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug
new file mode 100644
index 0000000..3e087d9
--- /dev/null
+++ b/docs/src/elements/tables.pug
@@ -0,0 +1,123 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tables'
+  - var parent = 'elements'
+  - var title = 'Tables - Elements - 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('tables', 'Tables')
+    include ../_layout/_ad-g.pug
+
+    p Tables include default styles for tables and data sets.
+
+    .docs-demo.columns
+      .column.col-12
+        table.table.table-striped
+          thead
+            tr
+              th Name
+              th Genre
+              th Release date
+          tbody
+            tr
+              td The Shawshank Redemption
+              td Crime, Drama
+              td 14 October 1994
+            tr
+              td The Godfather
+              td Crime, Drama
+              td 24 March 1972
+            tr
+              td Schindler's List
+              td Biography, Drama, History
+              td 4 February 1994
+            tr
+              td Se7en
+              td Crime, Drama, Mystery
+              td 22 September 1995
+
+    p
+      | Add the #[code table] class to any #{'<table>'} element. 
+      | The class will add padding, border and emphasized table header. 
+      | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style.
+      | For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
+    p
+      | Use the #[code active] class to make #{'<tr>'} element highlighted.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table table-striped table-hover">
+            <thead>
+              <tr>
+                <th>name</th>
+                <th>genre</th>
+                <th>release date</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="active">
+                <td>The Shawshank Redemption</td>
+                <td>Crime, Drama</td>
+                <td>14 October 1994</td>
+              </tr>
+            </tbody>
+          </table>
+
+
+    .docs-demo.columns
+      .column.col-12
+        table.table.table-striped.table-scroll
+          thead
+            tr
+              th Name
+              th Rating
+              th Duration
+              th Genre
+              th Release date
+              th Director
+          tbody
+            tr
+              td The Shawshank Redemption
+              td R
+              td 2h 22min
+              td Crime, Drama
+              td 14 October 1994
+              td Frank Darabont
+            tr
+              td The Godfather
+              td R
+              td 2h 55min
+              td Crime, Drama
+              td 24 March 1972
+              td Francis Ford Coppola
+            tr
+              td Schindler's List
+              td R
+              td 3h 15min
+              td Biography, Drama, History
+              td 4 February 1994
+              td Steven Spielberg
+            tr
+              td Se7en
+              td R
+              td 2h 7min
+              td Crime, Drama, Mystery
+              td 22 September 1995
+              td David Fincher
+
+    p
+      | Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table table-striped table-scroll">
+            ...
+          </table>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/elements/typography.pug b/docs/src/elements/typography.pug
new file mode 100644
index 0000000..53e47f1
--- /dev/null
+++ b/docs/src/elements/typography.pug
@@ -0,0 +1,273 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'typography'
+  - var parent = 'elements'
+  - var title = 'Typography - Elements - 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('typography', 'Typography')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
+
+    +docs-subheading('typography-headings', 'Headings')
+
+    .docs-demo.columns
+      .column.col-12
+        h1
+          | H1 Heading 
+          small.label 40px
+      .column.col-12
+        h2
+          | H2 Heading 
+          small.label 32px
+      .column.col-12
+        h3
+          | H3 Heading 
+          small.label 28px
+      .column.col-12
+        h4
+          | H4 Heading 
+          small.label 24px
+      .column.col-12
+        h5
+          | H5 Heading 
+          small.label 20px
+      .column.col-12
+        h6
+          | H6 Heading 
+          small.label 16px
+
+    //- headings
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <h1>H1 Heading</h1>
+          <h1>H1 Heading <small class="label">40px</small></h1>
+          <span class="h1">H1 Heading</span>
+
+    +docs-subheading('typography-paragraphs', 'Paragraphs')
+
+    p
+      | Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') 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.
+
+    //- paragraphs
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <p>Lorem ipsum dolor sit amet, ...</p>
+          <p>...</p>
+
+    +docs-subheading('typography-semantic-text', 'Semantic text elements')
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        abbr(title='Internationalization') I18N
+        code.ml-2 abbr
+      .column.col-6.col-xs-12
+        strong Bold
+        code.ml-2 strong
+        code.ml-2 b
+      .column.col-6.col-xs-12
+        cite Citation
+        code.ml-2 cite
+      .column.col-6.col-xs-12
+        code Hello World!
+        code.ml-2 code
+      .column.col-6.col-xs-12
+        del Deleted
+        code.ml-2 del
+      .column.col-6.col-xs-12
+        em Emphasis
+        code.ml-2 em
+      .column.col-6.col-xs-12
+        i Italic
+        code.ml-2 i
+      .column.col-6.col-xs-12
+        ins Inserted
+        code.ml-2 ins
+      .column.col-6.col-xs-12
+        kbd Ctrl + S
+        code.ml-2 kbd
+      .column.col-6.col-xs-12
+        mark Highlighted
+        code.ml-2 mark
+      .column.col-6.col-xs-12
+        ruby
+          | 漢 
+          rt kan
+          | 字 
+          rt ji
+        code.ml-2 ruby
+      .column.col-6.col-xs-12
+        s Strikethrough
+        code.ml-2 s
+      .column.col-6.col-xs-12
+        samp Sample
+        code.ml-2 samp
+      .column.col-6.col-xs-12
+        | Text 
+        sub Subscripted
+        code.ml-2 sub
+      .column.col-6.col-xs-12
+        | Text 
+        sup Superscripted
+        code.ml-2 sup
+      .column.col-6.col-xs-12
+        time 20:00
+        code.ml-2 time
+      .column.col-6.col-xs-12
+        u Underline
+        code.ml-2 u
+      .column.col-6.col-xs-12
+        var x
+        |  = 
+        var y
+        |  + 2
+        code.ml-2 var
+
+    +docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
+
+    .docs-demo.columns
+      .column
+        p.h5
+          | #[small(lang='zh-Hans') 你好], #[small(lang='ja') こんにちは], #[small(lang='ko') 안녕하세요]
+        p.h6 Chinese (Simplified)
+        p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+        p.h6 Chinese (Tranditional)
+        p(lang='zh-Hant')
+          | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+        p.h6 Japanese
+        p(lang='ja')
+          | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
+        p.h6 Korean
+        p(lang='ko')
+          | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
+
+    p
+      | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+          <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+          <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+
+    p
+      | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
+
+    .docs-demo.columns
+      .column
+        p(lang='ja').
+          <u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。
+        p(lang='ja').
+          <del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+          <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+
+    +docs-subheading('typography-fonts', 'Fonts')
+
+    p
+      | Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems.
+      | There are also fonts targeted East Asian typography.
+
+    pre.code
+      code
+        :highlight(lang="scss")
+          /* Western typography targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+          /* Monospace typography targeted */
+          font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+
+          /* Chinese (lang="zh" and lang="zh-Hans") targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+          /* Chinese (lang="zh-Hant") targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
+          /* Japanese (lang="ja") targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+          /* Korean (lang="ko") targeted */
+          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+
+    +docs-subheading('typography-blockquote', 'Blockquote')
+
+    blockquote
+      p
+        | The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
+      cite - Bill Gates
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <blockquote>
+            <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+            <cite>- Bill Gates</cite>
+          </blockquote>
+
+    +docs-subheading('typography-lists', 'Lists')
+
+    .docs-demo.columns
+      .column.col-4.col-xs-12
+        ul.list
+          li list item 1
+          li
+            | list item 2
+            ul
+              li list item 2.1
+              li list item 2.2
+              li list item 2.3
+          li list item 3
+      .column.col-4.col-xs-12
+        ol.list
+          li list item 1
+          li
+            | list item 2
+            ol
+              li list item 2.1
+              li list item 2.2
+              li list item 2.3
+          li list item 3
+      .column.col-4.col-xs-12
+        dl.list
+          dt description list term 1
+          dd description list description 1
+          dt description list term 2
+          dd description list description 2
+          dt description list term 3
+          dd description list description 3
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- unordered list -->
+          <ul>
+            <li>list item 1</li>
+            <li>list item 2
+              <ul>
+                <li>list item 2.1</li>
+                <li>list item 2.2</li>
+                <li>list item 2.3</li>
+              </ul>
+            </li>
+            <li>list item 3</li>
+          </ul>
+
+          <!-- description list -->
+          <dl>
+            <dt>description list term</dt>
+            <dd>description list description</dd>
+          </dl>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file