Merge pull request #534 from picturepan2/0.5.6 v0.5.6

0.5.6

3 files changed, 62 insertions, 14 deletions

diff --git a/docs/src/layout/grid.pug b/docs/src/layout/grid.pug
index f9725a4..4c35009 100644
--- a/docs/src/layout/grid.pug
+++ b/docs/src/layout/grid.pug
@@ -68,6 +68,9 @@ block docs-content
       | Add the #[code columns] class to a container with the #[code container] class. 
       | And add any element you want with the #[code column] class inside the container. These columns will take up the space equally.
       | You can specific the width of each column by adding class #[code col-<1-12>].
+    
+    +docs-subheading('grid-gapless', 'Gapless grid')
+
     p
       | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
 
diff --git a/docs/src/layout/hero.pug b/docs/src/layout/hero.pug
new file mode 100644
index 0000000..36d765d
--- /dev/null
+++ b/docs/src/layout/hero.pug
@@ -0,0 +1,45 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'hero'
+  - var parent = 'layout'
+  - var title = 'Hero - Layout - 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('hero', 'Hero')
+    include ../_layout/_ad-g.pug
+
+    p
+      | The Hero container shows key featured content or information.
+
+    .docs-demo.columns
+      .column
+        .hero.bg-gray
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- hero example -->
+
+    .docs-demo.columns
+      .column
+        .hero.hero-sm.bg-dark
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+            
+    .docs-demo.columns
+      .column
+        .hero.hero-lg.bg-primary
+          .hero-body
+            h1 Hero title
+            p This is a hero example
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
diff --git a/docs/src/layout/responsive.pug b/docs/src/layout/responsive.pug
index 6516b26..1d0109a 100644
--- a/docs/src/layout/responsive.pug
+++ b/docs/src/layout/responsive.pug
@@ -15,22 +15,22 @@ block docs-content
     .docs-demo.columns
       .column.col-10.col-lg-8.col-md-6.col-sm-4
         .bg-gray.docs-block
-          | col-10 
-          br
-          |  col-lg-8 
-          br
-          |  col-md-6 
-          br
-          |  col-sm-4
+          .text-primary col-10
+          .text-dark.hide-lg col-lg-8
+          .text-primary.show-lg col-lg-8
+          .text-dark.hide-md col-md-6
+          .text-primary.show-md col-md-6
+          .text-dark.hide-sm col-sm-4
+          .text-primary.show-sm col-sm-4
       .column.col-2.col-lg-4.col-md-6.col-sm-8
         .bg-gray.docs-block
-          | col-2 
-          br
-          |  col-lg-4 
-          br
-          |  col-md-6 
-          br
-          |  col-sm-8
+          .text-primary col-2
+          .text-dark.hide-lg col-lg-4
+          .text-primary.show-lg col-lg-4
+          .text-dark.hide-md col-md-6
+          .text-primary.show-md col-md-6
+          .text-dark.hide-sm col-sm-8
+          .text-primary.show-sm col-sm-8
 
     p
       | There are #[code col-xs-<1-12>], #[code col-sm-<1-12>], #[code col-md-<1-12>], #[code col-lg-<1-12>] and #[code col-xl-<1-12>] available for flexible grid across mobile, tablet and desktop viewport usage.