Update Flexbox grid to new Pug template

2 files changed, 183 insertions, 31 deletions

diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
index e69de29..d0172fb 100644
--- a/docs/src/contents/grid.pug
+++ b/docs/src/contents/grid.pug
@@ -0,0 +1,172 @@
+p
+  | Layout includes flexbox based responsive grid system with 12 columns.
+
+.columns
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+.columns
+  .column.col-12
+    .bg-gray.docs-block col-12 (100%)
+.columns
+  .column.col-9
+    .bg-gray.docs-block col-9 (75%)
+.columns
+  .column.col-6
+    .bg-gray.docs-block col-6 (50%)
+.columns
+  .column.col-3
+    .bg-gray.docs-block col-3 (25%)
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- flexbox grid example -->
+      <div class="container">
+        <div class="columns">
+          <div class="column col-6">col-6</div>
+          <div class="column col-3">col-3</div>
+          <div class="column col-2">col-2</div>
+          <div class="column col-1">col-1</div>
+        </div>
+      </div>
+
+p
+  | 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>].
+p
+  | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
+
+.columns.col-gapless
+  .column.col-6
+    .bg-gray.docs-block col-6 (gapless)
+  .column.col-6
+    .bg-gray.docs-block col-6 (gapless)
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- gapless columns -->
+      <div class="columns col-gapless">
+        <div class="column col-6">col-6</div>
+        <div class="column col-6">col-6</div>
+      </div>
+
+p
+  | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row.
+
+.columns.col-oneline
+  .column.col-8
+    .bg-gray.docs-block col-8
+  .column.col-8
+    .bg-gray.docs-block col-8
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- one line columns -->
+      <div class="columns col-oneline">
+        <div class="column col-8">col-8</div>
+        <div class="column col-8">col-8</div>
+      </div>
+
++docs-subheading('grid-offset', 'Grid offset')
+
+p
+  | The Flexbox grid provides margin auto utilities to set offset. 
+  | There are #[code col-mx-auto], #[code col-ml-auto] and #[code col-mr-auto] to set margins between columns without using empty columns.
+
+.columns
+  .column.col-2
+    .bg-gray.docs-block col-2
+  .column.col-4.col-mx-auto
+    .bg-gray.docs-block col-4 col-mx-auto
+.columns
+  .column.col-2
+    .bg-gray.docs-block col-2
+  .column.col-4.col-ml-auto
+    .bg-gray.docs-block col-4 col-ml-auto
+.columns
+  .column.col-4.col-ml-auto
+    .bg-gray.docs-block col-4 col-ml-auto
+  .column.col-2
+    .bg-gray.docs-block col-2
+.columns
+  .column.col-4.col-mx-auto
+    .bg-gray.docs-block col-4 col-mx-auto
+  .column.col-2
+    .bg-gray.docs-block col-2
+.columns
+  .column.col-4.col-mr-auto
+    .bg-gray.docs-block col-4 col-mr-auto
+  .column.col-2
+    .bg-gray.docs-block col-2
+.columns
+  .column.col-4.col-mx-auto
+    .bg-gray.docs-block col-4 col-mx-auto
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- grid offset example -->
+      <div class="container">
+        <div class="columns">
+          <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
+          <div class="column col-2">col-2</div>
+        </div>
+      </div>
+
++docs-subheading('grid-nesting', 'Grid nesting')
+
+p
+  | To nest grids, add the new #[code columns] and #[code column] structure within an existing column.
+
+.columns
+  .column.col-6
+    .bg-gray
+      .docs-block col-6
+      .columns
+        .column.col-6
+          .bg-primary.docs-block col-6
+        .column.col-6
+          .bg-primary.docs-block col-6
+  .column.col-6
+    .bg-gray.docs-block col-6
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- grid nesting example -->
+      <div class="container">
+        <div class="columns">
+          <div class="column col-6">col-6
+            <div class="columns">
+              <div class="column col-6">col-6</div>
+              <div class="column col-6">col-6</div>
+            </div>
+          </div>
+          <div class="column col-6">col-6</div>
+        </div>
+      </div>
\ No newline at end of file
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
index 3f1e270..3adaf6e 100644
--- a/docs/src/layout.pug
+++ b/docs/src/layout.pug
@@ -1,39 +1,19 @@
 extends _docs-layout.pug
 
 block variables
-  - var title = 'Elements - Spectre.css CSS Framework'
+  - var title = 'Layout - Spectre.css CSS Framework'
   - var description = ''
-  - var current = 'elements'
+  - var current = 'layout'
 
 block docs-content
-  //- Typography
-  +docs-heading('typography', 'Typography')
-    include contents/typography.pug
+  //- Flexbox grid
+  +docs-heading('grid', 'Flexbox grid')
+    include contents/grid.pug
     
-  //- Tables
-  +docs-heading('tables', 'Tables')
-    include contents/tables.pug
+  //- Responsive
+  +docs-heading('responsive', 'Responsive')
+    include contents/responsive.pug
 
-  //- Buttons
-  +docs-heading('buttons', 'Buttons')
-    include contents/buttons.pug
-
-  //- Forms
-  +docs-heading('forms', 'Forms')
-    include contents/forms.pug
-  
-  //- Icons
-  +docs-heading('icons', 'Icons')
-    include contents/icons.pug
-
-  //- Labels
-  +docs-heading('labels', 'Labels')
-    include contents/labels.pug
-
-  //- Codes
-  +docs-heading('code', 'Code')
-    include contents/code.pug
-  
-  //- Media
-  +docs-heading('media', 'Media')
-    include contents/media.pug
\ No newline at end of file
+  //- Navbar
+  +docs-heading('navbar', 'Navbar')
+    include contents/navbar.pug
\ No newline at end of file