Update buttons and forms docs to Pug templates

1 files changed, 179 insertions, 0 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