Update the Docs completely

8 files changed, 451 insertions, 0 deletions

diff --git a/docs/src/utilities/colors.pug b/docs/src/utilities/colors.pug
new file mode 100644
index 0000000..a5a306c
--- /dev/null
+++ b/docs/src/utilities/colors.pug
@@ -0,0 +1,111 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'colors'
+  - var parent = 'utilities'
+  - var title = 'Color utilities - Utilities - 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('colors', 'Color utilities')
+    include ../_layout/_ad-g.pug
+
+    p Color utilities are used for changing colors for text, link and background.
+
+    +docs-subheading('colors-text', 'Text colors')
+
+    .docs-demo.columns
+      .column.col-12
+        p
+          span.text-primary primary color
+        p
+          span.text-secondary secondary color
+        p
+          span.text-dark dark color
+        p
+          span.text-gray gray color
+        p
+          span.text-light.bg-dark.p-1.rounded light color
+        p
+          span.text-success success color
+        p
+          span.text-warning warning color
+        p
+          span.text-error error color
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <span class="text-primary">primary color</span>
+          <span class="text-secondary">secondary color</span>
+          <span class="text-dark">dark color</span>
+          <span class="text-gray">gray color</span>
+          <span class="text-light">light color</span>
+          <span class="text-success">success color</span>
+          <span class="text-warning">warning color</span>
+          <span class="text-error">error color</span>
+
+    .docs-demo.columns
+      .column.col-12
+        p
+          a.text-primary.p-1(href="#colors") primary link
+        p
+          a.text-secondary.p-1(href="#colors") secondary link
+        p
+          a.text-dark.p-1(href="#colors") dark link
+        p
+          a.text-gray.p-1(href="#colors") gray link
+        p
+          a.text-light.bg-dark.p-1.rounded(href="#colors") light link
+        p
+          a.text-success.p-1(href="#colors") success link
+        p
+          a.text-warning.p-1(href="#colors") warning link
+        p
+          a.text-error.p-1(href="#colors") error link
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <a class="text-primary" href="#">primary color</a>
+          <a class="text-secondary" href="#">secondary color</a>
+          <a class="text-dark" href="#">dark color</a>
+          <a class="text-gray" href="#">gray color</a>
+          <a class="text-light" href="#">light color</a>
+          <a class="text-success" href="#">success color</a>
+          <a class="text-warning" href="#">warning color</a>
+          <a class="text-error" href="#">error color</a>
+
+    +docs-subheading('colors-background', 'Background colors')
+
+    .docs-demo.columns
+      .column.col-12
+        p
+          span.bg-primary.p-1.rounded primary bg
+        p
+          span.bg-secondary.text-primary.p-1.rounded secondary bg
+        p
+          span.bg-dark.p-1.rounded dark bg
+        p
+          span.bg-gray.p-1.rounded gray bg
+        p
+          span.bg-success.p-1.rounded success bg
+        p
+          span.bg-warning.p-1.rounded warning bg
+        p
+          span.bg-error.p-1.rounded error bg
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="bg-primary">primary bg</div>
+          <div class="bg-secondary">secondary bg</div>
+          <div class="bg-dark">dark bg</div>
+          <div class="bg-gray">gray bg</div>
+          <div class="bg-success">success bg</div>
+          <div class="bg-warning">warning bg</div>
+          <div class="bg-error">error bg</div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/utilities/cursors.pug b/docs/src/utilities/cursors.pug
new file mode 100644
index 0000000..c816795
--- /dev/null
+++ b/docs/src/utilities/cursors.pug
@@ -0,0 +1,47 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'cursors'
+  - var parent = 'utilities'
+  - var title = 'Cursor utilities - Utilities - 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('cursors', 'Cursor utilities')
+    include ../_layout/_ad-g.pug
+
+    p Cursor utilities specify which mouse cursor to display when mouseover.
+
+    .docs-demo.columns
+      .column.col-4
+        .bg-gray.docs-block.c-hand c-hand
+      .column.col-4
+        .bg-gray.docs-block.c-move c-move
+      .column.col-4
+        .bg-gray.docs-block.c-zoom-in c-zoom-in
+      .column.col-4
+        .bg-gray.docs-block.c-zoom-out c-zoom-out
+      .column.col-4
+        .bg-gray.docs-block.c-not-allowed c-not-allowed
+      .column.col-4
+        .bg-gray.docs-block.c-auto c-auto
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- cursor: hand; -->
+          <div class="c-hand"></div>
+          <!-- cursor: move; -->
+          <div class="c-move"></div>
+          <!-- cursor: zoom-in; -->
+          <div class="c-zoom-in"></div>
+          <!-- cursor: zoom-out; -->
+          <div class="c-zoom-out"></div>
+          <!-- cursor: not-allowed; -->
+          <div class="c-not-allowed"></div>
+          <!-- cursor: auto; -->
+          <div class="c-auto"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/utilities/display.pug b/docs/src/utilities/display.pug
new file mode 100644
index 0000000..d69e514
--- /dev/null
+++ b/docs/src/utilities/display.pug
@@ -0,0 +1,42 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'display'
+  - var parent = 'utilities'
+  - var title = 'Display utilities - Utilities - 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('display', 'Display utilities')
+    include ../_layout/_ad-g.pug
+
+    p Display utilities are used for display and hidden things.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- display: block; -->
+          <div class="d-block"></div>
+          <!-- display: inline; -->
+          <div class="d-inline"></div>
+          <!-- display: inline-block; -->
+          <div class="d-inline-block"></div>
+          <!-- display: flex; -->
+          <div class="d-flex"></div>
+          <!-- display: inline-flex; -->
+          <div class="d-inline-flex"></div>
+          <!-- display: none; -->
+          <div class="d-none"></div>
+          <div class="d-hide"></div>
+          <!-- visibility: visible; -->
+          <div class="d-visible"></div>
+          <!-- visibility: hidden; -->
+          <div class="d-invisible"></div>
+          <!-- hide text contents -->
+          <div class="text-hide"></div>
+          <!-- assistive text for screen reader -->
+          <div class="text-assistive"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/utilities/divider.pug b/docs/src/utilities/divider.pug
new file mode 100644
index 0000000..be6fea7
--- /dev/null
+++ b/docs/src/utilities/divider.pug
@@ -0,0 +1,72 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'divider'
+  - var parent = 'utilities'
+  - var title = 'Divider - Utilities - 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('divider', 'Divider')
+    include ../_layout/_ad-g.pug
+
+    p A Divider is used for separating elements.
+
+    .docs-demo.columns
+      .column
+        .divider
+
+    .docs-demo.columns
+      .column
+        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+        .divider.text-center(data-content="OR")
+        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+
+    .docs-demo.columns
+      .column
+        form
+          .form-group
+            label.form-label(for="input-example-1") Email
+            input#input-example-1.form-input(type="text" placeholder="Email")
+          .form-group
+            label.form-label(for="input-example-2") Password
+            input#input-example-2.form-input(type="password" placeholder="Password")
+          .form-group
+            label.form-checkbox
+              input(type="checkbox")
+              i.form-icon
+              |  Remember me
+          .form-group
+            button.btn.btn-primary Sign in
+      .divider-vert(data-content="OR")
+      .column
+        form
+          .form-group
+            label.form-label(for="input-example-3") Email
+            input#input-example-3.form-input(type="text" placeholder="Email")
+          .form-group
+            button.btn.btn-primary.btn-block Sign up
+            button.btn.btn-link.btn-block Learn more
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- divider element -->
+          <div class="divider"></div>
+          <!-- divider element with text -->
+          <div class="divider text-center" data-content="OR"></div>
+
+          <!-- vertical divider element with text -->
+          <div class="columns">
+            <div class="column">
+              <!-- column content -->
+            </div>
+            <div class="divider-vert" data-content="OR"></div>
+            <div class="column">
+              <!-- column content -->
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/utilities/loading.pug b/docs/src/utilities/loading.pug
new file mode 100644
index 0000000..f5ddb67
--- /dev/null
+++ b/docs/src/utilities/loading.pug
@@ -0,0 +1,37 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'loading'
+  - var parent = 'utilities'
+  - var title = 'Loading - Utilities - 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('loading', 'Loading')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Loading indicator is used for loading or updating.
+      | You can add the #[code loading] class to a container for loading status.
+
+    .docs-demo.columns
+      .column.col-12.text-center
+        .loading
+
+    p
+      | Add the #[code loading-lg] class for large size.
+
+    .docs-demo.columns
+      .column.col-12.text-center
+        .loading.loading-lg
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- loading element -->
+          <div class="loading"></div>
+          <div class="loading loading-lg"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/utilities/position.pug b/docs/src/utilities/position.pug
new file mode 100644
index 0000000..dc0d718
--- /dev/null
+++ b/docs/src/utilities/position.pug
@@ -0,0 +1,57 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'position'
+  - var parent = 'utilities'
+  - var title = 'Position utilities - Utilities - 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('position', 'Position utilities')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- clear float -->
+          <div class="clearfix"></div>
+          <!-- float: left and right -->
+          <div class="float-left"></div>
+          <div class="float-right"></div>
+          <!-- position: relative, absolute, fixed and sticky -->
+          <div class="p-relative"></div>
+          <div class="p-absolute"></div>
+          <div class="p-fixed"></div>
+          <div class="p-sticky"></div>
+          <!-- centered block -->
+          <div class="p-centered"></div>
+
+          <!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
+          <div class="m-1"></div>
+          <div class="m-2"></div>
+          <!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
+          <div class="mt-1"></div>
+          <div class="mt-2"></div>
+          <!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
+          <div class="mx-1"></div>
+          <div class="mx-2"></div>
+          <div class="my-1"></div>
+          <div class="my-2"></div>
+          <!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
+          <div class="p-1"></div>
+          <div class="p-2"></div>
+          <!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
+          <div class="pt-1"></div>
+          <div class="pt-2"></div>
+          <!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
+          <div class="px-1"></div>
+          <div class="px-2"></div>
+          <div class="py-1"></div>
+          <div class="py-2"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/utilities/shapes.pug b/docs/src/utilities/shapes.pug
new file mode 100644
index 0000000..c445cfb
--- /dev/null
+++ b/docs/src/utilities/shapes.pug
@@ -0,0 +1,33 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'shapes'
+  - var parent = 'utilities'
+  - var title = 'Shape utilities - Utilities - 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('shapes', 'Shape utilities')
+    include ../_layout/_ad-g.pug
+
+    p Shape utilities are used for change element shapes.
+
+    .docs-demo.columns
+      .column.col-6.text-center
+        .bg-primary.text-light.docs-shape.s-rounded.centered
+          | s-rounded
+      .column.col-6.text-center
+        .bg-primary.text-light.docs-shape.s-circle.centered
+          | s-circle
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- rounded element -->
+          <div class="s-rounded"></div>
+          <!-- circle element -->
+          <div class="s-circle"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/utilities/text.pug b/docs/src/utilities/text.pug
new file mode 100644
index 0000000..d383128
--- /dev/null
+++ b/docs/src/utilities/text.pug
@@ -0,0 +1,52 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'text'
+  - var parent = 'utilities'
+  - var title = 'Text utilities - Utilities - 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('text', 'Text utilities')
+    include ../_layout/_ad-g.pug
+
+    p Text utilities are used for text alignment, styles and overflow things.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- left-aligned text -->
+          <div class="text-left"></div>
+          <!-- center-aligned text -->
+          <div class="text-center"></div>
+          <!-- right-aligned text -->
+          <div class="text-right"></div>
+          <!-- justified text -->
+          <div class="text-justify"></div>
+
+          <!-- Lowercased text -->
+          <div class="text-lowercase"></div>
+          <!-- Uppercased text -->
+          <div class="text-uppercase"></div>
+          <!-- Capitalized text -->
+          <div class="text-capitalize"></div>
+
+          <!-- Normal weight text -->
+          <div class="text-normal"></div>
+          <!-- Bold text -->
+          <div class="text-bold"></div>
+          <!-- Italicized text -->
+          <div class="text-italic"></div>
+          <!-- Larger text (120%) -->
+          <div class="text-large"></div>
+
+          <!-- Overflow behavior: display an ellipsis to represent clipped text -->
+          <div class="text-ellipsis"></div>
+          <!-- Overflow behavior: truncate the text -->
+          <div class="text-clip"></div>
+          <!-- Text may be broken at arbitrary points -->
+          <div class="text-break"></div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file