diff options
Add Hero layout #380
8 files changed, 25 insertions, 3 deletions
| -rw-r--r-- | docs/elements/buttons.html | 2 | ||||
| -rw-r--r-- | docs/elements/code.html | 2 | ||||
| -rw-r--r-- | docs/elements/forms.html | 2 | ||||
| -rw-r--r-- | docs/elements/icons.html | 2 | ||||
| -rw-r--r-- | docs/elements/labels.html | 2 | ||||
| -rw-r--r-- | docs/elements/media.html | 14 | ||||
| -rw-r--r-- | docs/elements/tables.html | 2 | ||||
| -rw-r--r-- | docs/elements/typography.html | 2 |
diff --git a/docs/elements/buttons.html b/docs/elements/buttons.html index d887d6c..fd7c09d 100644 --- a/docs/elements/buttons.html +++ b/docs/elements/buttons.html @@ -76,6 +76,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> diff --git a/docs/elements/code.html b/docs/elements/code.html index e6c88aa..40988a3 100644 --- a/docs/elements/code.html +++ b/docs/elements/code.html @@ -76,6 +76,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> diff --git a/docs/elements/forms.html b/docs/elements/forms.html index 25b2450..2af7197 100644 --- a/docs/elements/forms.html +++ b/docs/elements/forms.html @@ -76,6 +76,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> diff --git a/docs/elements/icons.html b/docs/elements/icons.html index b641254..b0b7bf3 100644 --- a/docs/elements/icons.html +++ b/docs/elements/icons.html @@ -76,6 +76,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> diff --git a/docs/elements/labels.html b/docs/elements/labels.html index bd0857a..11dc596 100644 --- a/docs/elements/labels.html +++ b/docs/elements/labels.html @@ -76,6 +76,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> diff --git a/docs/elements/media.html b/docs/elements/media.html index 2495c9b..2ba89d7 100644 --- a/docs/elements/media.html +++ b/docs/elements/media.html @@ -76,6 +76,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> @@ -202,9 +204,11 @@ <p>Media includes responsive images, figures and video classes.</p> <h4 class="s-subtitle" id="media-images">Images<a class="anchor" href="#media-images" aria-hidden="true">#</a></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="docs-demo columns"> <div class="column col-12"><img class="img-responsive rounded" src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper"></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> +</code></pre> <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> @@ -220,8 +224,7 @@ </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> + <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-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">Figure<a class="anchor" href="#media-figure" aria-hidden="true">#</a></h4> @@ -238,6 +241,11 @@ </figure> </div> </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"figure"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive ..."</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"figure-caption text-center"</span>></span>macOS Yosemite wallpaper<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> +<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> +</code></pre> <h4 class="s-subtitle" id="media-video">Video<a class="anchor" href="#media-video" aria-hidden="true">#</a></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. diff --git a/docs/elements/tables.html b/docs/elements/tables.html index edd3b2b..4458116 100644 --- a/docs/elements/tables.html +++ b/docs/elements/tables.html @@ -76,6 +76,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> diff --git a/docs/elements/typography.html b/docs/elements/typography.html index cb63733..da0589b 100644 --- a/docs/elements/typography.html +++ b/docs/elements/typography.html @@ -76,6 +76,8 @@ </li> <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> </li> + <li class="menu-item"><a href="../layout/hero.html">Hero</a> + </li> <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> </li> </ul> |