Move more Docs pages to Pug

15 files changed, 392 insertions, 16 deletions

diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/buttons.pug
diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/codes.pug
diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug
index ce787f7..a21357e 100644
--- a/docs/src/contents/custom.pug
+++ b/docs/src/contents/custom.pug
@@ -64,7 +64,7 @@ ul
     |  to define your variables.
   li Compile the Sass file to CSS to get the custom version of Spectre.
 
-// importing
+//- importing
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -83,7 +83,7 @@ p
   code project-name.scss
   | .
 
-// custom variables
+//- custom variables
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -96,7 +96,7 @@ pre.code(data-lang='Sass')
 
 +docs-subheading('folders', 'Folder structure')
 
-// folder structure
+//- folder structure
 pre.code
   code
     :highlight
@@ -221,7 +221,7 @@ ul
     code $color
     | : $primary-color);
 
-// button mixins
+//- button mixins
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -256,7 +256,7 @@ p
   a(href='https://www.npmjs.com/package/gulp-css-prefix', target='_blank') gulp-css-prefix
   |  plugin and add a new Gulp task to enable it.
 
-// custom prefix
+//- custom prefix
 pre.code(data-lang='Bash')
   code
     :highlight(lang="Bash")
@@ -269,7 +269,7 @@ p
   code gulpfile.js
   |  file.
 
-// custom prefix
+//- custom prefix
 pre.code
   code
     :highlight(lang="JavaScript")
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/forms.pug
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/grid.pug
diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/icons.pug
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/labels.pug
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/media.pug
diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/navbar.pug
diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/src/contents/responsive.pug
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
new file mode 100644
index 0000000..a66aa34
--- /dev/null
+++ b/docs/src/contents/tables.pug
@@ -0,0 +1,64 @@
+p Tables include default styles for tables and data sets.
+
+.columns
+  .column.col-12
+    table.table.table-striped
+      thead
+        tr
+          th Name
+          th Genre
+          th Release date
+      tbody
+        tr
+          td The Shawshank Redemption
+          td Crime, Drama
+          td 14 October 1994
+        tr
+          td The Godfather
+          td Crime, Drama
+          td 24 March 1972
+        tr
+          td Schindler's List
+          td Biography, Drama, History
+          td 4 February 1994
+        tr
+          td Se7en
+          td Crime, Drama, Mystery
+          td 22 September 1995
+
+p
+  | Add the 
+  code table
+  |  class to any 
+  = '<table>'
+  |  element. The class will add padding, border and emphasized table header. Use the 
+  code table-striped
+  |  class to 
+  = '<table>'
+  |  to add zebra striped style. For hoverable table rows, you can add the 
+  code table-hover
+  |  class to enable hover style.
+p
+  | Use the 
+  code active
+  |  class to make <tr> element highlighted.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <th>name</th>
+            <th>genre</th>
+            <th>release date</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="active">
+            <td>The Shawshank Redemption</td>
+            <td>Crime, Drama</td>
+            <td>14 October 1994</td>
+          </tr>
+        </tbody>
+      </table>
\ No newline at end of file
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
new file mode 100644
index 0000000..47b980a
--- /dev/null
+++ b/docs/src/contents/typography.pug
@@ -0,0 +1,267 @@
+p
+  | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
+
++docs-subheading('typography-headings', 'Headings')
+
+.columns
+  .column.col-12
+    h1
+      | H1 Heading 
+      small.label 40px
+  .column.col-12
+    h2
+      | H2 Heading 
+      small.label 32px
+  .column.col-12
+    h3
+      | H3 Heading 
+      small.label 28px
+  .column.col-12
+    h4
+      | H4 Heading 
+      small.label 24px
+  .column.col-12
+    h5
+      | H5 Heading 
+      small.label 20px
+  .column.col-12
+    h6
+      | H6 Heading 
+      small.label 16px
+
+//- headings
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <h1>H1 Heading</h1>
+      <h1>H1 Heading <small class="label">40px</small></h1>
+      <span class="h1">H1 Heading</span>
+
++docs-subheading('typography-paragraphs', 'Paragraphs')
+
+p
+  | Lorem ipsum dolor sit amet, consectetur 
+  a(href='#typography') adipiscing elit. Praesent risus leo, dictum in vehicula sit amet
+  | , feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+p
+  | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+
+//- paragraphs
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <p>Lorem ipsum dolor sit amet, ...</p>
+      <p>...</p>
+
++docs-subheading('typography-semantic-text', 'Semantic text elements')
+
+.columns
+  .column.col-6.col-xs-12
+    abbr(title='Internationalization') I18N
+    code.ml-2 abbr
+  .column.col-6.col-xs-12
+    strong Bold
+    code.ml-2 strong
+    code.ml-2 b
+  .column.col-6.col-xs-12
+    cite Citation
+    code.ml-2 cite
+  .column.col-6.col-xs-12
+    code Hello World!
+    code.ml-2 code
+  .column.col-6.col-xs-12
+    del Deleted
+    code.ml-2 del
+  .column.col-6.col-xs-12
+    em Emphasis
+    code.ml-2 em
+  .column.col-6.col-xs-12
+    i Italic
+    code.ml-2 i
+  .column.col-6.col-xs-12
+    ins Inserted
+    code.ml-2 ins
+  .column.col-6.col-xs-12
+    kbd Ctrl + S
+    code.ml-2 kbd
+  .column.col-6.col-xs-12
+    mark Highlighted
+    code.ml-2 mark
+  .column.col-6.col-xs-12
+    ruby
+      | 漢 
+      rt kan
+      | 字 
+      rt ji
+    code.ml-2 ruby
+  .column.col-6.col-xs-12
+    s Strikethrough
+    code.ml-2 s
+  .column.col-6.col-xs-12
+    samp Sample
+    code.ml-2 samp
+  .column.col-6.col-xs-12
+    | Text 
+    sub Subscripted
+    code.ml-2 sub
+  .column.col-6.col-xs-12
+    | Text 
+    sup Superscripted
+    code.ml-2 sup
+  .column.col-6.col-xs-12
+    time 20:00
+    code.ml-2 time
+  .column.col-6.col-xs-12
+    u Underline
+    code.ml-2 u
+  .column.col-6.col-xs-12
+    var x
+    |  = 
+    var y
+    |  + 2
+    code.ml-2 var
+
++docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
+
+p.h5
+  small(lang='zh-Hans') 你好
+  | , 
+  small(lang='ja') こんにちは
+  | , 
+  small(lang='ko') 안녕하세요
+
+p.h6 Chinese (Simplified)
+p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+p.h6 Chinese (Tranditional)
+p(lang='zh-Hant')
+  | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+p.h6 Japanese
+p(lang='ja')
+  | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
+p.h6 Korean
+p(lang='ko')
+  | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
+p
+  | Use the 
+  code lang
+  |  attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+      <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+      <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+
+p
+  | And you can use the 
+  code cjk
+  |  class or the 
+  code lang
+  |  attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
+
+p(lang='ja')
+  u 祇園
+  u 精舎
+  | の鐘の声、諸行無常の響きあり。
+p(lang='ja')
+  del 祇園
+  del 精舎
+  | の鐘の声、諸行無常の響きあり。
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+      <p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+
++docs-subheading('typography-fonts', 'Fonts')
+
+p
+  | Spectre sets the most common and best 
+  code font-family
+  |  for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.
+
+pre.code
+  code
+    :highlight(lang="scss")
+      /* Western typography targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+      /* Monospace typography targeted */
+      font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+
+      /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+      /* Japanese (lang="ja") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+      /* Korean (lang="ko") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+
++docs-subheading('typography-blockquote', 'Blockquote')
+
+blockquote
+  p
+    | The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
+  cite - Bill Gates
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <blockquote>
+        <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+        <cite>- Bill Gates</cite>
+      </blockquote>
+
++docs-subheading('typography-lists', 'Lists')
+
+.columns
+  .column.col-4.col-xs-12
+    ul.list
+      li list item 1
+      li
+        | list item 2
+        ul
+          li list item 2.1
+          li list item 2.2
+          li list item 2.3
+      li list item 3
+  .column.col-4.col-xs-12
+    ol.list
+      li list item 1
+      li
+        | list item 2
+        ol
+          li list item 2.1
+          li list item 2.2
+          li list item 2.3
+      li list item 3
+  .column.col-4.col-xs-12
+    dl.list
+      dt description list term 1
+      dd description list description 1
+      dt description list term 2
+      dd description list description 2
+      dt description list term 3
+      dd description list description 3
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- unordered list -->
+      <ul>
+        <li>list item 1</li>
+        <li>list item 2
+          <ul>
+            <li>list item 2.1</li>
+            <li>list item 2.2</li>
+            <li>list item 2.3</li>
+          </ul>
+        </li>
+        <li>list item 3</li>
+      </ul>
+
+      <!-- description list -->
+      <dl>
+        <dt>description list term</dt>
+        <dd>description list description</dd>
+      </dl>
\ No newline at end of file
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
new file mode 100644
index 0000000..d7cf0f0
--- /dev/null
+++ b/docs/src/elements.pug
@@ -0,0 +1,41 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Elements - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'elements'
+
+block docs-content
+  //- Typography
+  +docs-heading('typography', 'Typography')
+    include contents/typography.pug
+    
+  //- Tables
+  +docs-heading('tables', 'Tables')
+    include contents/tables.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('codes', 'Codes')
+    include contents/codes.pug
+  
+  //- Media
+  +docs-heading('media', 'Media')
+    include contents/media.pug
+
+    
\ No newline at end of file
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
index 19e1db0..d5e8ac3 100644
--- a/docs/src/getting-started.pug
+++ b/docs/src/getting-started.pug
@@ -6,11 +6,11 @@ block variables
   - var current = 'getting-started'
 
 block docs-content
-  //- introduction
+  //- Introduction
   +docs-heading('introduction', 'Introduction')
     include contents/introduction.pug
     
-  //- installation
+  //- Installation
   +docs-heading('installation', 'Installation')
     include contents/installation.pug
 
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 342ca8c..e17f832 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -195,6 +195,10 @@
     font-size: $font-size-sm;
   }
 
+  .columns {
+    margin-bottom: 1rem;
+  }
+
   .column {
     padding: $layout-spacing;
   }
@@ -463,6 +467,10 @@
     .off-canvas-toggle {
       z-index: $zindex-3;
     }
+
+    .off-canvas-content {
+      width: 100%;
+    }
   }
 
   .docs-sidebar {
@@ -489,11 +497,9 @@
   }
 
   .docs-content {
-    &.off-canvas-content {
-      min-width: auto;
-      padding: 0 1.5rem;
-      width: 100%;
-    }
+    min-width: auto;
+    padding: 0 1.5rem;
+    width: 100%;
 
     .s-title,
     .s-subtitle {
@@ -568,9 +574,7 @@
   }
 
   .docs-content {
-    &.off-canvas-content {
-      padding: 0 .5rem;
-    }
+    padding: 0 .5rem;
 
     .docs-block {
       padding: $unit-2 $unit-h;