Update code and media docs to new Pug templates

5 files changed, 171 insertions, 3 deletions

diff --git a/docs/elements.html b/docs/elements.html
index ae803f4..e7b4e82 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1232,10 +1232,83 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre>
           </div>
           <div class="container">
-            <h3 class="s-title" id="codes"><a class="anchor" href="#codes" aria-hidden="true">#</a>Codes</h3>
+            <h3 class="s-title" id="code"><a class="anchor" href="#code" aria-hidden="true">#</a>Code</h3>
+            <p>Code is used for styling inline and multiline code snippets.</p>
+            <p>For inline code, you can use the &lt;code&gt; element. 
+              For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it.
+              The <code>data-lang</code> ibute is rendered as the language name in the top right.
+            </p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- code snippets --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>
+  Submit
+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"code"</span> <span class="hljs-attr">data-lang</span>=<span class="hljs-string">"HTML"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"com"</span>&gt;</span>&amp;lt;!-- code snippets --&amp;gt;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+&amp;lt;<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>&gt;</span>button<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atn"</span>&gt;</span>class<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>=<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atv"</span>&gt;</span>&amp;quot;btn&amp;quot;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>&amp;gt;
+  Submit
+&amp;lt;<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>&gt;</span>/button<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>&amp;gt;
+<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span></code></pre>
           </div>
           <div class="container">
             <h3 class="s-title" id="media"><a class="anchor" href="#media" aria-hidden="true">#</a>Media</h3>
+            <p>Media includes responsive images, figures and video classes.</p>
+            <h4 class="s-subtitle" id="media-images"><a class="anchor" href="#media-images" aria-hidden="true">#</a>Images</h4>
+            <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
+            <div class="columns">
+              <div class="column col-12"><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper"></div>
+            </div>
+            <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to &lt;img&gt; or &lt;video&gt; elements. The media will crop itself to fit inside the element (and you don't need another container).
+              This feature can replace the classic background image trick. Microsoft Edge support <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">is shipped</a>  with Build Number 16299+.
+            </p>
+            <div class="columns">
+              <div class="column col-6 col-xs-12">
+                <figure class="figure"><img class="img-fit-contain rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
+                  <figcaption class="figure-caption text-center">img-fit-contain</figcaption>
+                </figure>
+              </div>
+              <div class="column col-6 col-xs-12">
+                <figure class="figure"><img class="img-fit-cover rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
+                  <figcaption class="figure-caption text-center">img-fit-cover</figcaption>
+                </figure>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-contain ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-cover ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="media-figure"><a class="anchor" href="#media-figure" aria-hidden="true">#</a>Figure</h4>
+            <p>You can use the element &lt;figure&gt; for an image with a caption.
+              Add the <code>figure</code> class to &lt;figure&gt; element.
+              The images with the <code>img-responsive</code> class will be responsive.
+              And the included class <code>figure-caption</code> will provide basic style for caption.
+              Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment.
+            </p>
+            <div class="columns">
+              <div class="column col-12">
+                <figure class="figure"><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+                  <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
+                </figure>
+              </div>
+            </div>
+            <h4 class="s-subtitle" id="media-video"><a class="anchor" href="#media-video" aria-hidden="true">#</a>Video</h4>
+            <p>For responsive video, add a container with the <code>video-responsive</code> class. 
+              Insert any YouTube, Youku or other iframe/embed video inside the container. 
+              The ratio is 16:9 by default.
+              You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.
+            </p>
+            <div class="columns">
+              <div class="column col-12">
+                <div class="video-responsive">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen=""></iframe>
+                </div>
+              </div>
+            </div>
+            <p>For responsive &lt;video&gt; elements, you can add the <code>video-responsive</code> class directly.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive video-responsive-4-3"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span></code></pre>
           </div>
         </div>
       </div>
diff --git a/docs/src/contents/code.pug b/docs/src/contents/code.pug
new file mode 100644
index 0000000..f1ee876
--- /dev/null
+++ b/docs/src/contents/code.pug
@@ -0,0 +1,22 @@
+p Code is used for styling inline and multiline code snippets.
+p
+  | For inline code, you can use the #{'<code>'} element. 
+  | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
+  | The #[code data-lang] ibute is rendered as the language name in the top right.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- code snippets -->
+      <button class="btn">
+        Submit
+      </button>
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+      &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+        Submit
+      &lt;<span class="tag">/button</span>&gt;
+      </code></pre>
\ No newline at end of file
diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug
deleted file mode 100644
index e69de29..0000000
--- a/docs/src/contents/codes.pug
+++ /dev/null
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
index e69de29..fcb8d36 100644
--- a/docs/src/contents/media.pug
+++ b/docs/src/contents/media.pug
@@ -0,0 +1,73 @@
+p Media includes responsive images, figures and video classes.
+
++docs-subheading('media-images', 'Images')
+
+p
+  | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes.
+
+.columns
+  .column.col-12
+    img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
+
+p
+  | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{'<img>'} or #{'<video>'} elements. The media will crop itself to fit inside the element (and you don't need another container).
+  | This feature can replace the classic background image trick. Microsoft Edge support 
+  a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank") is shipped
+  |   with Build Number 16299+.
+
+.columns
+  .column.col-6.col-xs-12
+    figure.figure
+      img.img-fit-contain.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
+      figcaption.figure-caption.text-center img-fit-contain
+  .column.col-6.col-xs-12
+    figure.figure
+      img.img-fit-cover.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
+      figcaption.figure-caption.text-center img-fit-cover
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+      <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+      <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
++docs-subheading('media-figure', 'Figure')
+
+p
+  | You can use the element #{'<figure>'} for an image with a caption.
+  | Add the #[code figure] class to #{'<figure>'} element.
+  | The images with the #[code img-responsive] class will be responsive.
+  | And the included class #[code figure-caption] will provide basic style for caption.
+  | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
+
+.columns
+  .column.col-12
+    figure.figure
+      img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+      figcaption.figure-caption.text-center macOS Yosemite wallpaper
+
++docs-subheading('media-video', 'Video')
+
+p
+  | For responsive video, add a container with the #[code video-responsive] class. 
+  | Insert any YouTube, Youku or other iframe/embed video inside the container. 
+  | The ratio is 16:9 by default.
+  | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
+
+.columns
+  .column.col-12
+    .video-responsive
+      iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
+
+p
+  | For responsive #{'<video>'} elements, you can add the #[code video-responsive] class directly.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="video-responsive video-responsive-4-3">
+        <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+      </div>
+
+      <video class="video-responsive" src="...">...</video>
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
index d7cf0f0..809fe0f 100644
--- a/docs/src/elements.pug
+++ b/docs/src/elements.pug
@@ -31,8 +31,8 @@ block docs-content
     include contents/labels.pug
 
   //- Codes
-  +docs-heading('codes', 'Codes')
-    include contents/codes.pug
+  +docs-heading('code', 'Code')
+    include contents/code.pug
   
   //- Media
   +docs-heading('media', 'Media')