Update the Docs completely

1 files changed, 713 insertions, 0 deletions

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