Summary Files Commits Branches @commit @diff @stats
path: root / docs / experimentals.html
diff options
context:
space:
mode:
Commitb903b30d81eb531eead430db3c9cc934ab5dea8f (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-06-04 21:12:57 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2018-06-04 21:12:57 +0800
Files45153a88bc95c72566e19501ccf8b8914a824871 /docs/experimentals.html
Spectre-Dark-Gruvbox-b903b30d81eb531eead430db3c9cc934ab5dea8f.tar
Spectre-Dark-Gruvbox-b903b30d81eb531eead430db3c9cc934ab5dea8f.tar.gz
Spectre-Dark-Gruvbox-b903b30d81eb531eead430db3c9cc934ab5dea8f.zip
Parent17423a6156ba7cdc4de6744b0098d61702111101 (diff)
Update old docs to new Pug templates
1 files changed, 866 insertions, 1132 deletions
-rw-r--r--docs/experimentals.html1998
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 4f0d944..978788d 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -1,1222 +1,956 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <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="author" content="https://github.com/picturepan2/">
- <title>Experimentals - Spectre.css CSS Framework</title>
- <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico">
- <link rel="icon" href="https://picturepan2.github.io/spectre/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">
-</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>
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
- </div>
-
- <div id="sidebar" class="docs-sidebar off-canvas-sidebar">
- <div class="docs-brand">
- <a href="index.html" class="docs-logo">
- <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 type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-1">
- Getting started
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="getting-started.html">Introduction</a>
- </li>
- <li class="menu-item">
- <a href="getting-started.html#installation">Installation</a>
- </li>
- <li class="menu-item">
- <a href="getting-started.html#custom">Custom version</a>
- </li>
- <li class="menu-item">
- <a href="getting-started.html#browsers">Browser support</a>
- </li>
- <li class="menu-item">
- <a href="getting-started.html#whatsnew">What's new</a>
- </li>
- </ul>
+ <head>
+ <title>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="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">
+ </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><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="/"><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.html#introduction">Introduction</a></li>
+ <li class="menu-item"><a href="getting-started.html#installation">Installation</a></li>
+ <li class="menu-item"><a href="getting-started.html#custom">Custom version</a></li>
+ <li class="menu-item"><a href="getting-started.html#browsers">Browser support</a></li>
+ <li class="menu-item"><a href="getting-started.html#whatsnew">What's new</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-2">
- Elements
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="elements.html">Typography</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#tables">Tables</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#buttons">Buttons</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#forms">Forms</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#icons">Icons</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#labels">Labels</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#codes">Codes</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#media">Media</a>
- </li>
- </ul>
+ <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.html#typography">Typography</a></li>
+ <li class="menu-item"><a href="elements.html#tables">Tables</a></li>
+ <li class="menu-item"><a href="elements.html#buttons">Buttons</a></li>
+ <li class="menu-item"><a href="elements.html#forms">Forms</a></li>
+ <li class="menu-item"><a href="elements.html#icons">Icons</a></li>
+ <li class="menu-item"><a href="elements.html#labels">Labels</a></li>
+ <li class="menu-item"><a href="elements.html#code">Code</a></li>
+ <li class="menu-item"><a href="elements.html#media">Media</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-3">
- Layout
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="layout.html">Flexbox grid</a>
- </li>
- <li class="menu-item">
- <a href="layout.html#responsive">Responsive</a>
- </li>
- <li class="menu-item">
- <a href="layout.html#navbar">Navbar</a>
- </li>
- </ul>
+ <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.html#flexbox">Flexbox grid</a></li>
+ <li class="menu-item"><a href="layout.html#responsive">Responsive</a></li>
+ <li class="menu-item"><a href="layout.html#navbar">Navbar</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-4">
- Components
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="components.html">Accordions</a>
- </li>
- <li class="menu-item">
- <a href="components.html#avatars">Avatars</a>
- </li>
- <li class="menu-item">
- <a href="components.html#badges">Badges</a>
- </li>
- <li class="menu-item">
- <a href="components.html#bars">Bars</a>
- </li>
- <li class="menu-item">
- <a href="components.html#breadcrumbs">Breadcrumbs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#cards">Cards</a>
- </li>
- <li class="menu-item">
- <a href="components.html#chips">Chips</a>
- </li>
- <li class="menu-item">
- <a href="components.html#empty">Empty states</a>
- </li>
- <li class="menu-item">
- <a href="components.html#menus">Menus</a>
- </li>
- <li class="menu-item">
- <a href="components.html#modals">Modals</a>
- </li>
- <li class="menu-item">
- <a href="components.html#navs">Navs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#pagination">Pagination</a>
- </li>
- <li class="menu-item">
- <a href="components.html#panels">Panels</a>
- </li>
- <li class="menu-item">
- <a href="components.html#popovers">Popovers</a>
- </li>
- <li class="menu-item">
- <a href="components.html#steps">Steps</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tabs">Tabs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tiles">Tiles</a>
- </li>
- <li class="menu-item">
- <a href="components.html#toasts">Toasts</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tooltips">Tooltips</a>
- </li>
- </ul>
+ <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.html#accordions">Accordions</a></li>
+ <li class="menu-item"><a href="components.html#avatars">Avatars</a></li>
+ <li class="menu-item"><a href="components.html#badges">Badges</a></li>
+ <li class="menu-item"><a href="components.html#bars">Bars</a></li>
+ <li class="menu-item"><a href="components.html#breadcrumbs">Breadcrumbs</a></li>
+ <li class="menu-item"><a href="components.html#cards">Cards</a></li>
+ <li class="menu-item"><a href="components.html#chips">Chips</a></li>
+ <li class="menu-item"><a href="components.html#empty">Empty states</a></li>
+ <li class="menu-item"><a href="components.html#menu">Menu</a></li>
+ <li class="menu-item"><a href="components.html#modals">Modals</a></li>
+ <li class="menu-item"><a href="components.html#nav">Nav</a></li>
+ <li class="menu-item"><a href="components.html#pagination">Pagination</a></li>
+ <li class="menu-item"><a href="components.html#panels">Panels</a></li>
+ <li class="menu-item"><a href="components.html#popovers">Popovers</a></li>
+ <li class="menu-item"><a href="components.html#steps">Steps</a></li>
+ <li class="menu-item"><a href="components.html#tabs">Tabs</a></li>
+ <li class="menu-item"><a href="components.html#tiles">Tiles</a></li>
+ <li class="menu-item"><a href="components.html#toasts">Toasts</a></li>
+ <li class="menu-item"><a href="components.html#tooltips">Tooltips</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-5">
- Utilities
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="utilities.html">Colors</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#cursors">Cursors</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#display">Display</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#divider">Divider</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#loading">Loading</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#position">Position</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#shapes">Shapes</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#text">Text</a>
- </li>
- </ul>
+ <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.html#colors">Colors</a></li>
+ <li class="menu-item"><a href="utilities.html#cursors">Cursors</a></li>
+ <li class="menu-item"><a href="utilities.html#display">Display</a></li>
+ <li class="menu-item"><a href="utilities.html#divider">Divider</a></li>
+ <li class="menu-item"><a href="utilities.html#loading">Loading</a></li>
+ <li class="menu-item"><a href="utilities.html#position">Position</a></li>
+ <li class="menu-item"><a href="utilities.html#shapes">Shapes</a></li>
+ <li class="menu-item"><a href="utilities.html#text">Text</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked>
- <label class="accordion-header c-hand" for="docs-accordion-6">
- Experimentals
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="experimentals.html">Autocomplete</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#calendars">Calendars</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#carousels">Carousels</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#comparison">Comparison sliders</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#filters">Filters</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#meters">Meters</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#off-canvas">Off-canvas</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#parallax">Parallax</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#progress">Progress</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#sliders">Sliders</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#timelines">Timelines</a>
- </li>
- </ul>
+ <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.html#autocomplete">Autocomplete</a></li>
+ <li class="menu-item"><a href="experimentals.html#calendars">Calendars</a></li>
+ <li class="menu-item"><a href="experimentals.html#carousels">Carousels</a></li>
+ <li class="menu-item"><a href="experimentals.html#comparison">Comparison sliders</a></li>
+ <li class="menu-item"><a href="experimentals.html#filters">Filters</a></li>
+ <li class="menu-item"><a href="experimentals.html#meters">Meters</a></li>
+ <li class="menu-item"><a href="experimentals.html#off-canvas">Off-canvas</a></li>
+ <li class="menu-item"><a href="experimentals.html#parallax">Parallax</a></li>
+ <li class="menu-item"><a href="experimentals.html#progress">Progress</a></li>
+ <li class="menu-item"><a href="experimentals.html#sliders">Sliders</a></li>
+ <li class="menu-item"><a href="experimentals.html#timelines">Timelines</a></li>
+ </ul>
+ </div>
</div>
</div>
</div>
- </div>
- </div>
-
- <a class="off-canvas-overlay" href="#close"></a>
-
- <div id="content" class="docs-content off-canvas-content">
- <div id="experimentals" class="container">
- <h3 class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3>
- <div class="docs-note">
- <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.scss</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p>
- </div>
- </div>
-
- <div class="container">
- <div class="docs-ad">
- <div class="hide-md">
- <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
- <!-- GitHub-lg -->
- <ins class="adsbygoogle"
- 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">
- <!-- 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><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="experimentals">
+ <h3 class="s-title"><a class="anchor" href="#experimentals" aria-hidden="true">#</a>Experimentals</h3>
+ <p>
+ The Experimentals include experimental elements and features, mostly are not yet ready for wide use.
+ These elements and components are limited inside <code>spectre-exp.scss</code> before browsers fully support them.
+ Sometimes, there are some specific browsers targeted components.
+ </p>
</div>
- </div>
- </div>
-
- <div id="autocomplete" class="container">
- <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
- <div class="docs-note">
- <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p>
- </div>
- <div class="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 src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar">
- Thor Odinson
- </div>
- <div class="chip">
- <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar">
- Steve Rogers
- </div>
- <div class="chip">
- <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
- Tony Stark
+ <div class="container" id="autocomplete">
+ <h3 class="s-title"><a class="anchor" href="#autocomplete" aria-hidden="true">#</a>Autocomplete</h3>
+ <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p>
+ <div class="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>
- <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 href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
- </span>
- <span class="chip">
- <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
- Thor Odinson
- <a href="#" class="btn btn-clear" 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 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>
- <ul class="menu">
- <li class="menu-item">
- <a href="#autocomplete">
- <div class="tile tile-centered">
- <div class="tile-icon">
- <img src="img/avatar-4.png" class="avatar avatar-sm" 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>
- <div class="docs-note">
- <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>
-
- <div class="columns">
- <div class="column col-6 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 src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar">
- Thor Odinson
- </div>
- <div class="chip">
- <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar">
- Steve Rogers
- </div>
- <div class="chip">
- <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
- Tony Stark
+ <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="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>
- <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>
-<!-- autocomplete -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete&quot;</span>&gt;
- <span class="com">&lt;!-- autocomplete input container --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-input form-input&quot;</span>&gt;
-
- <span class="com">&lt;!-- autocomplete chips --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span>&gt;
+ <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
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
+ <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="com">&lt;!-- autocomplete real input box --&gt;</span>
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;typing here&quot;</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
+ <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="com">&lt;!-- autocomplete suggestion list --&gt;</span>
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
- <span class="com">&lt;!-- menu list chips --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile tile-centered&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Steve Rogers&quot;</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
+ <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 chips --&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">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-4.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">"Steve Rogers"</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>
Steve Rogers
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">/ul</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div class="container">
- <div class="docs-ad docs-ad-sidebar">
- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script>
- </div>
- </div>
-
- <div id="calendars" class="container">
- <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3>
- <div class="docs-note">
- <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
- </div>
- <div class="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 disabled"><button class="date-item">26</button></div>
- <div class="calendar-date prev-month disabled"><button class="date-item">27</button></div>
- <div class="calendar-date prev-month disabled"><button class="date-item">28</button></div>
- <div class="calendar-date current-month"><button class="date-item">1</button></div>
- <div class="calendar-date current-month"><button class="date-item">2</button></div>
- <div class="calendar-date current-month"><button class="date-item">3</button></div>
- <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div>
- <div class="calendar-date current-month tooltip" data-tooltip="Not available"><button class="date-item" disabled>5</button></div>
- <div class="calendar-date current-month"><button class="date-item">6</button></div>
- <div class="calendar-date current-month"><button class="date-item">7</button></div>
- <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"><button class="date-item badge">8</button></div>
- <div class="calendar-date current-month"><button class="date-item">9</button></div>
- <div class="calendar-date current-month"><button class="date-item">10</button></div>
- <div class="calendar-date current-month"><button class="date-item">11</button></div>
- <div class="calendar-date current-month"><button class="date-item">12</button></div>
- <div class="calendar-date current-month"><button class="date-item">13</button></div>
- <div class="calendar-date current-month"><button class="date-item">14</button></div>
- <div class="calendar-date current-month"><button class="date-item">15</button></div>
- <div class="calendar-date current-month calendar-range range-start"><button class="date-item active">16</button></div>
- <div class="calendar-date current-month calendar-range"><button class="date-item">17</button></div>
- <div class="calendar-date current-month calendar-range"><button class="date-item">18</button></div>
- <div class="calendar-date current-month calendar-range"><button class="date-item">19</button></div>
- <div class="calendar-date current-month calendar-range range-end"><button class="date-item active">20</button></div>
- <div class="calendar-date current-month"><button class="date-item">21</button></div>
- <div class="calendar-date current-month"><button class="date-item">22</button></div>
- <div class="calendar-date current-month"><button class="date-item">23</button></div>
- <div class="calendar-date current-month"><button class="date-item">24</button></div>
- <div class="calendar-date current-month"><button class="date-item">25</button></div>
- <div class="calendar-date current-month"><button class="date-item">26</button></div>
- <div class="calendar-date current-month"><button class="date-item">27</button></div>
- <div class="calendar-date current-month"><button class="date-item">28</button></div>
- <div class="calendar-date current-month"><button class="date-item">29</button></div>
- <div class="calendar-date current-month"><button class="date-item">30</button></div>
- <div class="calendar-date current-month"><button class="date-item">31</button></div>
- <div class="calendar-date next-month disabled"><button class="date-item">1</button></div>
- </div>
- </div>
- </div>
+ <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>
- </div>
-
- <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4>
- <div class="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 disabled"><button class="date-item">26</button></div>
- <div class="calendar-date prev-month disabled">
- <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 class="container" id="calendars">
+ <h3 class="s-title"><a class="anchor" href="#calendars" aria-hidden="true">#</a>Calendars</h3>
+ <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
+ <div class="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-date prev-month disabled"><button class="date-item">28</button></div>
- <div class="calendar-date current-month"><button class="date-item">1</button></div>
- <div class="calendar-date current-month"><button class="date-item">2</button></div>
- <div class="calendar-date current-month"><button class="date-item">3</button></div>
- <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div>
- <div class="calendar-date current-month"><button class="date-item" disabled>5</button></div>
- <div class="calendar-date current-month"><button class="date-item">6</button></div>
- <div class="calendar-date current-month"><button class="date-item">7</button></div>
- <div class="calendar-date current-month 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 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>
- <div class="calendar-date current-month"><button class="date-item">9</button></div>
- <div class="calendar-date current-month"><button class="date-item">10</button></div>
- <div class="calendar-date current-month"><button class="date-item">11</button></div>
- <div class="calendar-date current-month">
- <button class="date-item">12</button>
- <div class="calendar-events">
- <a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a>
+ <div class="calendar-body">
+ <div class="calendar-date prev-month disabled">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date prev-month disabled">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date prev-month disabled">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">1</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">2</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">3</button>
+ </div>
+ <div class="calendar-date current-month tooltip" data-tooltip="Today">
+ <button class="date-item date-today">4</button>
+ </div>
+ <div class="calendar-date current-month tooltip" data-tooltip="Not available">
+ <button class="date-item" disabled="">5</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">6</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">7</button>
+ </div>
+ <div class="calendar-date current-month tooltip" data-tooltip="You have appointments">
+ <button class="date-item badge">8</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">9</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">10</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">11</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">12</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">13</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">14</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">15</button>
+ </div>
+ <div class="calendar-date current-month calendar-range range-start">
+ <button class="date-item active">16</button>
+ </div>
+ <div class="calendar-date current-month calendar-range">
+ <button class="date-item">17</button>
+ </div>
+ <div class="calendar-date current-month calendar-range">
+ <button class="date-item">18</button>
+ </div>
+ <div class="calendar-date current-month calendar-range">
+ <button class="date-item">19</button>
+ </div>
+ <div class="calendar-date current-month calendar-range range-end">
+ <button class="date-item active">20</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">21</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">22</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">23</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">24</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">25</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">29</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">30</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">31</button>
+ </div>
+ <div class="calendar-date next-month disabled">
+ <button class="date-item">1</button>
+ </div>
</div>
</div>
- <div class="calendar-date current-month"><button class="date-item">13</button></div>
- <div class="calendar-date current-month"><button class="date-item">14</button></div>
- <div class="calendar-date current-month"><button class="date-item">15</button></div>
- <div class="calendar-date current-month calendar-range range-start"><button class="date-item active">16</button></div>
- <div class="calendar-date current-month calendar-range"><button class="date-item">17</button></div>
- <div class="calendar-date current-month calendar-range"><button class="date-item">18</button></div>
- <div class="calendar-date current-month calendar-range"><button class="date-item">19</button></div>
- <div class="calendar-date current-month calendar-range range-end">
- <button class="date-item active">20</button>
- <div class="calendar-events">
- <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
- </div>
+ </div>
+ </div>
+ </div>
+ <h4 class="s-subtitle" id="calendars-sizes"><a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a>Calendars sizes</h4>
+ <div class="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-date current-month"><button class="date-item">21</button></div>
- <div class="calendar-date current-month"><button class="date-item">22</button></div>
- <div class="calendar-date current-month"><button class="date-item">23</button></div>
- <div class="calendar-date current-month"><button class="date-item">24</button></div>
- <div class="calendar-date current-month"><button class="date-item">25</button></div>
- <div class="calendar-date current-month"><button class="date-item">26</button></div>
- <div class="calendar-date current-month"><button class="date-item">27</button></div>
- <div class="calendar-date current-month"><button class="date-item">28</button></div>
- <div class="calendar-date current-month"><button class="date-item">29</button></div>
- <div class="calendar-date current-month"><button class="date-item">30</button></div>
- <div class="calendar-date current-month"><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 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 disabled">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date prev-month disabled">
+ <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 disabled">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">1</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">2</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">3</button>
+ </div>
+ <div class="calendar-date current-month tooltip" data-tooltip="Today">
+ <button class="date-item date-today">4</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item" disabled="">5</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">6</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">7</button>
+ </div>
+ <div class="calendar-date current-month 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 current-month">
+ <button class="date-item">9</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">10</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">11</button>
+ </div>
+ <div class="calendar-date current-month">
+ <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 current-month">
+ <button class="date-item">13</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">14</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">15</button>
+ </div>
+ <div class="calendar-date current-month calendar-range range-start">
+ <button class="date-item active">16</button>
+ </div>
+ <div class="calendar-date current-month calendar-range">
+ <button class="date-item">17</button>
+ </div>
+ <div class="calendar-date current-month calendar-range">
+ <button class="date-item">18</button>
+ </div>
+ <div class="calendar-date current-month calendar-range">
+ <button class="date-item">19</button>
+ </div>
+ <div class="calendar-date current-month calendar-range range-end">
+ <button class="date-item active">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 current-month">
+ <button class="date-item">21</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">22</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">23</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">24</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">25</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">29</button>
+ </div>
+ <div class="calendar-date current-month">
+ <button class="date-item">30</button>
+ </div>
+ <div class="calendar-date current-month">
+ <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>
</div>
- </div>
- </div>
-
- <div id="carousels" class="container">
- <h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3>
- <div class="docs-note">
- <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <div class="carousel">
- <input type="radio" id="slide-1" class="carousel-locator" name="carousel-radio" hidden checked>
- <input type="radio" id="slide-2" class="carousel-locator" name="carousel-radio" hidden>
- <input type="radio" id="slide-3" class="carousel-locator" name="carousel-radio" hidden>
- <input type="radio" id="slide-4" class="carousel-locator" 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 src="img/osx-yosemite.jpg" class="img-responsive rounded" 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 src="img/osx-yosemite-2.jpg" class="img-responsive rounded" 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 src="img/osx-el-capitan.jpg" class="img-responsive rounded" 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 src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" 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 class="container" id="carousels">
+ <h3 class="s-title"><a class="anchor" href="#carousels" aria-hidden="true">#</a>Carousels</h3>
+ <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
+ <div class="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>
</div>
- </div>
-
-<!-- comparison sliders -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;carousel&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;slide-1&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-locator&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;carousel-radio&quot;</span> <span class="atn">hidden</span> <span class="atn">checked</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;slide-2&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-locator&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;carousel-radio&quot;</span> <span class="atn">hidden</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;slide-3&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-locator&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;carousel-radio&quot;</span> <span class="atn">hidden</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;slide-4&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-locator&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;carousel-radio&quot;</span> <span class="atn">hidden</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-container&quot;</span>&gt;
- &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-item&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;item-prev btn btn-action btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-4&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;item-next btn btn-action btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-2&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> ...&gt;
- &lt;<span class="tag">/figure</span>&gt;
-
- &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-item&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;item-prev btn btn-action btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-1&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;item-next btn btn-action btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-3&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> ...&gt;
- &lt;<span class="tag">/figure</span>&gt;
-
- &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-item&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;item-prev btn btn-action btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-2&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;item-next btn btn-action btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-4&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> ...&gt;
- &lt;<span class="tag">/figure</span>&gt;
-
- &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-item&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;item-prev btn btn-action btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-3&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;item-next btn btn-action btn-lg&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-1&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> ...&gt;
- &lt;<span class="tag">/figure</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;carousel-nav&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item text-hide c-hand&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-1&quot;</span>&gt;1&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item text-hide c-hand&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-2&quot;</span>&gt;2&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item text-hide c-hand&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-3&quot;</span>&gt;3&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item text-hide c-hand&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;slide-4&quot;</span>&gt;4&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="comparison" class="container">
- <h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3>
- <div class="docs-note">
- <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <div class="comparison-slider">
- <figure class="comparison-before">
- <img src="img/macos-sierra-2.jpg" class="rounded" alt="macOS Sierra Wallpaper">
- <div class="comparison-label">Before</div>
- </figure>
- <figure class="comparison-after">
- <img src="img/macos-sierra-2.jpg" class="filter-grayscale rounded" alt="macOS Sierra Wallpaper">
- <div class="comparison-label">After</div>
- <textarea class="comparison-resizer" readonly></textarea>
- </figure>
+ <div class="container" id="comparison">
+ <h3 class="s-title"><a class="anchor" href="#comparison" aria-hidden="true">#</a>Comparison sliders</h3>
+ <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
+ <div class="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>
- </div>
- </div>
-
-<!-- comparison sliders -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-slider&quot;</span>&gt;
- &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-before&quot;</span>&gt;
- <span class="com">&lt;!-- image (before) --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-label&quot;</span>&gt;Before&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/figure</span>&gt;
-
- &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-after&quot;</span>&gt;
- <span class="com">&lt;!-- image (after) --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-label&quot;</span>&gt;After&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-resizer&quot;</span> <span class="atn">readonly</span>&gt;&lt;<span class="tag">/textarea</span>&gt;
- &lt;<span class="tag">/figure</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </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>
- <div id="filters" class="container">
- <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3>
- <div class="docs-note">
- <p>Filters are CSS only content filters.</p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <div class="filter">
- <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
- <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
- <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
- <input type="radio" id="tag-3" class="filter-tag" name="filter-radio" hidden>
- <input type="radio" id="tag-4" class="filter-tag" 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>
+ <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>
+ <div class="container" id="filters">
+ <h3 class="s-title"><a class="anchor" href="#filters" aria-hidden="true">#</a>Filters</h3>
+ <p>Filters are CSS only content filters.</p>
+ <div class="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>
- <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 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>
- </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 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>
- </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 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>
- </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 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>
- </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 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>
- </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 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>
- </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 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>
- </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 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>
- </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 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>
- </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 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>
- </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 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>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- filters -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-0&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span> <span class="atn">checked</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-1&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-2&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-nav&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;tag-0&quot;</span>&gt;All&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;tag-1&quot;</span>&gt;Action&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;tag-2&quot;</span>&gt;Roleplaying&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
+ <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>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-body&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-item card&quot;</span> <span class="atn">data-tag</span>=<span class="atv">&quot;tag-1&quot;</span>&gt;
- <span class="com">&lt;!-- Filter item content --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-item card&quot;</span> <span class="atn">data-tag</span>=<span class="atv">&quot;tag-2&quot;</span>&gt;
- <span class="com">&lt;!-- Filter item content --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- Filter items --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
+ <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>
- </div>
-
- <div id="meters" class="container">
- <h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3>
- <div class="docs-note">
- <p>Meters represent the value within the known range.</p>
- </div>
- <div class="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>
+ <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>
- <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>
- <div class="docs-note">
- <p></p>
- </div>
-
-<!-- meters -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Meter is green when low &lt; value &lt; high --&gt;</span>
-&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;20&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
-&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;60&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">low</span>=<span class="atv">&quot;30&quot;</span> <span class="atn">high</span>=<span class="atv">&quot;80&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
-<span class="com">&lt;!-- Meter is yellow when value &lt; low or high &lt; value --&gt;</span>
-&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;85&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">low</span>=<span class="atv">&quot;30&quot;</span> <span class="atn">high</span>=<span class="atv">&quot;80&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
-<span class="com">&lt;!-- Meter is red when value &lt; low &lt; high &lt; optimum or optimum &lt; low &lt; high &lt; value --&gt;</span>
-&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;20&quot;</span> <span class="atn">optimum</span>=<span class="atv">&quot;90&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">low</span>=<span class="atv">&quot;30&quot;</span> <span class="atn">high</span>=<span class="atv">&quot;80&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="off-canvas" class="container">
- <h3 class="s-title"><a href="#off-canvas" class="anchor" aria-hidden="true">#</a>Off-canvas</h3>
- <div class="docs-note">
- <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>
- <div class="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 id="sidebar-demo" class="off-canvas-sidebar flex-centered">
- <span>Sidebar</span>
+ <div class="container" id="meters">
+ <h3 class="s-title"><a class="anchor" href="#meters" aria-hidden="true">#</a>Meters</h3>
+ <p>Meters represent the value within the known range.</p>
+ <div class="columns">
+ <div class="column col-3 col-xs-12">
+ <meter class="meter" value="20" min="0" max="100"></meter>
</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 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>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- off-canvas -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas&quot;</span>&gt;
- <span class="com">&lt;!-- off-screen toggle button --&gt;</span>
- &lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas-toggle btn btn-primary btn-action&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#sidebar-id&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-menu&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">id</span>=<span class="atv">&quot;sidebar-id&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas-sidebar&quot;</span>&gt;
- <span class="com">&lt;!-- off-screen sidebar --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-
- &lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas-overlay&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;off-canvas-content&quot;</span>&gt;
- <span class="com">&lt;!-- off-screen content --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="parallax" class="container">
- <h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3>
- <div class="docs-note">
- <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
- </div>
- <div class="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 src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper">
+ <div class="container" id="off-canvas">
+ <h3 class="s-title"><a class="anchor" href="#off-canvas" aria-hidden="true">#</a>Off-canvas</h3>
+ <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="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>
- </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>
-<!-- parallax -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-top-left&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-top-right&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-bottom-left&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;3&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-bottom-right&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;4&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-content&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-front&quot;</span>&gt;
- &lt;<span class="tag">h2</span>&gt;tvOS parallax demo&lt;<span class="tag">/h2</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-back&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> ...&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
+ <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>
- </div>
-
- <div id="progress" class="container">
- <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3>
- <div class="docs-note">
- <p>The Progress indicates the progress completion of a task.</p>
- </div>
- <div class="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>
-
-<!-- progress -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">&quot;progress&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;25&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/progress</span>&gt;
-&lt;<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">&quot;progress&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/progress</span>&gt;
-</code></pre>
-
- </div>
+ <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>
- <div id="sliders" class="container">
- <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3>
- <div class="docs-note">
- <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>
- <div class="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>
+ <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>
- </div>
-
-<!-- sliders -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Sliders --&gt;</span>
-&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;slider&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;range&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;50&quot;</span>&gt;
-<span class="com">&lt;!-- Sliders with tooltips --&gt;</span>
-&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;slider tooltip&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;range&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;50&quot;</span> <span class="atn">oninput</span>=<span class="atv">&quot;this.setAttribute('value', this.value);&quot;</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="timelines" class="container">
- <h3 class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3>
- <div class="docs-note">
- <p>Timelines are ordered sequences of activities.</p>
- </div>
- <div class="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 href="#timeline-example-1" class="timeline-icon tooltip" 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 class="container" id="parallax">
+ <h3 class="s-title"><a class="anchor" href="#parallax" aria-hidden="true">#</a>Parallax</h3>
+ <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
+ <div class="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 class="timeline-item" id="timeline-example-2">
- <div class="timeline-left">
- <a href="#timeline-example-2" class="timeline-icon icon-lg tooltip" 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>
+ <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>
+ <div class="container" id="progress">
+ <h3 class="s-title"><a class="anchor" href="#progress" aria-hidden="true">#</a>Progress</h3>
+ <p>The Progress indicates the progress completion of a task.</p>
+ <div class="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>
+ <div class="container" id="sliders">
+ <h3 class="s-title"><a class="anchor" href="#sliders" aria-hidden="true">#</a>Sliders</h3>
+ <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="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>
+ <div class="container" id="timelines">
+ <h3 class="s-title"><a class="anchor" href="#timelines" aria-hidden="true">#</a>Timelines</h3>
+ <p>Timelines are ordered sequences of activities.</p>
+ <div class="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>
- </div>
- <div class="timeline-item" id="timeline-example-3">
- <div class="timeline-left">
- <a href="#timeline-example-3" class="timeline-icon icon-lg tooltip" 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 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 class="tile-action">
- <button class="btn">View</button>
+ </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>
- </div>
- </div>
-
-<!-- timelines -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-item&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;timeline-example-1&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-left&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-icon&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#timeline-example-1&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-content&quot;</span>&gt;
- <span class="com">&lt;!-- tiles structure --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
+ <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>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-item&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;timeline-example-2&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-left&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-icon icon-lg&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#timeline-example-2&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-check&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-content&quot;</span>&gt;
- <span class="com">&lt;!-- tiles structure --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
+ <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>
...
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+ </div>
+ </div>
</div>
-
- <footer class="docs-footer">
- <p><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">♥</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>
- </footer>
-
</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>
+ <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