New Docs category pages

1 files changed, 82 insertions, 0 deletions

diff --git a/docs/src/elements.pug b/docs/src/elements.pug
index 8061827..270cc39 100644
--- a/docs/src/elements.pug
+++ b/docs/src/elements.pug
@@ -7,6 +7,88 @@ block variables
   - 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('elements', 'Elements')
+    include _layout/_ad-g.pug
 
+    p 
+      strong Spectre.css 
+      | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+    p 
+      | 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.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Typography
+          .card-body
+            | Headings, paragraphs, semantic text, blockquote and lists elements
+          .card-footer
+            a.btn.btn-primary(href="elements/typography.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Tables
+          .card-body
+            | Tables and data sets
+          .card-footer
+            a.btn.btn-primary(href="elements/tables.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Buttons
+          .card-body
+            | Simple button styles for actions in different types and sizes
+          .card-footer
+            a.btn.btn-primary(href="elements/buttons.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Forms
+          .card-body
+            | Input, textarea, select, checkbox, radio and switch
+          .card-footer
+            a.btn.btn-primary(href="elements/forms.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Icons
+          .card-body
+            | Single-element, responsive and pure CSS icons
+          .card-footer
+            a.btn.btn-primary(href="elements/icons.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Labels
+          .card-body
+            | Formatted text tags for highlighted, informative information
+          .card-footer
+            a.btn.btn-primary(href="elements/labels.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Code
+          .card-body
+            | Inline and multiline code snippets
+          .card-footer
+            a.btn.btn-primary(href="elements/code.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Media
+          .card-body
+            | Responsive images, figures and video
+          .card-footer
+            a.btn.btn-primary(href="elements/media.html") View
+
+    include _layout/_ad-c.pug
 
   include _layout/_footer.pug
\ No newline at end of file