diff options
Update code and media docs to new Pug templates
1 files changed, 74 insertions, 1 deletions
| -rw-r--r-- | docs/elements.html | 75 |
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"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>></span>primary label<span class="hljs-tag"></<span class="hljs-name">span</span>></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 <code> element. + For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> 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"><!-- code snippets --></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span> + Submit +<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +</code></pre> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<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>></span><span class="hljs-tag"><<span class="hljs-name">code</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"com"</span>></span>&lt;!-- code snippets --&gt;<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +&lt;<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>></span>button<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atn"</span>></span>class<span class="hljs-tag"></<span class="hljs-name">span</span>></span>=<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atv"</span>></span>&quot;btn&quot;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&gt; + Submit +&lt;<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>></span>/button<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&gt; +<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">pre</span>></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 <img> 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 <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</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"><<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>></span> +<span class="hljs-tag"><<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>></span> +<span class="hljs-tag"><<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>></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 <figure> for an image with a caption. + Add the <code>figure</code> class to <figure> 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 <video> elements, you can add the <code>video-responsive</code> class directly.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive video-responsive-4-3"</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + +<span class="hljs-tag"><<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>></span>...<span class="hljs-tag"></<span class="hljs-name">video</span>></span></code></pre> </div> </div> </div> |