1 files changed, 42 insertions, 16 deletions

diff --git a/docs/src/layout.pug b/docs/src/layout.pug
index 5aa8bc5..582a98b 100644
--- a/docs/src/layout.pug
+++ b/docs/src/layout.pug
@@ -1,23 +1,49 @@
-extends _docs-layout.pug
+extends _layout/_docs-layout.pug
 
 block variables
+  - var slug = 'layout'
+  - var parent = 'layout'
   - var title = 'Layout - Spectre.css CSS Framework'
-  - var description = ''
-  - var current = 'layout'
+  - 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
-  //- Flexbox grid
-  +docs-heading('grid', 'Flexbox grid')
-    include contents/_ad-g.pug
-    include contents/grid.pug
-    
-  //- Responsive
-  +docs-heading('responsive', 'Responsive')
-    include contents/_ad-c.pug
-    include contents/responsive.pug
+  +docs-heading('layout', 'Layout')
+    include _layout/_ad-g.pug
 
-  //- Navbar
-  +docs-heading('navbar', 'Navbar')
-    include contents/navbar.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.
 
-  include _footer.pug
\ No newline at end of file
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Flexbox grid
+          .card-body
+            | Flexbox based responsive grid system with 12 columns
+          .card-footer
+            a.btn.btn-primary(href="layout/grid.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Responsive
+          .card-body
+            | Responsive layout grid system and responsive visibility utilities
+          .card-footer
+            a.btn.btn-primary(href="layout/responsive.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Navbar
+          .card-body
+            | Layout container that appears in the header of apps and websites
+          .card-footer
+            a.btn.btn-primary(href="layout/navbar.html") View
+              
+    include _layout/_ad-c.pug
+
+  include _layout/_footer.pug
\ No newline at end of file