Update the Docs completely

1 files changed, 66 insertions, 0 deletions

diff --git a/docs/src/components/empty.pug b/docs/src/components/empty.pug
new file mode 100644
index 0000000..b23ce8c
--- /dev/null
+++ b/docs/src/components/empty.pug
@@ -0,0 +1,66 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'empty'
+  - var parent = 'components'
+  - var title = 'Empty states - Components - 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('empty', 'Empty states')
+    include ../_layout/_ad-g.pug
+
+    p
+      | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
+
+    .docs-demo.columns
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-mail
+          p.empty-title.h5 You have no new messages
+          p.empty-subtitle Click the button to start a conversation
+          .empty-action
+            button.btn.btn-primary Send a message
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-mail
+          p.empty-title.h5 You've successfully signed up
+          p.empty-subtitle Click the button to invite your friends
+          .empty-action
+            button.btn.btn-primary Invite your friends
+          .empty-action
+            button.btn.btn-link Skip
+      .column.col-12
+        .empty
+          .empty-icon
+            i.icon.icon-3x.icon-people
+          p.empty-title.h5 You are not following anyone
+          p.empty-subtitle Start to meet new friends
+          .empty-action.input-group.input-inline
+            input.form-input(type="text" placeholder="")
+            button.btn.btn-primary.input-group-btn Search
+
+    p
+      | An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+      | Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements.
+      | HTML structure is exampled below.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="empty">
+            <div class="empty-icon">
+              <i class="icon icon-people"></i>
+            </div>
+            <p class="empty-title h5">You have no new messages</p>
+            <p class="empty-subtitle">Click the button to start a conversation.</p>
+            <div class="empty-action">
+              <button class="btn btn-primary">Send a message</button>
+            </div>
+          </div>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file