Summary Files Commits Branches @commit @diff @stats
path: root / docs / experimentals
diff options
context:
space:
mode:
Commitef6d8056d26fe952891e47660f1cb0d1ed7041f1 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-11-08 07:42:33 +0800
Committer
 GitHub <noreply@github.com>
2018-11-08 07:42:33 +0800
Files26e1a053ee953a570e54939ef30c2c89636a6acf /docs/experimentals
Spectre-Dark-Gruvbox-ef6d8056d26fe952891e47660f1cb0d1ed7041f1.tar
Spectre-Dark-Gruvbox-ef6d8056d26fe952891e47660f1cb0d1ed7041f1.tar.gz
Spectre-Dark-Gruvbox-ef6d8056d26fe952891e47660f1cb0d1ed7041f1.zip
Parent0a6c76429b294c26d318479c05736537f3d95abb (diff)
Parenteb7fd9d2538accfe5d291ca93d2ce7dd6e62fefa (diff)
Merge pull request #522 from picturepan2/0.5.5 v0.5.5
0.5.5
diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html
new file mode 100644
index 0000000..72a0f30
--- /dev/null
+++ b/docs/experimentals/autocomplete.html
@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Autocomplete - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/autocomplete.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="autocomplete">
+ <h3 class="s-title">Autocomplete<a class="anchor" href="#autocomplete" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p>
+ <div class="docs-demo columns">
+ <div class="column col-9 col-xs-12">
+ <div class="form-group">
+ <div class="form-autocomplete">
+ <div class="form-autocomplete-input form-input"><span class="chip">Bruce Banner</span>
+ <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Avatar">Thor Odinson</div>
+ <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Avatar">Steve Rogers</div>
+ <div class="chip">
+ <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
+ </div><span class="chip active">Natasha Romanoff</span>
+ <input class="form-input" type="text" placeholder="">
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-9 col-xs-12">
+ <div class="form-group">
+ <div class="form-autocomplete">
+ <div class="form-autocomplete-input form-input is-focused"><span class="chip">Bruce Banner<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Thor Odinson">Thor Odinson<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span>
+ <div class="has-icon-left">
+ <input class="form-input" type="text" placeholder="" value="S"><i class="form-icon loading"></i>
+ </div>
+ </div>
+ <ul class="menu">
+ <li class="menu-item"><a href="#autocomplete">
+ <div class="tile tile-centered">
+ <div class="tile-icon"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Steve Rogers"></div>
+ <div class="tile-content">
+ <mark>S</mark>teve Roger
+ <mark>s</mark>
+ </div>
+ </div></a></li>
+ <li class="menu-item"><a href="#autocomplete">
+ <div class="tile tile-centered">
+ <div class="tile-icon">
+ <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
+ </div>
+ <div class="tile-content">Tony
+ <mark>S</mark>tark
+ </div>
+ </div></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p>Add a container element with the <code>form-autocomplete</code> class.
+ There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component.
+ You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.
+ </p>
+ <p>
+ Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
+ The autocomplete HTML structure is exampled below.
+ </p>
+ <div class="docs-demo columns">
+ <div class="column col-9 col-xs-12">
+ <div class="form-group">
+ <div class="form-autocomplete autocomplete-oneline">
+ <div class="form-autocomplete-input form-input"><span class="chip">Bruce Banner</span>
+ <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-1.png" alt="Avatar">Thor Odinson</div>
+ <div class="chip"><img class="avatar avatar-sm" src="../img/avatar-4.png" alt="Avatar">Steve Rogers</div>
+ <div class="chip">
+ <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
+ </div><span class="chip active">Natasha Romanoff</span>
+ <input class="form-input" type="text" placeholder="">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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">"form-autocomplete"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- autocomplete input container --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-autocomplete-input form-input"</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- autocomplete chips --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</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/avatar-1.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-sm"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Thor Odinson"</span>&gt;</span>
+ Thor Odinson
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- autocomplete real input box --&gt;</span>
+ <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">placeholder</span>=<span class="hljs-string">"typing here"</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- autocomplete suggestion list --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu list items --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</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">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/calendars.html b/docs/experimentals/calendars.html
new file mode 100644
index 0000000..7f42eb8
--- /dev/null
+++ b/docs/experimentals/calendars.html
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Calendars - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/calendars.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="calendars">
+ <h3 class="s-title">Calendars<a class="anchor" href="#calendars" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
+ <div class="docs-demo columns">
+ <div class="column col-4 col-md-12">
+ <div class="calendar">
+ <div class="calendar-nav navbar">
+ <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-left"></i></button>
+ <div class="navbar-primary">March 2017</div>
+ <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-right"></i></button>
+ </div>
+ <div class="calendar-container">
+ <div class="calendar-header">
+ <div class="calendar-date">Sun</div>
+ <div class="calendar-date">Mon</div>
+ <div class="calendar-date">Tue</div>
+ <div class="calendar-date">Wed</div>
+ <div class="calendar-date">Thu</div>
+ <div class="calendar-date">Fri</div>
+ <div class="calendar-date">Sat</div>
+ </div>
+ <div class="calendar-body">
+ <div class="calendar-date prev-month">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date prev-month">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date prev-month">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">1</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">2</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">3</button>
+ </div>
+ <div class="calendar-date tooltip" data-tooltip="Today">
+ <button class="date-item date-today">4</button>
+ </div>
+ <div class="calendar-date tooltip" data-tooltip="Not available">
+ <button class="date-item" disabled="">5</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">6</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">7</button>
+ </div>
+ <div class="calendar-date tooltip" data-tooltip="You have appointments">
+ <button class="date-item badge">8</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">9</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">10</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">11</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">12</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">13</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">14</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">15</button>
+ </div>
+ <div class="calendar-date calendar-range range-start">
+ <button class="date-item">16</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">17</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">18</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">19</button>
+ </div>
+ <div class="calendar-date calendar-range range-end">
+ <button class="date-item">20</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">21</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">22</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">23</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">24</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">25</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">29</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">30</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">31</button>
+ </div>
+ <div class="calendar-date next-month">
+ <button class="date-item">1</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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">"calendar"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar navbar --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-nav navbar"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-primary"</span>&gt;</span>March 2017<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Sun<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Mon<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Tue<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Wed<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Thu<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Fri<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Sat<span class="hljs-tag">&lt;/<span class="hljs-name">div</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar previous month --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>26<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>28<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- calendar current month --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar date: today --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item date-today"</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar date: tooltip --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"You have appointments"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar date: not available --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Not available"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">""</span>&gt;</span>6<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- calendar range --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-start"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>7<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>8<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-end"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>9<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>31<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- calendar next month --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date next-month"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">div</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">div</span>&gt;</span>
+</code></pre>
+ <h4 class="s-subtitle" id="calendars-sizes">Calendars sizes<a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a></h4>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <div class="calendar calendar-lg">
+ <div class="calendar-nav navbar">
+ <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-left"></i></button>
+ <div class="navbar-primary">March 2017</div>
+ <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-right"></i></button>
+ </div>
+ <div class="calendar-container">
+ <div class="calendar-header">
+ <div class="calendar-date">Sun</div>
+ <div class="calendar-date">Mon</div>
+ <div class="calendar-date">Tue</div>
+ <div class="calendar-date">Wed</div>
+ <div class="calendar-date">Thu</div>
+ <div class="calendar-date">Fri</div>
+ <div class="calendar-date">Sat</div>
+ </div>
+ <div class="calendar-body">
+ <div class="calendar-date prev-month">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date prev-month">
+ <button class="date-item">27</button>
+ <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Zhonghe Festival</a></div>
+ </div>
+ <div class="calendar-date prev-month">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">1</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">2</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">3</button>
+ </div>
+ <div class="calendar-date tooltip" data-tooltip="Today">
+ <button class="date-item date-today">4</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item" disabled="">5</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">6</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">7</button>
+ </div>
+ <div class="calendar-date tooltip" data-tooltip="You have appointments">
+ <button class="date-item badge">8</button>
+ <div class="calendar-events"><a class="calendar-event bg-primary text-light" href="#calendars">Product launch event</a><a class="calendar-event bg-error text-light" href="#calendars">International Women's Day</a></div>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">9</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">10</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">11</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">12</button>
+ <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a></div>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">13</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">14</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">15</button>
+ </div>
+ <div class="calendar-date calendar-range range-start">
+ <button class="date-item">16</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">17</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">18</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">19</button>
+ </div>
+ <div class="calendar-date calendar-range range-end">
+ <button class="date-item">20</button>
+ <div class="calendar-events"><a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a></div>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">21</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">22</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">23</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">24</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">25</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">29</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">30</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">31</button>
+ </div>
+ <div class="calendar-date next-month disabled">
+ <button class="date-item">1</button>
+ <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">April Fools' Day</a></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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">"calendar calendar-lg"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar navbar structure --&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar header structure --&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar date with events --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item active"</span>&gt;</span>20<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-events"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-event bg-success text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#calendars"</span>&gt;</span>Spring Equinox<span class="hljs-tag">&lt;/<span class="hljs-name">a</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">div</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">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/carousels.html b/docs/experimentals/carousels.html
new file mode 100644
index 0000000..0c7293e
--- /dev/null
+++ b/docs/experimentals/carousels.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Carousels - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/carousels.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="carousels">
+ <h3 class="s-title">Carousels<a class="anchor" href="#carousels" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <div class="carousel">
+ <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
+ <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
+ <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
+ <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
+ <div class="carousel-container">
+ <figure class="carousel-item">
+ <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
+ <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
+ </figure>
+ <figure class="carousel-item">
+ <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
+ <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+ </figure>
+ <figure class="carousel-item">
+ <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
+ <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
+ </figure>
+ <figure class="carousel-item">
+ <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
+ <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="../img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
+ </figure>
+ </div>
+ <div class="carousel-nav">
+ <label class="nav-item text-hide c-hand" for="slide-1">1</label>
+ <label class="nav-item text-hide c-hand" for="slide-2">2</label>
+ <label class="nav-item text-hide c-hand" for="slide-3">3</label>
+ <label class="nav-item text-hide c-hand" for="slide-4">4</label>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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">"carousel"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- carousel locator --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- carousel container --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-container"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- carousel item --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</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 rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite.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">figure</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</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 rounded"</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">figure</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</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 rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.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">figure</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</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 rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan-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">figure</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- carousel navigation --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-nav"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>&gt;</span>4<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>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html
new file mode 100644
index 0000000..a12db02
--- /dev/null
+++ b/docs/experimentals/comparison.html
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Comparison sliders - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/comparison.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="comparison">
+ <h3 class="s-title">Comparison sliders<a class="anchor" href="#comparison" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <div class="comparison-slider">
+ <figure class="comparison-before"><img class="rounded" src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper">
+ <div class="comparison-label">Before</div>
+ </figure>
+ <figure class="comparison-after"><img class="filter-grayscale rounded" src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper">
+ <div class="comparison-label">After</div>
+ <textarea class="comparison-resizer" readonly=""></textarea>
+ </figure>
+ </div>
+ </div>
+ </div>
+ <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">"comparison-slider"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-before"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- image (before) --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-label"</span>&gt;</span>Before<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-after"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- image (after) --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-label"</span>&gt;</span>After<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-resizer"</span> <span class="hljs-attr">readonly</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">figure</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/filters.html b/docs/experimentals/filters.html
new file mode 100644
index 0000000..b1f5179
--- /dev/null
+++ b/docs/experimentals/filters.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Filters - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/filters.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="filters">
+ <h3 class="s-title">Filters<a class="anchor" href="#filters" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Filters are CSS only content filters.</p>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <div class="filter">
+ <input class="filter-tag" id="tag-0" type="radio" name="filter-radio" hidden="" checked="">
+ <input class="filter-tag" id="tag-1" type="radio" name="filter-radio" hidden="">
+ <input class="filter-tag" id="tag-2" type="radio" name="filter-radio" hidden="">
+ <input class="filter-tag" id="tag-3" type="radio" name="filter-radio" hidden="">
+ <input class="filter-tag" id="tag-4" type="radio" name="filter-radio" hidden="">
+ <div class="filter-nav">
+ <label class="chip" for="tag-0">All</label>
+ <label class="chip" for="tag-1">Action</label>
+ <label class="chip" for="tag-2">Roleplaying</label>
+ <label class="chip" for="tag-3">Shooter</label>
+ <label class="chip" for="tag-4">Sports</label>
+ </div>
+ <div class="filter-body columns">
+ <div class="column col-4 filter-item" data-tag="tag-2">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Fallout 4</div>
+ <div class="card-subtitle">Roleplaying</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-3">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Halo 5</div>
+ <div class="card-subtitle">Shooter</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-1">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Quantum Break</div>
+ <div class="card-subtitle">Action</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-4">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Forza Horizon 3</div>
+ <div class="card-subtitle">Sports</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-2">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Final Fantasy XV</div>
+ <div class="card-subtitle">Roleplaying</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-4">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">NBA 2K17</div>
+ <div class="card-subtitle">Sports</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-3">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Battlefield 1</div>
+ <div class="card-subtitle">Shooter</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-1">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">GTA V</div>
+ <div class="card-subtitle">Action</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-4">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">FIFA 17</div>
+ <div class="card-subtitle">Sports</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-3">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Overwatch</div>
+ <div class="card-subtitle">Shooter</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-3">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Titanfall 2</div>
+ <div class="card-subtitle">Shooter</div>
+ </div>
+ </div>
+ </div>
+ <div class="column col-4 filter-item" data-tag="tag-3">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title">Gears of Wars 4</div>
+ <div class="card-subtitle">Shooter</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags.
+ <code>tag-0</code> is reserved for clearing filter (or showing all).
+ You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters.
+ </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">"filter"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tag-0"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</span> <span class="hljs-attr">checked</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tag-1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tag-2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-tag"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"filter-radio"</span> <span class="hljs-attr">hidden</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-nav"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-0"</span>&gt;</span>All<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-1"</span>&gt;</span>Action<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tag-2"</span>&gt;</span>Roleplaying<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>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-body"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-item card"</span> <span class="hljs-attr">data-tag</span>=<span class="hljs-string">"tag-1"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Filter item content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-item card"</span> <span class="hljs-attr">data-tag</span>=<span class="hljs-string">"tag-2"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Filter item content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Filter items --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/meters.html b/docs/experimentals/meters.html
new file mode 100644
index 0000000..4bb9286
--- /dev/null
+++ b/docs/experimentals/meters.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Meters - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/meters.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="meters">
+ <h3 class="s-title">Meters<a class="anchor" href="#meters" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Meters represent the value within the known range.</p>
+ <div class="docs-demo columns">
+ <div class="column col-3 col-xs-12">
+ <meter class="meter" value="20" min="0" max="100"></meter>
+ </div>
+ <div class="column col-3 col-xs-12">
+ <meter class="meter" value="60" min="0" low="30" optimum="60" high="80" max="100"></meter>
+ </div>
+ <div class="column col-3 col-xs-12">
+ <meter class="meter" value="85" min="0" low="30" high="80" max="100"></meter>
+ </div>
+ <div class="column col-3 col-xs-12">
+ <meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- Meter is green when low &lt; value &lt; high --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"60"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Meter is yellow when value &lt; low or high &lt; value --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"85"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Meter is red when value &lt; low &lt; high &lt; optimum or optimum &lt; low &lt; high &lt; value --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">optimum</span>=<span class="hljs-string">"90"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html
new file mode 100644
index 0000000..e9f3f9d
--- /dev/null
+++ b/docs/experimentals/off-canvas.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Off-canvas - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/off-canvas.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="off-canvas">
+ <h3 class="s-title">Off-canvas<a class="anchor" href="#off-canvas" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.</p>
+ <p>
+ By default, the off-canvas menu is collapsed whenever the window width is.
+ But you can add the <code>off-canvas-sidebar-show</code> class to the <code>off-canvas</code> to make the sidebar expanded when the window width is larger than or equal to <strong>960px</strong>.
+ </p>
+ <div class="docs-demo columns">
+ <div class="column">
+ <div class="off-canvas off-canvas-sidebar-show"><a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-demo"><i class="icon icon-menu"></i></a>
+ <div class="off-canvas-sidebar flex-centered" id="sidebar-demo"><span>Sidebar</span></div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="content">
+ <h4>Lorem ipsum</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+ <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.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p>You can open the sidebar by adding the class <code>active</code> to <code>off-canvas-sidebar</code>.
+ And remove the <code>active</code> to close it.
+ </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">"off-canvas"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- off-screen toggle button --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-toggle btn btn-primary btn-action"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#sidebar-id"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-menu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sidebar-id"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-sidebar"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- off-screen sidebar --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-overlay"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-content"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- off-screen content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/parallax.html b/docs/experimentals/parallax.html
new file mode 100644
index 0000000..f1ef81c
--- /dev/null
+++ b/docs/experimentals/parallax.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Parallax - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/parallax.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="parallax">
+ <h3 class="s-title">Parallax<a class="anchor" href="#parallax" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
+ <div class="docs-demo columns">
+ <div class="column col-sm-12 col-8 col-mx-auto">
+ <div class="parallax">
+ <div class="parallax-top-left" tabindex="1"></div>
+ <div class="parallax-top-right" tabindex="2"></div>
+ <div class="parallax-bottom-left" tabindex="3"></div>
+ <div class="parallax-bottom-right" tabindex="4"></div>
+ <div class="parallax-content">
+ <div class="parallax-front">
+ <h2>tvOS parallax demo</h2>
+ </div>
+ <div class="parallax-back"><img class="img-responsive rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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">"parallax"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-top-left"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"1"</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-top-right"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"2"</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-bottom-left"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"3"</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-bottom-right"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"4"</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-content"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-front"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>tvOS parallax demo<span class="hljs-tag">&lt;/<span class="hljs-name">h2</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-back"</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-responsive rounded"</span> <span class="hljs-attr">...</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">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/progress.html b/docs/experimentals/progress.html
new file mode 100644
index 0000000..a71b6bb
--- /dev/null
+++ b/docs/experimentals/progress.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Progress - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/progress.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="progress">
+ <h3 class="s-title">Progress<a class="anchor" href="#progress" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>The Progress indicates the progress completion of a task.</p>
+ <div class="docs-demo columns">
+ <div class="column col-3 col-xs-12">
+ <progress class="progress" value="75" max="100"></progress>
+ </div>
+ <div class="column col-3 col-xs-12">
+ <progress class="progress" value="50" max="100"></progress>
+ </div>
+ <div class="column col-3 col-xs-12">
+ <progress class="progress" value="25" max="100"></progress>
+ </div>
+ <div class="column col-3 col-xs-12">
+ <progress class="progress" max="100"></progress>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/sliders.html b/docs/experimentals/sliders.html
new file mode 100644
index 0000000..ee79844
--- /dev/null
+++ b/docs/experimentals/sliders.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Sliders - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/sliders.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="sliders">
+ <h3 class="s-title">Sliders<a class="anchor" href="#sliders" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Sliders are for selecting values from ranges.</p>
+ <p>You can add the class <code>tooltip</code> to have tooltip labels.
+ If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.
+ </p>
+ <div class="docs-demo columns">
+ <div class="column col-6 col-xs-12">
+ <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
+ </div>
+ <div class="column col-6 col-xs-12">
+ <input class="slider" type="range" min="0" max="100" value="50" disabled="">
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- Sliders --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Sliders with tooltips --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider tooltip"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/experimentals/timelines.html b/docs/experimentals/timelines.html
new file mode 100644
index 0000000..929c9a2
--- /dev/null
+++ b/docs/experimentals/timelines.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Timelines - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/timelines.html">
+ </head>
+ <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>
+ <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">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="timelines">
+ <h3 class="s-title">Timelines<a class="anchor" href="#timelines" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Timelines are ordered sequences of activities.</p>
+ <div class="docs-demo columns">
+ <div class="column col-9 col-sm-12">
+ <div class="timeline">
+ <div class="timeline-item" id="timeline-example-1">
+ <div class="timeline-left"><a class="timeline-icon tooltip" href="#timeline-example-1" data-tooltip="March 2016"></a></div>
+ <div class="timeline-content">
+ <div class="tile">
+ <div class="tile-content">
+ <p class="tile-subtitle">March 2016</p>
+ <p class="tile-title">Initial commit</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="timeline-item" id="timeline-example-2">
+ <div class="timeline-left"><a class="timeline-icon icon-lg tooltip" href="#timeline-example-2" data-tooltip="February 2017"><i class="icon icon-check"></i></a></div>
+ <div class="timeline-content">
+ <div class="tile">
+ <div class="tile-content">
+ <p class="tile-subtitle">February 2017</p>
+ <p class="tile-title">New Documents experience</p>
+ <p class="tile-title"><a href="components.html#bars">Bars</a>: represent the progress of a task</p>
+ <p class="tile-title"><a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps</p>
+ <p class="tile-title"><a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks</p>
+ </div>
+ <div class="tile-action">
+ <button class="btn">View</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="timeline-item" id="timeline-example-3">
+ <div class="timeline-left"><a class="timeline-icon icon-lg tooltip" href="#timeline-example-3" data-tooltip="March 2017"><i class="icon icon-check"></i></a></div>
+ <div class="timeline-content">
+ <div class="tile">
+ <div class="tile-content">
+ <p class="tile-subtitle">March 2017</p>
+ <p class="tile-title"><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</p>
+ <p class="tile-title"><a href="components.html#popovers">Popovers</a>: small overlay content containers</p>
+ <p class="tile-title"><a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display</p>
+ <p class="tile-title"><a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images</p>
+ </div>
+ <div class="tile-action">
+ <button class="btn">View</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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">"timeline"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-item"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"timeline-example-1"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-left"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#timeline-example-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-content"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- tiles structure --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-item"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"timeline-example-2"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-left"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-icon icon-lg"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#timeline-example-2"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-check"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-content"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- tiles structure --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file