Update buttons and forms docs to Pug templates

4 files changed, 817 insertions, 29 deletions

diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
index e69de29..8f8dbb1 100644
--- a/docs/src/contents/buttons.pug
+++ b/docs/src/contents/buttons.pug
@@ -0,0 +1,179 @@
+p Buttons include simple button styles for actions in different types and sizes.
+
+.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')
+
+.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')
+
+.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 circle] class for a round button, which is often used as a Float Action Button (FAB).
+
+.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.circle
+      i.icon.icon-arrow-up
+    button.btn.btn-action.btn-primary.circle
+      i.icon.icon-arrow-up
+    button.btn.btn-action.btn-primary.btn-sm.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 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.
+
+.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.
+
+.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.
+
+.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')
+
+.columns
+  .column.col-md-12
+    .btn-group
+      button.btn first button
+      button.btn second button
+      button.btn third button
+  .column.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
+.columns
+  .column.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-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> 
\ No newline at end of file
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index e69de29..bcfde1a 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -0,0 +1,626 @@
+p
+  | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+
+.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>
+
+.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>
+
+.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>
+
+.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>
+
+.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>
+
+.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>
+
+p
+  | You can use #[code :indeterminate] pseudo class for indeterminate state of checkboxes.
+
++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.
+
+.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.
+
+.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
+.columns
+  .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>'}.
+
+.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
+.columns
+  .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.
+
+.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')
+
+.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')
+
+.columns
+  .column.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-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
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input(type="text" placeholder="username")
+      select.form-select
+        option Slack
+        option Skype
+        option Hipchat
+  .column.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
+.columns
+  .column.col-xs-12
+    .input-group
+      label.form-switch
+        input(type="checkbox")
+        i.form-icon
+      input.form-input(type="text" placeholder="name")
+  .column.col-xs-12
+    .input-group
+      label.form-checkbox
+        input(type="checkbox")
+        i.form-icon
+      input.form-input(type="text" placeholder="name")
+.columns
+  .column.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-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')
+
+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.
+
+.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.
+      .form-group
+        label.form-label(for="input-example-21") Email
+        input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+        p.form-input-hint The Email address is unavailable.
+    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
+
+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-subheading('forms-disabled', 'Form disabled styles')
+
+p 
+  | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style.
+
+.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>
\ No newline at end of file
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
index a66aa34..64e4ffd 100644
--- a/docs/src/contents/tables.pug
+++ b/docs/src/contents/tables.pug
@@ -27,21 +27,12 @@ p Tables include default styles for tables and data sets.
           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.
+  | 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.
+  | Use the #[code active] class to make #{'<tr>'} element highlighted.
 
 pre.code(data-lang='HTML')
   code
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
index 47b980a..28ffc17 100644
--- a/docs/src/contents/typography.pug
+++ b/docs/src/contents/typography.pug
@@ -40,9 +40,8 @@ pre.code(data-lang='HTML')
 +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.
+  | 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.
 
@@ -127,7 +126,7 @@ p.h5
   small(lang='zh-Hans') 你好
   | , 
   small(lang='ja') こんにちは
-  | , 
+  | ,
   small(lang='ko') 안녕하세요
 
 p.h6 Chinese (Simplified)
@@ -142,9 +141,7 @@ 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.
+  | 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
@@ -154,11 +151,7 @@ pre.code(data-lang='HTML')
       <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.
+  | 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.
 
 p(lang='ja')
   u 祇園
@@ -178,9 +171,8 @@ pre.code(data-lang='HTML')
 +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.
+  | 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