Summary Files Commits Branches @commit @diff @stats
path: root / docs / elements
diff options
context:
space:
mode:
Commit81ee834ec6914f8b284e0724d541ed927513e6bd (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-11-20 11:54:48 +0800
Committer
 GitHub <noreply@github.com>
2018-11-20 11:54:48 +0800
Filesac0c29f2a5fa344bb7a05638602dd6dc60ce9e37 /docs/elements
Spectre-Dark-Gruvbox-81ee834ec6914f8b284e0724d541ed927513e6bd.tar
Spectre-Dark-Gruvbox-81ee834ec6914f8b284e0724d541ed927513e6bd.tar.gz
Spectre-Dark-Gruvbox-81ee834ec6914f8b284e0724d541ed927513e6bd.zip
Parentca1bdc5d86edb4d1baf3e9d1fabc89977950a2b4 (diff)
Parentba4c380af32bc75dad1e03c2386b5f8a3fb9118f (diff)
Merge pull request #534 from picturepan2/0.5.6 v0.5.6
0.5.6
8 files changed, 199 insertions, 19 deletions
-rw-r--r--docs/elements/buttons.html15
-rw-r--r--docs/elements/code.html24
-rw-r--r--docs/elements/forms.html21
-rw-r--r--docs/elements/icons.html19
-rw-r--r--docs/elements/labels.html16
-rw-r--r--docs/elements/media.html27
-rw-r--r--docs/elements/tables.html81
-rw-r--r--docs/elements/typography.html15
diff --git a/docs/elements/buttons.html b/docs/elements/buttons.html
index d887d6c..d68f684 100644
--- a/docs/elements/buttons.html
+++ b/docs/elements/buttons.html
@@ -19,7 +19,9 @@
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
- <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ <div class="btns d-flex">
+ <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+ </div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,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>
@@ -354,6 +358,15 @@
</div>
</div>
</div>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>
+ docsearch({
+ apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
+ indexName: 'picturepan2_spectre',
+ inputSelector: '.docs-search',
+ debug: true
+ });
+ </script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/elements/code.html b/docs/elements/code.html
index e6c88aa..fb4befa 100644
--- a/docs/elements/code.html
+++ b/docs/elements/code.html
@@ -19,7 +19,9 @@
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
- <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ <div class="btns d-flex">
+ <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+ </div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,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>
@@ -200,8 +204,13 @@
</div>
</div>
<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.
+ <h4 class="s-subtitle" id="code-inline">Inline code<a class="anchor" href="#code-inline" aria-hidden="true">#</a></h4>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- inline code --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>code<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
+</code></pre>
+ <p>For inline code, you can use the &lt;code&gt; element. </p>
+ <h4 class="s-subtitle" id="code-snippet">Code snippet<a class="anchor" href="#code-snippet" aria-hidden="true">#</a></h4>
+ <p>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> attribute 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>
@@ -226,6 +235,15 @@
</div>
</div>
</div>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>
+ docsearch({
+ apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
+ indexName: 'picturepan2_spectre',
+ inputSelector: '.docs-search',
+ debug: true
+ });
+ </script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/elements/forms.html b/docs/elements/forms.html
index 25b2450..97d5980 100644
--- a/docs/elements/forms.html
+++ b/docs/elements/forms.html
@@ -19,7 +19,9 @@
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
- <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ <div class="btns d-flex">
+ <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+ </div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,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>
@@ -200,6 +204,7 @@
</div>
</div>
<p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p>
+ <h4 class="s-subtitle" id="forms-input">Form input<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
@@ -218,6 +223,7 @@
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
+ <h4 class="s-subtitle" id="forms-textarea">Form textarea<a class="anchor" href="#forms-textarea" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
@@ -232,6 +238,7 @@
<span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
+ <h4 class="s-subtitle" id="forms-select">Form select<a class="anchor" href="#forms-select" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
@@ -262,6 +269,7 @@
<span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
+ <h4 class="s-subtitle" id="forms-radio">Form radio<a class="anchor" href="#forms-radio" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<form>
@@ -290,6 +298,7 @@
<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
+ <h4 class="s-subtitle" id="forms-switch">Form switch<a class="anchor" href="#forms-switch" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
@@ -312,6 +321,7 @@
<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
+ <h4 class="s-subtitle" id="forms-checkbox">Form checkbox<a class="anchor" href="#forms-checkbox" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
@@ -949,6 +959,15 @@
</div>
</div>
</div>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>
+ docsearch({
+ apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
+ indexName: 'picturepan2_spectre',
+ inputSelector: '.docs-search',
+ debug: true
+ });
+ </script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/elements/icons.html b/docs/elements/icons.html
index b641254..428d068 100644
--- a/docs/elements/icons.html
+++ b/docs/elements/icons.html
@@ -19,7 +19,9 @@
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
- <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ <div class="btns d-flex">
+ <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+ </div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,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>
@@ -328,6 +332,10 @@
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-upload"></i></button>
<p>icon-upload</p>
</div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-copy"></i></button>
+ <p>icon-copy</p>
+ </div>
</div>
<h4 class="s-subtitle" id="icons-object">Object icons<a class="anchor" href="#icons-object" aria-hidden="true">#</a></h4>
<div class="columns">
@@ -397,6 +405,15 @@
</div>
</div>
</div>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>
+ docsearch({
+ apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
+ indexName: 'picturepan2_spectre',
+ inputSelector: '.docs-search',
+ debug: true
+ });
+ </script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/elements/labels.html b/docs/elements/labels.html
index bd0857a..12b3962 100644
--- a/docs/elements/labels.html
+++ b/docs/elements/labels.html
@@ -19,7 +19,9 @@
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
- <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ <div class="btns d-flex">
+ <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+ </div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,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>
@@ -210,6 +214,7 @@
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>&gt;</span>default label<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">"label label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</code></pre>
+ <h4 class="s-subtitle" id="labels-rounded">Rounded labels<a class="anchor" href="#labels-rounded" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div>
</div>
@@ -228,6 +233,15 @@
</div>
</div>
</div>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>
+ docsearch({
+ apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
+ indexName: 'picturepan2_spectre',
+ inputSelector: '.docs-search',
+ debug: true
+ });
+ </script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/elements/media.html b/docs/elements/media.html
index 2495c9b..f01c193 100644
--- a/docs/elements/media.html
+++ b/docs/elements/media.html
@@ -19,7 +19,9 @@
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
- <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ <div class="btns d-flex">
+ <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+ </div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,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 +206,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 &lt;img&gt; 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">&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>
+</code></pre>
<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>
@@ -220,8 +226,7 @@
</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>
+ <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-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">Figure<a class="anchor" href="#media-figure" aria-hidden="true">#</a></h4>
@@ -238,6 +243,11 @@
</figure>
</div>
</div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"figure"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"figure-caption text-center"</span>&gt;</span>macOS Yosemite wallpaper<span class="hljs-tag">&lt;/<span class="hljs-name">figcaption</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</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.
@@ -269,6 +279,15 @@
</div>
</div>
</div>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>
+ docsearch({
+ apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
+ indexName: 'picturepan2_spectre',
+ inputSelector: '.docs-search',
+ debug: true
+ });
+ </script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/elements/tables.html b/docs/elements/tables.html
index edd3b2b..f41c57a 100644
--- a/docs/elements/tables.html
+++ b/docs/elements/tables.html
@@ -19,7 +19,9 @@
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
- <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ <div class="btns d-flex">
+ <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+ </div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,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,7 +206,7 @@
<p>Tables include default styles for tables and data sets.</p>
<div class="docs-demo columns">
<div class="column col-12">
- <table class="table table-striped">
+ <table class="table">
<thead>
<tr>
<th>Name</th>
@@ -236,8 +240,62 @@
</div>
</div>
<p>Add the <code>table</code> class to any &lt;table&gt; element.
- The class will add padding, border and emphasized table header.
- Use the <code>table-striped</code> class to &lt;table&gt; to add zebra striped style.
+ The class will add padding, border and emphasized table header.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>genre<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>release date<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>The Shawshank Redemption<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Crime, Drama<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>14 October 1994<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
+</code></pre>
+ <h4 class="s-subtitle" id="tables-striped">Striped tables<a class="anchor" href="#tables-striped" aria-hidden="true">#</a></h4>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Genre</th>
+ <th>Release date</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>The Shawshank Redemption</td>
+ <td>Crime, Drama</td>
+ <td>14 October 1994</td>
+ </tr>
+ <tr class="active">
+ <td>The Godfather</td>
+ <td>Crime, Drama</td>
+ <td>24 March 1972</td>
+ </tr>
+ <tr>
+ <td>Schindler's List</td>
+ <td>Biography, Drama, History</td>
+ <td>4 February 1994</td>
+ </tr>
+ <tr>
+ <td>Se7en</td>
+ <td>Crime, Drama, Mystery</td>
+ <td>22 September 1995</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p>Use the <code>table-striped</code> class to &lt;table&gt; to add zebra striped style.
For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style.
</p>
<p>Use the <code>active</code> class to make &lt;tr&gt; element highlighted.</p>
@@ -257,11 +315,11 @@
<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
-
</code></pre>
+ <h4 class="s-subtitle" id="tables-scroll">Scrollable tables<a class="anchor" href="#tables-scroll" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-12">
- <table class="table table-striped table-scroll">
+ <table class="table table-scroll">
<thead>
<tr>
<th>Name</th>
@@ -310,7 +368,7 @@
</div>
</div>
<p>Add the <code>table-scroll</code> class to &lt;table&gt; to have a horizontally scrollable table.</p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-striped table-scroll"</span>&gt;</span>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-scroll"</span>&gt;</span>
...
<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
</code></pre>
@@ -325,6 +383,15 @@
</div>
</div>
</div>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>
+ docsearch({
+ apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
+ indexName: 'picturepan2_spectre',
+ inputSelector: '.docs-search',
+ debug: true
+ });
+ </script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/elements/typography.html b/docs/elements/typography.html
index cb63733..56f2ff4 100644
--- a/docs/elements/typography.html
+++ b/docs/elements/typography.html
@@ -19,7 +19,9 @@
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
- <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ <div class="btns d-flex">
+ <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+ </div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,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>
@@ -405,6 +409,15 @@
</div>
</div>
</div>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>
+ docsearch({
+ apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
+ indexName: 'picturepan2_spectre',
+ inputSelector: '.docs-search',
+ debug: true
+ });
+ </script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),