Summary Files Commits Branches @commit @diff @stats
path: root / docs
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
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
49 files changed, 5526 insertions, 3972 deletions
-rw-r--r--docs/components.html3623
-rw-r--r--docs/elements.html4
-rw-r--r--docs/experimentals.html1998
-rw-r--r--docs/getting-started.html4
-rw-r--r--docs/layout.html4
-rw-r--r--docs/src/_docs-layout.pug4
-rw-r--r--docs/src/components.pug83
-rw-r--r--docs/src/contents/accordions.pug113
-rw-r--r--docs/src/contents/autocomplete.pug119
-rw-r--r--docs/src/contents/avatars.pug93
-rw-r--r--docs/src/contents/badges.pug59
-rw-r--r--docs/src/contents/bars.pug84
-rw-r--r--docs/src/contents/breadcrumbs.pug45
-rw-r--r--docs/src/contents/calendars.pug195
-rw-r--r--docs/src/contents/cards.pug94
-rw-r--r--docs/src/contents/carousels.pug39
-rw-r--r--docs/src/contents/chips.pug44
-rw-r--r--docs/src/contents/colors.pug89
-rw-r--r--docs/src/contents/comparison.pug29
-rw-r--r--docs/src/contents/cursor.pug31
-rw-r--r--docs/src/contents/display.pug26
-rw-r--r--docs/src/contents/divider.pug54
-rw-r--r--docs/src/contents/empty.pug50
-rw-r--r--docs/src/contents/experimentals.pug4
-rw-r--r--docs/src/contents/filters.pug107
-rw-r--r--docs/src/contents/loading.pug21
-rw-r--r--docs/src/contents/menu.pug184
-rw-r--r--docs/src/contents/meters.pug22
-rw-r--r--docs/src/contents/modals.pug141
-rw-r--r--docs/src/contents/nav.pug57
-rw-r--r--docs/src/contents/off-canvas.pug45
-rw-r--r--docs/src/contents/pagination.pug102
-rw-r--r--docs/src/contents/panels.pug114
-rw-r--r--docs/src/contents/parallax.pug34
-rw-r--r--docs/src/contents/popovers.pug82
-rw-r--r--docs/src/contents/position.pug40
-rw-r--r--docs/src/contents/progress.pug17
-rw-r--r--docs/src/contents/shapes.pug17
-rw-r--r--docs/src/contents/sliders.pug18
-rw-r--r--docs/src/contents/steps.pug47
-rw-r--r--docs/src/contents/tabs.pug132
-rw-r--r--docs/src/contents/text.pug36
-rw-r--r--docs/src/contents/tiles.pug92
-rw-r--r--docs/src/contents/timelines.pug81
-rw-r--r--docs/src/contents/toasts.pug49
-rw-r--r--docs/src/contents/tooltips.pug24
-rw-r--r--docs/src/experimentals.pug55
-rw-r--r--docs/src/utilities.pug39
-rw-r--r--docs/utilities.html1054
diff --git a/docs/components.html b/docs/components.html
index fb2ddd8..4185433 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1,2384 +1,1633 @@
<!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>Components - 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>
- </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>
- </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>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked>
- <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>
- </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>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
- <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>
- </div>
- </div>
- </div>
- </div>
-
- <a class="off-canvas-overlay" href="#close"></a>
-
- <div id="content" class="docs-content off-canvas-content">
- <div id="components" class="container">
- <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3>
- </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>
- </div>
- </div>
-
- <div id="accordions" class="container">
- <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
- <div class="docs-note">
- <p>Accordions are used to toggle sections of content.</p>
- </div>
- <div class="columns">
- <div class="column col-6 col-md-12">
+ <head>
+ <title>Components - 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 type="radio" id="accordion-1" name="accordion-radio" hidden checked>
- <label class="accordion-header c-hand" for="accordion-1">
- <i class="icon icon-arrow-right mr-1"></i>
- Elements
- </label>
+ <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="#accordions">Element 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Element 2</a>
- </li>
+ <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 class="accordion">
- <input type="radio" id="accordion-2" name="accordion-radio" hidden>
- <label class="accordion-header c-hand" for="accordion-2">
- <i class="icon icon-arrow-right mr-1"></i>
- Layout
- </label>
+ <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="#accordions">Layout 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Layout 2</a>
- </li>
+ <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 class="accordion">
- <input type="radio" id="accordion-3" name="accordion-radio" hidden>
- <label class="accordion-header c-hand" for="accordion-3">
- <i class="icon icon-arrow-right mr-1"></i>
- Components
- </label>
+ <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="#accordions">Component 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Component 2</a>
- </li>
+ <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="column col-6 col-md-12">
<div class="accordion">
- <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked>
- <label class="accordion-header c-hand" for="accordion-4">
- Elements
- </label>
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <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="#accordions">Element 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Element 2</a>
- </li>
+ <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 class="accordion">
- <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="accordion-5">
- Layout
- </label>
+ <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="#accordions">Layout 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Layout 2</a>
- </li>
+ <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 class="accordion">
- <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="accordion-6">
- Components
- </label>
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <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="#accordions">Component 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Component 2</a>
- </li>
+ <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>
-
-<!-- accordions -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- standard Accordions example --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;accordion-1&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;accordion-checkbox&quot;</span> <span class="atn">hidden</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right mr-1&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="accordions">
+ <h3 class="s-title"><a class="anchor" href="#accordions" aria-hidden="true">#</a>Accordions</h3>
+ <p>Accordions are used to toggle sections of content.</p>
+ <div class="columns">
+ <div class="column col-6 col-md-12">
+ <div class="accordion">
+ <input id="accordion-1" type="radio" name="accordion-radio" hidden="" checked="">
+ <label class="accordion-header c-hand" for="accordion-1"><i class="icon icon-arrow-right mr-1"></i>Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="#accordions">Element 1</a></li>
+ <li class="menu-item"><a href="#accordions">Element 2</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-2" type="radio" name="accordion-radio" hidden="">
+ <label class="accordion-header c-hand" for="accordion-2"><i class="icon icon-arrow-right mr-1"></i>Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="#accordions">Layout 1</a></li>
+ <li class="menu-item"><a href="#accordions">Layout 2</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-3" type="radio" name="accordion-radio" hidden="">
+ <label class="accordion-header c-hand" for="accordion-3"><i class="icon icon-arrow-right mr-1"></i>Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="#accordions">Component 1</a></li>
+ <li class="menu-item"><a href="#accordions">Component 2</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="column col-6 col-md-12">
+ <div class="accordion">
+ <input id="accordion-4" type="checkbox" name="accordion-checkbox" hidden="" checked="">
+ <label class="accordion-header c-hand" for="accordion-4">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="#accordions">Element 1</a></li>
+ <li class="menu-item"><a href="#accordions">Element 2</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-5" type="checkbox" name="accordion-checkbox" hidden="">
+ <label class="accordion-header c-hand" for="accordion-5">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="#accordions">Layout 1</a></li>
+ <li class="menu-item"><a href="#accordions">Layout 2</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-6" type="checkbox" name="accordion-checkbox" hidden="">
+ <label class="accordion-header c-hand" for="accordion-6">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="#accordions">Component 1</a></li>
+ <li class="menu-item"><a href="#accordions">Component 2</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- standard Accordions example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-checkbox"</span> <span class="hljs-attr">hidden</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
Title
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
- <span class="com">&lt;!-- Accordions content --&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">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Accordions 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>
-<span class="com">&lt;!-- mutually exclusive Accordions example (with same input names) --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&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;accordion-1&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;accordion-radio&quot;</span> <span class="atn">hidden</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
+<span class="hljs-comment">&lt;!-- mutually exclusive Accordions example (with same input names) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</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">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-radio"</span> <span class="hljs-attr">hidden</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>&gt;</span>
Title
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
- <span class="com">&lt;!-- Accordions content --&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">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Accordions content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- <div class="docs-note">
- <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. Add the <code>open</code> attribute to <code>details</code> to expand it. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">in development</a>.</p>
- </div>
-
-<!-- accordions -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- details and summary Accordions example --&gt;</span>
-&lt;<span class="tag">details</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span> <span class="atn">open</span>&gt;
- &lt;<span class="tag">summary</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right mr-1&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+ <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick.
+ Add the <code>open</code> attribute to <code>details</code> to expand it.
+ Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">under consideration</a>.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- details and summary Accordions example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">open</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
Title
- &lt;<span class="tag">/summary</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
- <span class="com">&lt;!-- Accordions content --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/details</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="avatars" class="container">
- <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
- <div class="docs-note">
- <p>Avatars are user profile pictures. </p>
- </div>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <figure class="avatar avatar-xl">
- <img src="img/avatar-1.png" alt="Avatar XL">
- </figure>
- <figure class="avatar avatar-lg">
- <img src="img/avatar-2.png" alt="Avatar LG">
- </figure>
- <figure class="avatar">
- <img src="img/avatar-3.png" alt="Avatar">
- </figure>
- <figure class="avatar avatar-sm">
- <img src="img/avatar-4.png" alt="Avatar SM">
- </figure>
- <figure class="avatar avatar-xs">
- <img src="img/avatar-5.png" alt="Avatar XS">
- </figure>
- </div>
- <div class="column col-6 col-xs-12">
- <figure class="avatar avatar-xl" data-initial="YZ"></figure>
- <figure class="avatar avatar-lg" data-initial="YZ"></figure>
- <figure class="avatar" data-initial="YZ"></figure>
- <figure class="avatar avatar-sm" data-initial="YZ"></figure>
- <figure class="avatar avatar-xs" data-initial="YZ"></figure>
- </div>
- </div>
- <div class="docs-note">
- <p>Add the <code>avatar</code> class to &lt;img&gt; element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p>
- <p>For users who don't have profile pictures, you may use their initials for avatars. Add the <code>avatar</code> class and avatar size class to &lt;div&gt; element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p>
- </div>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <figure class="avatar avatar-xl">
- <img src="img/avatar-1.png" alt="Avatar">
- <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar">
- </figure>
- <figure class="avatar avatar-lg">
- <img src="img/avatar-2.png" alt="Avatar">
- <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar">
- </figure>
- <figure class="avatar">
- <img src="img/avatar-3.png" alt="Avatar">
- <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar">
- </figure>
- <figure class="avatar avatar-sm">
- <img src="img/avatar-4.png" alt="Avatar">
- <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar">
- </figure>
- <figure class="avatar avatar-xs">
- <img src="img/avatar-5.png" alt="Avatar">
- <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar">
- </figure>
- </div>
- </div>
-
-<!-- avatars -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Basic avatar examples --&gt;</span>
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&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">alt</span>=<span class="atv">&quot;...&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;avatar avatar-xl&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">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-5.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-icon&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&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;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5755d9;&quot;</span>&gt;&lt;<span class="tag">/figure</span>&gt;
-
-<span class="com">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5755d9;&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">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-</code></pre>
-
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <figure class="avatar avatar-xl" data-initial="YZ">
- <i class="avatar-presence online"></i>
- </figure>
- <figure class="avatar avatar-lg" data-initial="YZ">
- <i class="avatar-presence busy"></i>
- </figure>
- <figure class="avatar" data-initial="YZ">
- <i class="avatar-presence away"></i>
- </figure>
- <figure class="avatar avatar-sm" data-initial="YZ">
- <i class="avatar-presence offline"></i>
- </figure>
- <figure class="avatar avatar-xs" data-initial="YZ">
- <i class="avatar-presence online"></i>
- </figure>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">summary</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Accordions 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">details</span>&gt;</span></code></pre>
</div>
- </div>
- <div class="docs-note">
- <p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p>
- </div>
-
-<!-- avatars -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&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">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-presence online&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="badges" class="container">
- <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3>
- <div class="docs-note">
- <p>Badges are often used as unread number indicators.</p>
- </div>
- <div class="columns">
- <div class="column col-3 col-xs-6">
- <span class="badge" data-badge="">
- Notifications
- </span>
- </div>
- <div class="column col-3 col-xs-6">
- <span class="badge" data-badge="8">
- Notifications
- </span>
- </div>
- <div class="column col-3 col-xs-6">
- <span class="badge" data-badge="88">
- Notifications
- </span>
- </div>
- <div class="column col-3 col-xs-6">
- <span class="badge" data-badge="888">
- Notifications
- </span>
- </div>
- </div>
- <div class="docs-note">
- <p>Add the <code>badge</code> class to non self closing elements. And add the <code>data-badge</code> attribute to define the content of a badge. The badge will appear in the top-right direction of the element. </p>
- <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
- </div>
- <div class="columns">
- <div class="column col-sm-12">
- <button class="btn badge" data-badge="">Button</button>
- <button class="btn badge" data-badge="8">Button</button>
- </div>
- <div class="column col-sm-12">
- <button class="btn btn-primary badge" data-badge="">Button</button>
- <button class="btn btn-primary badge" data-badge="8">Button</button>
- </div>
- <div class="column col-sm-12">
- <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ">
- <img src="img/avatar-1.png" alt="YZ">
- </figure>
- <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ">
- <img src="img/avatar-2.png" alt="YZ">
- </figure>
- <figure class="avatar badge" data-badge="8" data-initial="YZ">
- <img src="img/avatar-3.png" alt="YZ">
- </figure>
- </div>
- </div>
- <div class="docs-note">
- <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p>
- </div>
-
-<!-- badges -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span>&gt;
- Notifications
-&lt;<span class="tag">/span</span>&gt;
-
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span>&gt;
- Notifications
-&lt;<span class="tag">/span</span>&gt;
-
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span>&gt;
- Button
-&lt;<span class="tag">/button</span>&gt;
-
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;YZ&quot;</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="bars" class="container">
- <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3>
- <div class="docs-note">
- <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
- </div>
- <div class="columns">
- <div class="column col-8 col-xs-12">
- <div class="bar bar-sm">
- <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-8 col-xs-12">
- <div class="bar">
- <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div>
+ <div class="container" id="avatars">
+ <h3 class="s-title"><a class="anchor" href="#avatars" aria-hidden="true">#</a>Avatars</h3>
+ <p>Avatars are user profile pictures. </p>
+ <div class="columns">
+ <div class="column col-6 col-xs-12">
+ <figure class="avatar avatar-xl"><img src="img/avatar-1.png" alt="Avatar XL"></figure>
+ <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar LG"></figure>
+ <figure class="avatar"><img src="img/avatar-3.png" alt="Avatar"></figure>
+ <figure class="avatar avatar-sm"><img src="img/avatar-4.png" alt="Avatar SM"></figure>
+ <figure class="avatar avatar-xs"><img src="img/avatar-5.png" alt="Avatar XS"></figure>
+ </div>
+ <div class="column col-6 col-xs-12">
+ <figure class="avatar avatar-xl" data-initial="YZ"></figure>
+ <figure class="avatar avatar-lg" data-initial="YZ"></figure>
+ <figure class="avatar" data-initial="YZ"></figure>
+ <figure class="avatar avatar-sm" data-initial="YZ"></figure>
+ <figure class="avatar avatar-xs" data-initial="YZ"></figure>
+ </div>
</div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-8 col-xs-12">
- <div class="bar">
- <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div>
- <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div>
- <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div>
- <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div>
+ <p>Add the <code>avatar</code> class to &lt;img&gt; element.
+ There are 4 additional sizes available, including <code>avatar-xl</code>(64px), <code>avatar-lg</code>(48px), <code>avatar-sm</code>(24px), and <code>avatar-xs</code>(16px).
+ By default, the avatar size is 32px.
+ </p>
+ <p>
+ For users who don't have profile pictures, you may use their initials for avatars.
+ Add the <code>avatar</code> class and avatar size class to &lt;div&gt; element.
+ The <code>data-initial</code> attribute is the name appear inside the avatar.
+ </p>
+ <div class="columns">
+ <div class="column col-6 col-xs-12">
+ <figure class="avatar avatar-xl"><img src="img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-2.png" alt="Avatar"></figure>
+ <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-3.png" alt="Avatar"></figure>
+ <figure class="avatar"><img src="img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-4.png" alt="Avatar"></figure>
+ <figure class="avatar avatar-sm"><img src="img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-5.png" alt="Avatar"></figure>
+ <figure class="avatar avatar-xs"><img src="img/avatar-5.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-1.png" alt="Avatar"></figure>
+ </div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p>
- <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p>
- </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- Basic avatar examples --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</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">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
-<!-- bars -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-sm&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span> <span class="atn">aria-valuenow</span>=<span class="atv">&quot;25&quot;</span> <span class="atn">aria-valuemin</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">aria-valuemax</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</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">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-5.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-icon"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
-<span class="com">&lt;!-- multi-bars --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;25%&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;25%&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;background:#818bd5;&quot;</span>&gt;15%&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">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
- <h4 id="bars-slider" class="s-subtitle">Slider bars</h4>
- <div class="columns">
- <div class="column col-8 col-xs-12">
- <div class="bar bar-slider">
- <div class="bar-item" role="progressbar" style="width:50%;">
- <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button>
+<span class="hljs-comment">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</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">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+ </code></pre>
+ <div class="columns">
+ <div class="column col-6 col-xs-12">
+ <figure class="avatar avatar-xl" data-initial="YZ"><i class="avatar-presence online"></i></figure>
+ <figure class="avatar avatar-lg" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
+ <figure class="avatar" data-initial="YZ"><i class="avatar-presence away"></i></figure>
+ <figure class="avatar avatar-sm" data-initial="YZ"><i class="avatar-presence offline"></i></figure>
+ <figure class="avatar avatar-xs" data-initial="YZ"><i class="avatar-presence online"></i></figure>
</div>
</div>
+ <p>
+ Avatars support presence indicators.
+ You can add an &lt;i&gt; element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors.
+ The default is gray which means offline.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</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">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-presence online"</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">figure</span>&gt;</span></code></pre>
</div>
- </div>
- <div class="columns">
- <div class="column col-8 col-xs-12">
- <div class="bar bar-slider">
- <div class="bar-item" role="progressbar" style="width:15%;">
- <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button>
+ <div class="container" id="badges">
+ <h3 class="s-title"><a class="anchor" href="#badges" aria-hidden="true">#</a>Badges</h3>
+ <p>Badges are often used as unread number indicators.</p>
+ <div class="columns">
+ <div class="column col-3 col-xs-6"><span class="badge" data-badge="">Notifications</span></div>
+ <div class="column col-3 col-xs-6"><span class="badge" data-badge="8">Notifications</span></div>
+ <div class="column col-3 col-xs-6"><span class="badge" data-badge="88">Notifications</span></div>
+ <div class="column col-3 col-xs-6"><span class="badge" data-badge="888">Notifications</span></div>
+ </div>
+ <p>Add the <code>badge</code> class to non self closing elements.
+ And add the <code>data-badge</code> attribute to define the content of a badge.
+ The badge will appear in the top-right direction of the element.
+ </p>
+ <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
+ <div class="columns">
+ <div class="column col-sm-12">
+ <button class="btn badge" data-badge="">Button</button>
+ <button class="btn badge" data-badge="8">Button</button>
+ </div>
+ <div class="column col-sm-12">
+ <button class="btn btn-primary badge" data-badge="">Button</button>
+ <button class="btn btn-primary badge" data-badge="8">Button</button>
</div>
- <div class="bar-item" role="progressbar" style="width:65%;">
- <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button>
+ <div class="column col-sm-12">
+ <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"><img src="img/avatar-1.png" alt="YZ"></figure>
+ <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"><img src="img/avatar-2.png" alt="YZ"></figure>
+ <figure class="avatar badge" data-badge="8" data-initial="YZ"><img src="img/avatar-3.png" alt="YZ"></figure>
</div>
</div>
- </div>
- </div>
-
- <div class="docs-note">
- <p>You can add the <code>bar-slider</code> class to the Bars container. And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. You need to set the <code>bar-item</code> width manually to have the slider point.</p>
- <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p>
- </div>
-
-<!-- slider bars -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- slider --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <p>Badges support <code>button</code> and <code>avatars</code> elements as well.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>&gt;</span>
+ Notifications
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-<span class="com">&lt;!-- range slider --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:65%;&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</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">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>&gt;</span>
+ Notifications
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
- </div>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>&gt;</span>
+ Button
+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
- <div id="breadcrumbs" class="container">
- <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3>
- <div class="docs-note">
- <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <ul class="breadcrumb">
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
- </li>
- </ul>
- </div>
- <div class="column col-12">
- <ul class="breadcrumb">
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar">Change avatar</a>
- </li>
- </ul>
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</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-3.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"YZ"</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span></code></pre>
</div>
- <div class="column col-12">
- <ul class="breadcrumb">
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
- </li>
- <li class="breadcrumb-item">Search result:
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre">Spectre</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p>
- </div>
-
-<!-- breadcrumbs -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Home&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Settings&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Change avatar&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="cards" class="container">
- <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
- <div class="docs-note">
- <p>Cards are flexible content containers.</p>
- </div>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan">
- </div>
- <div class="card-header">
- <div class="card-title h5">Microsoft</div>
- <div class="card-subtitle text-gray">Software and hardware</div>
- </div>
- <div class="card-body">
- Empower every person and every organization on the planet to achieve more.
- </div>
- <div class="card-footer">
- <a href="#cards" class="btn btn-primary">Do</a>
+ <div class="container" id="bars">
+ <h3 class="s-title"><a class="anchor" href="#bars" aria-hidden="true">#</a>Bars</h3>
+ <p>
+ Bars represent the progress of a task or the value within the known range.
+ Bars are custom components for displaying HTML5 &lt;progress&gt;, &lt;meter&gt; and input range elements.
+ </p>
+ <div class="columns">
+ <div class="column col-8 col-xs-12">
+ <div class="bar bar-sm">
+ <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
</div>
</div>
- </div>
- <div class="column col-6 col-xs-12">
- <div class="card">
- <div class="card-header">
- <div class="card-title h5">Apple</div>
- <div class="card-subtitle text-gray">Hardware and software</div>
- </div>
- <div class="card-image">
- <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite">
- </div>
- <div class="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
- </div>
- <div class="card-footer">
- <div class="btn-group btn-group-block">
- <button class="btn btn-primary">Buy</button>
- <button class="btn">Buy</button>
- <button class="btn">Buy</button>
+ <div class="columns">
+ <div class="column col-8 col-xs-12">
+ <div class="bar">
+ <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div>
</div>
</div>
</div>
- </div>
- <div class="column col-6 col-xs-12">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra">
+ <div class="columns">
+ <div class="column col-8 col-xs-12">
+ <div class="bar">
+ <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div>
+ <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div>
+ <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div>
+ <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div>
+ </div>
</div>
- <div class="card-header">
- <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
- <div class="card-title h5">Google I/O</div>
- <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <p>Add a container element with the <code>bar</code> class.
+ And add child elements with the <code>bar-item</code> class.
+ The width percentage value is needed for every <code>bar-item</code>.
+ </p>
+ <p>There is the <code>bar-sm</code> class for thinner Bars.
+ Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.
+ </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">"bar bar-sm"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</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-comment">&lt;!-- multi-bars --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"25%"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span>&gt;</span>25%<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">"bar-item"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;background:#818bd5;"</span>&gt;</span>15%<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <h4 class="s-subtitle" id="bars-slider"><a class="anchor" href="#bars-slider" aria-hidden="true">#</a>Slider bars</h4>
+ <div class="columns">
+ <div class="column col-8 col-xs-12">
+ <div class="bar bar-slider">
+ <div class="bar-item" role="progressbar" style="width:50%;">
+ <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button>
+ </div>
+ </div>
</div>
- <div class="card-body">
- An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+ </div>
+ <div class="columns">
+ <div class="column col-8 col-xs-12">
+ <div class="bar bar-slider">
+ <div class="bar-item" role="progressbar" style="width:15%;">
+ <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button>
+ </div>
+ <div class="bar-item" role="progressbar" style="width:65%;">
+ <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button>
+ </div>
+ </div>
</div>
</div>
+ <p>You can add the <code>bar-slider</code> class to the Bars container.
+ And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item.
+ You need to set the <code>bar-item</code> width manually to have the slider point.
+ </p>
+ <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- slider --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- range slider --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:65%;"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-6 col-xs-12">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan">
+ <div class="container" id="breadcrumbs">
+ <h3 class="s-title"><a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a>Breadcrumbs</h3>
+ <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
+ <div class="columns">
+ <div class="column col-12">
+ <ul class="breadcrumb">
+ <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
+ <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
+ </ul>
</div>
- <div class="card-footer">
- <a href="#cards" class="btn btn-primary">Buy</a>
- <a href="#cards" class="btn btn-link">Share</a>
+ <div class="column col-12">
+ <ul class="breadcrumb">
+ <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
+ <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
+ <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Change avatar">Change avatar</a></li>
+ </ul>
</div>
- <div class="card-body">
- <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.
+ <div class="column col-12">
+ <ul class="breadcrumb">
+ <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li>
+ <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li>
+ <li class="breadcrumb-item">Search result:<a class="tooltip" href="#breadcrumbs" data-tooltip="Search result: Spectre">Spectre</a></li>
+ </ul>
</div>
</div>
+ <p>Add a container element with the <code>breadcrumb</code> class.
+ And add child elements with the <code>breadcrumb-item</code> class.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-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>Home<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-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>Settings<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-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>Change avatar<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></code></pre>
</div>
- <div class="column col-6 col-xs-12">
- <div class="card">
- <div class="card-header">
- <div class="card-title h5">Apple</div>
- <div class="card-subtitle text-gray">Hardware and software</div>
- </div>
- <div class="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
+ <div class="container" id="cards">
+ <h3 class="s-title"><a class="anchor" href="#cards" aria-hidden="true">#</a>Cards</h3>
+ <p>Cards are flexible content containers.</p>
+ <div class="columns">
+ <div class="column col-6 col-xs-12">
+ <div class="card">
+ <div class="card-image"><img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan"></div>
+ <div class="card-header">
+ <div class="card-title h5">Microsoft</div>
+ <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <div class="card-body">Empower every person and every organization on the planet to achieve more.</div>
+ <div class="card-footer"><a class="btn btn-primary" href="#cards">Do</a></div>
+ </div>
</div>
- <div class="card-image">
- <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra">
+ <div class="column col-6 col-xs-12">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title h5">Apple</div>
+ <div class="card-subtitle text-gray">Hardware and software</div>
+ </div>
+ <div class="card-image"><img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite"></div>
+ <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+ <div class="card-footer">
+ <div class="btn-group btn-group-block">
+ <button class="btn btn-primary">Buy</button>
+ <button class="btn">Buy</button>
+ <button class="btn">Buy</button>
+ </div>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="column col-6 col-xs-12">
- <div class="card">
- <div class="card-header">
- <div class="card-title h5">Google</div>
- <div class="card-subtitle text-gray">Software and hardware</div>
+ <div class="column col-6 col-xs-12">
+ <div class="card">
+ <div class="card-image"><img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra"></div>
+ <div class="card-header">
+ <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
+ <div class="card-title h5">Google I/O</div>
+ <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <div class="card-body">An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.</div>
+ </div>
</div>
- <div class="card-body">
- Organize the world’s information and make it universally accessible and useful.
+ <div class="column col-6 col-xs-12">
+ <div class="card">
+ <div class="card-image"><img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan"></div>
+ <div class="card-footer"><a class="btn btn-primary" href="#cards">Buy</a><a class="btn btn-link" href="#cards">Share</a></div>
+ <div class="card-body"><strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.</div>
+ </div>
</div>
- <div class="card-image">
- <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite">
+ <div class="column col-6 col-xs-12">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title h5">Apple</div>
+ <div class="card-subtitle text-gray">Hardware and software</div>
+ </div>
+ <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+ <div class="card-image"><img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra"></div>
+ </div>
</div>
- <div class="card-footer">
- <a href="#cards" class="btn btn-primary">Search</a>
- <a href="#cards" class="btn btn-link">Share</a>
+ <div class="column col-6 col-xs-12">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title h5">Google</div>
+ <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <div class="card-body">Organize the world’s information and make it universally accessible and useful.</div>
+ <div class="card-image"><img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"></div>
+ <div class="card-footer"><a class="btn btn-primary" href="#cards">Search</a><a class="btn btn-link" href="#cards">Share</a></div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p>
- </div>
-
-<!-- cards -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-image&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&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;card-header&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-title h5&quot;</span>&gt;Microsoft&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-subtitle text-gray&quot;</span>&gt;Software and hardware&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
+ <p>Add a container element with the <code>card</code> class.
+ And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes.
+ The <code>card-image</code> can be placed in any position.
+ </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">"card"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-image"</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"</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">"card-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-title h5"</span>&gt;</span>Microsoft<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">"card-subtitle text-gray"</span>&gt;</span>Software and hardware<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>&gt;</span>
Empower every person and every organization on the planet to achieve more.
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Do&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="chips" class="container">
- <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3>
- <div class="docs-note">
- <p>Chips are complex entities in small blocks. </p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <span class="chip">
- Crime
- </span>
- <span class="chip">
- Drama
- </span>
- <span class="chip">
- Biography
- <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
- </span>
- <span class="chip">
- Mystery
- <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
- </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">"card-footer"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>Do<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-12">
- <div class="chip">
- <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
- Tony Stark
- </div>
- <div class="chip">
- <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
- Thor Odinson
- </div>
- <div class="chip">
- <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
- Steve Rogers
+ <div class="container" id="chips">
+ <h3 class="s-title"><a class="anchor" href="#chips" aria-hidden="true">#</a>Chips</h3>
+ <p>Chips are complex entities in small blocks. </p>
+ <div class="columns">
+ <div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div>
+ <div class="column col-12">
+ <div class="chip">
+ <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark
+ </div>
+ <div class="chip"><img class="avatar avatar-sm" src="img/avatar-1.png" alt="Thor Odinson">Thor Odinson</div>
+ <div class="chip"><img class="avatar avatar-sm" src="img/avatar-4.png" alt="Steve Rogers">Steve Rogers</div>
+ </div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p>
- </div>
+ <p>Add a container element with the <code>chip</code> class.
+ And add child text element, buttons or avatars with the <code>avatar</code> class.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>Crime<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-<!-- chips -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;Crime&lt;<span class="tag">/span</span>&gt;
-
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>
Biography
- &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">/span</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">span</span>&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>&gt;
+<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>&gt;</span>
Yan Zhu
- &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;</code>
-</pre>
-
- </div>
-
- <div id="empty" class="container">
- <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states</h3>
- <div class="docs-note">
- <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <div class="empty">
- <div class="empty-icon">
- <i class="icon icon-3x icon-mail"></i>
- </div>
- <p class="empty-title h5">You have no new messages</p>
- <p class="empty-subtitle">Click the button to start a conversation</p>
- <div class="empty-action">
- <button class="btn btn-primary">Send a message</button>
- </div>
- </div>
+ <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></code></pre>
</div>
- <div class="column col-12">
- <div class="empty">
- <div class="empty-icon">
- <i class="icon icon-3x icon-mail"></i>
+ <div class="container" id="empty">
+ <h3 class="s-title"><a class="anchor" href="#empty" aria-hidden="true">#</a>Empty states</h3>
+ <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
+ <div class="columns">
+ <div class="column col-12">
+ <div class="empty">
+ <div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div>
+ <p class="empty-title h5">You have no new messages</p>
+ <p class="empty-subtitle">Click the button to start a conversation</p>
+ <div class="empty-action">
+ <button class="btn btn-primary">Send a message</button>
+ </div>
+ </div>
</div>
- <p class="empty-title h5">You've successfully signed up</p>
- <p class="empty-subtitle">Click the button to invite your friends</p>
- <div class="empty-action">
- <button class="btn btn-primary">Invite your friends</button>
+ <div class="column col-12">
+ <div class="empty">
+ <div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div>
+ <p class="empty-title h5">You've successfully signed up</p>
+ <p class="empty-subtitle">Click the button to invite your friends</p>
+ <div class="empty-action">
+ <button class="btn btn-primary">Invite your friends</button>
+ </div>
+ <div class="empty-action">
+ <button class="btn btn-link">Skip</button>
+ </div>
+ </div>
</div>
- <div class="empty-action">
- <button class="btn btn-link">Skip</button>
+ <div class="column col-12">
+ <div class="empty">
+ <div class="empty-icon"><i class="icon icon-3x icon-people"></i></div>
+ <p class="empty-title h5">You are not following anyone</p>
+ <p class="empty-subtitle">Start to meet new friends</p>
+ <div class="empty-action input-group input-inline">
+ <input class="form-input" type="text" placeholder="">
+ <button class="btn btn-primary input-group-btn">Search</button>
+ </div>
+ </div>
</div>
</div>
+ <p>
+ An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+ Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements.
+ HTML structure is exampled below.
+ </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">"empty"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-icon"</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-people"</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">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-title h5"</span>&gt;</span>You have no new messages<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-subtitle"</span>&gt;</span>Click the button to start a conversation.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-action"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>Send a message<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-12">
- <div class="empty">
- <div class="empty-icon">
- <i class="icon icon-3x icon-people"></i>
+ <div class="container" id="menu">
+ <h3 class="s-title"><a class="anchor" href="#menu" aria-hidden="true">#</a>Menu</h3>
+ <p>Menus are vertical list of links or buttons for actions and navigation.</p>
+ <div class="columns">
+ <div class="column col-4 col-xs-12">
+ <ul class="menu">
+ <li class="menu-item">
+ <div class="tile tile-centered">
+ <div class="tile-icon"><img class="avatar" src="img/avatar-4.png" alt="Avatar"></div>
+ <div class="tile-content">Steve Rogers</div>
+ </div>
+ </li>
+ <li class="divider"></li>
+ <li class="menu-item">
+ <div class="menu-badge">
+ <label class="label label-primary">2</label>
+ </div><a class="active" href="#menus">My profile</a>
+ </li>
+ <li class="menu-item"><a href="#menus">Settings</a></li>
+ <li class="menu-item"><a href="#menus">Logout</a></li>
+ </ul>
</div>
- <p class="empty-title h5">You are not following anyone</p>
- <p class="empty-subtitle">Start to meet new friends</p>
- <div class="empty-action input-group input-inline">
- <input type="text" class="form-input" placeholder="">
- <button class="btn btn-primary input-group-btn">Search</button>
+ <div class="column col-4 col-xs-12">
+ <ul class="menu">
+ <li class="divider" data-content="LINKS"></li>
+ <li class="menu-item"><a href="#menus">Slack</a></li>
+ <li class="menu-item"><a href="#menus">Hipchat</a></li>
+ <li class="menu-item"><a href="#menus">Skype</a></li>
+ </ul>
</div>
- </div>
- </div>
- </div>
-
- <div class="docs-note">
- <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
- </div>
-
-<!-- empty states -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-icon&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title h5&quot;</span>&gt;You have no new messages&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-subtitle&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="menus" class="container">
- <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3>
- <div class="docs-note">
- <p>Menus are vertical list of links or buttons for actions and navigation.</p>
- </div>
- <div class="columns">
- <div class="column col-4 col-xs-12">
- <ul class="menu">
- <li class="menu-item">
- <div class="tile tile-centered">
- <div class="tile-icon">
- <img src="img/avatar-4.png" class="avatar" alt="Avatar">
- </div>
- <div class="tile-content">
- Steve Rogers
- </div>
- </div>
- </li>
- <li class="divider"></li>
- <li class="menu-item">
- <div class="menu-badge">
- <label class="label label-primary">2</label>
- </div>
- <a href="#menus" class="active">
- My profile
- </a>
- </li>
- <li class="menu-item">
- <a href="#menus">
- Settings
- </a>
- </li>
- <li class="menu-item">
- <a href="#menus">
- Logout
- </a>
- </li>
- </ul>
- </div>
- <div class="column col-4 col-xs-12">
- <ul class="menu">
- <li class="divider" data-content="LINKS"></li>
- <li class="menu-item">
- <a href="#menus">Slack</a>
- </li>
- <li class="menu-item">
- <a href="#menus">Hipchat</a>
- </li>
- <li class="menu-item">
- <a href="#menus">Skype</a>
- </li>
- </ul>
- </div>
- <div class="column col-4 col-xs-12">
- <ul class="menu">
- <li class="menu-item">
- <label class="form-checkbox">
- <input type="checkbox" checked>
- <i class="form-icon"></i> form-checkbox
- </label>
- </li>
- <li class="menu-item">
- <label class="form-radio">
- <input type="radio" checked>
- <i class="form-icon"></i> form-radio
- </label>
- </li>
- <li class="menu-item">
- <label class="form-switch">
- <input type="checkbox" checked>
- <i class="form-icon"></i> form-switch
- </label>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p>
- <p>Menus also have <a href="elements.html#forms" target="_blank">Form controls</a> (checkbox, radio and checkbox) support.</p>
- </div>
-
-<!-- menus -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
- <span class="com">&lt;!-- menu header text --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;LINKS&quot;</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu item standard --&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">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Slack
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu item with form control --&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">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; form-checkbox
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu divider --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu item with badge --&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">div</span> <span class="atn">class</span>=<span class="atv">&quot;menu-badge&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;2&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Settings
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4>
- <div class="docs-note">
- <p>The dropdown is a combination of buttons and menus.</p>
- </div>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="dropdown">
- <div class="btn-group">
- <a class="btn btn-primary">dropdown button</a>
- <a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a>
+ <div class="column col-4 col-xs-12">
<ul class="menu">
<li class="menu-item">
- <a href="#dropdowns">
- Slack
- </a>
+ <label class="form-checkbox">
+ <input type="checkbox" checked=""><i class="form-icon"></i> form-checkbox
+ </label>
</li>
<li class="menu-item">
- <a href="#dropdowns">
- Hipchat
- </a>
+ <label class="form-radio">
+ <input type="radio" checked=""><i class="form-icon"></i> form-radio
+ </label>
</li>
<li class="menu-item">
- <a href="#dropdowns">
- Skype
- </a>
+ <label class="form-switch">
+ <input type="checkbox" checked=""><i class="form-icon"></i> form-switch
+ </label>
</li>
</ul>
</div>
</div>
- </div>
- <div class="column col-xs-12">
- <div class="dropdown">
- <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
- <ul class="menu">
- <li class="menu-item">
- <a href="#dropdowns">
- Slack
- </a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">
- Hipchat
- </a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">
- Skype
- </a>
- </li>
- </ul>
+ <p>Add a container element with the <code>menu</code> class.
+ And add child elements with the <code>menu-item</code> class.
+ You can separate menu items with a <code>divider</code>.
+ Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
+ </p>
+ <p>Menus also have <a href="elements.html#forms" target="_blank">Form controls</a> (checkbox, radio and checkbox) support.</p>
+ <pre class="code" data-lang="HTML"><code><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 header text --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"LINKS"</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu item standard --&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">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Slack
+ <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-comment">&lt;!-- menu item with form control --&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">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> form-checkbox
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu divider --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu item with badge --&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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Settings
+ <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>
+ </code></pre>
+ <h4 class="s-subtitle" id="menu-dropdown"><a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a>Dropdown menu</h4>
+ <p>The dropdown is a combination of buttons and menus.</p>
+ <div class="columns">
+ <div class="column col-xs-12">
+ <div class="dropdown">
+ <div class="btn-group"><a class="btn btn-primary">dropdown button</a><a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a>
+ <ul class="menu">
+ <li class="menu-item"><a href="#dropdowns">Slack</a></li>
+ <li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
+ <li class="menu-item"><a href="#dropdowns">Skype</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="column col-xs-12">
+ <div class="dropdown"><a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
+ <ul class="menu">
+ <li class="menu-item"><a href="#dropdowns">Slack</a></li>
+ <li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
+ <li class="menu-item"><a href="#dropdowns">Skype</a></li>
+ </ul>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
- <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable.</p>
- <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
- </div>
- <div class="columns">
- <div class="column col-xs-12 text-right">
- <div class="dropdown dropdown-right">
- <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
- <ul class="menu text-left">
- <li class="menu-item">
- <a href="#dropdowns">Slack</a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">Hipchat</a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">Skype</a>
- </li>
- </ul>
+ <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
+ <p>Add a container element with the <code>dropdown</code> class.
+ And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it.
+ You also need to add <code>tabindex</code> to make the buttons focusable.
+ </p>
+ <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
+ <div class="columns">
+ <div class="column col-xs-12 text-right">
+ <div class="dropdown dropdown-right"><a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
+ <ul class="menu text-left">
+ <li class="menu-item"><a href="#dropdowns">Slack</a></li>
+ <li class="menu-item"><a href="#dropdowns">Hipchat</a></li>
+ <li class="menu-item"><a href="#dropdowns">Skype</a></li>
+ </ul>
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p>
- </div>
-
-<!-- dropdowns -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- basic dropdown button --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;dropdown&quot;</span>&gt;
- &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-link dropdown-toggle&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;0&quot;</span>&gt;
- dropdown menu &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-caret&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- <span class="com">&lt;!-- menu component --&gt;</span>
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
+ <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- basic dropdown button --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link dropdown-toggle"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>&gt;</span>
+ dropdown menu <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</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-comment">&lt;!-- menu component --&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>
...
- &lt;<span class="tag">/ul</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <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>
-<span class="com">&lt;!-- dropdown button group --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;dropdown&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group&quot;</span>&gt;
- &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&quot;</span>&gt;
+<span class="hljs-comment">&lt;!-- dropdown button group --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>
dropdown button
- &lt;<span class="tag">/a</span>&gt;
- &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 dropdown-toggle&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;0&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-caret&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn dropdown-toggle"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</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-caret"</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="com">&lt;!-- menu component --&gt;</span>
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
+ <span class="hljs-comment">&lt;!-- menu component --&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>
...
- &lt;<span class="tag">/ul</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="modals" class="container">
- <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3>
- <div class="docs-note">
- <p>Modals are flexible dialog prompts.</p>
- </div>
- <div class="columns">
- <div class="column">
- <a href="#example-modal-1" class="btn btn-primary">Open Modal</a>
- <div class="modal" id="example-modal-1">
- <a href="#modals" class="modal-overlay" aria-label="Close"></a>
- <div class="modal-container" role="document">
- <div class="modal-header">
- <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a>
- <div class="modal-title h5">Modal title</div>
- </div>
- <div class="modal-body">
- <div class="content">
- <p>This is the content inside the modal.</p>
- <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>
- <h4>Cupcake ipsum</h4>
- <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
- <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
- <h4>Candy ipsum</h4>
- <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
- <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
+ <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>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+ </div>
+ <div class="container" id="modals">
+ <h3 class="s-title"><a class="anchor" href="#modals" aria-hidden="true">#</a>Modals</h3>
+ <p>Modals are flexible dialog prompts.</p>
+ <div class="columns">
+ <div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a>
+ <div class="modal" id="example-modal-1"><a class="modal-overlay" href="#modals" aria-label="Close"></a>
+ <div class="modal-container" role="document">
+ <div class="modal-header"><a class="btn btn-clear float-right" href="#modals" aria-label="Close"></a>
+ <div class="modal-title h5">Modal title</div>
+ </div>
+ <div class="modal-body">
+ <div class="content">
+ <p>This is the content inside the modal.</p>
+ <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>
+ <h4>Cupcake ipsum</h4>
+ <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
+ <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
+ <h4>Candy ipsum</h4>
+ <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
+ <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals">Close</a>
+ </div>
</div>
</div>
- <div class="modal-footer">
- <button class="btn btn-primary">Share</button>
- <a href="#modals" class="btn btn-link">Close</a>
- </div>
</div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>modal</code> class. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the <code>modal-header</code>, <code>modal-body</code> and <code>modal-footer</code> - any or all of them. </p>
- <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.</p>
- </div>
-
-<!-- modals example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal active&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;modal-id&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</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;modal-container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-header&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span> <span class="atn">aria-label</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;modal-title h5&quot;</span>&gt;Modal title&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-body&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;content&quot;</span>&gt;
- <span class="com">&lt;!-- content here --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-footer&quot;</span>&gt;
+ <p>Add a container element with the <code>modal</code> class.
+ And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it.
+ You can add child elements with the <code>modal-header</code>, <code>modal-body</code> and <code>modal-footer</code> - any or all of them.
+ </p>
+ <p>
+ Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
+ To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.
+ </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">"modal active"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-id"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title h5"</span>&gt;</span>Modal title<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-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">"content"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- content here --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>&gt;</span>
...
- &lt;<span class="tag">/div</span>&gt;
- &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>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <a href="#example-modal-2" class="btn btn-primary">Open small size Modal</a>
- <div class="modal modal-sm" id="example-modal-2">
- <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a>
- <div class="modal-container" role="document">
- <div class="modal-header">
- <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a>
- <div class="modal-title h5">Modal title</div>
- </div>
- <div class="modal-body">
- <div class="content">
- <form>
- <div class="form-group">
- <label class="form-label" for="input-example-7">Name</label>
- <input class="form-input" type="text" id="input-example-7" placeholder="Name">
+ <h4 class="s-subtitle" id="modals-sizes"><a class="anchor" href="#modals-sizes" aria-hidden="true">#</a>Modal sizes</h4>
+ <div class="columns">
+ <div class="column col-6 col-xs-12"><a class="btn btn-primary" href="#example-modal-2">Open small size Modal</a>
+ <div class="modal modal-sm" id="example-modal-2"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
+ <div class="modal-container" role="document">
+ <div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a>
+ <div class="modal-title h5">Modal title</div>
+ </div>
+ <div class="modal-body">
+ <div class="content">
+ <form>
+ <div class="form-group">
+ <label class="form-label" for="input-example-7">Name</label>
+ <input class="form-input" id="input-example-7" type="text" placeholder="Name">
+ </div>
+ <div class="form-group">
+ <label class="form-label">Gender</label>
+ <label class="form-radio">
+ <input type="radio" name="gender"><i class="form-icon"></i> Male
+ </label>
+ <label class="form-radio">
+ <input type="radio" name="gender" checked=""><i class="form-icon"></i> Female
+ </label>
+ </div>
+ </form>
</div>
- <div class="form-group">
- <label class="form-label">Gender</label>
- <label class="form-radio">
- <input type="radio" name="gender">
- <i class="form-icon"></i> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender" checked>
- <i class="form-icon"></i> Female
- </label>
- </div>
- </form>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-primary">Submit</button><a class="btn btn-link" href="#modals-sizes" aria-label="Close">Close</a>
+ </div>
</div>
</div>
- <div class="modal-footer">
- <button class="btn btn-primary">Submit</button>
- <a href="#modals-sizes" class="btn btn-link" aria-label="Close">Close</a>
- </div>
</div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p>
- </div>
- <div class="columns">
- <div class="column">
- <a href="#example-modal-3" class="btn btn-primary">Open large size Modal</a>
- <div class="modal modal-lg" id="example-modal-3">
- <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a>
- <div class="modal-container modal-fullheight" role="document">
- <div class="modal-header">
- <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a>
- <div class="modal-title h5">Modal title</div>
- </div>
- <div class="modal-body">
- <div class="content">
- <p>This is the content inside the modal.</p>
- <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>
- <h4>Cupcake ipsum</h4>
- <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
- <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
- <h4>Candy ipsum</h4>
- <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
- <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
+ <p>Use the <code>modal-sm</code> class for a smaller modal dialog.
+ The container max width is <code>320px</code>.
+ </p>
+ <div class="columns">
+ <div class="column"><a class="btn btn-primary" href="#example-modal-3">Open large size Modal</a>
+ <div class="modal modal-lg" id="example-modal-3"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
+ <div class="modal-container" role="document">
+ <div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a>
+ <div class="modal-title h5">Modal title</div>
+ </div>
+ <div class="modal-body">
+ <div class="content">
+ <p>This is the content inside the modal.</p>
+ <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>
+ <h4>Cupcake ipsum</h4>
+ <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
+ <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
+ <h4>Candy ipsum</h4>
+ <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
+ <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals-sizes">Close</a>
+ </div>
</div>
</div>
- <div class="modal-footer">
- <button class="btn btn-primary">Share</button>
- <a href="#modals-sizes" class="btn btn-link">Close</a>
- </div>
</div>
</div>
+ <p>Use the <code>modal-lg</code> class for a full size modal.
+ The container max width is <code>960px</code>.
+ </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">"modal modal-sm"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- modal structure here --&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>
- <div class="docs-note">
- <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p>
- </div>
-
-<!-- modals -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal modal-sm&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</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;modal-container&quot;</span>&gt;
- <span class="com">&lt;!-- modal structure here --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- <div class="docs-note">
- <p>Add the <code>modal-fullheight</code> class to <code>modal-container</code> to have a 100% viewport height modal. The default container max height is <code>75vh</code>.</p>
- </div>
-
-<!-- modals -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</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;modal-container modal-fullheight&quot;</span>&gt;
- <span class="com">&lt;!-- modal structure here --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="navs" class="container">
- <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <ul class="nav">
- <li class="nav-item">
- <a href="#nav">Elements</a>
- </li>
- <li class="nav-item active">
- <a href="#nav">Layout</a>
+ <div class="container" id="nav">
+ <h3 class="s-title"><a class="anchor" href="#nav" aria-hidden="true">#</a>Nav</h3>
+ <div class="columns">
+ <div class="column col-6 col-xs-12">
<ul class="nav">
- <li class="nav-item">
- <a href="#nav">Flexbox grid</a>
- </li>
- <li class="nav-item">
- <a href="#nav">Responsive</a>
- </li>
- <li class="nav-item">
- <a href="#nav">Navbar</a>
- </li>
- <li class="nav-item">
- <a href="#nav">Empty states</a>
+ <li class="nav-item"><a href="#nav">Elements</a></li>
+ <li class="nav-item active"><a href="#nav">Layout</a>
+ <ul class="nav">
+ <li class="nav-item"><a href="#nav">Flexbox grid</a></li>
+ <li class="nav-item"><a href="#nav">Responsive</a></li>
+ <li class="nav-item"><a href="#nav">Navbar</a></li>
+ <li class="nav-item"><a href="#nav">Empty states</a></li>
+ </ul>
</li>
+ <li class="nav-item"><a href="#nav">Components</a></li>
+ <li class="nav-item"><a href="#nav">Utilities</a></li>
</ul>
- </li>
- <li class="nav-item">
- <a href="#nav">Components</a>
- </li>
- <li class="nav-item">
- <a href="#nav">Utilities</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p>
- </div>
-
-<!-- navs -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;nav&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Elements&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Layout&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;nav&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Flexbox grid&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Responsive&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Navbar&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Empty states&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">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Components&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Utilities&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="pagination" class="container">
- <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3>
- <div class="columns">
- <div class="column col-xs-12">
- <ul class="pagination">
- <li class="page-item">
- <a href="#pagination">Prev</a>
- </li>
- <li class="page-item">
- <a href="#pagination">1</a>
- </li>
- <li class="page-item">
- <span>...</span>
- </li>
- <li class="page-item">
- <a href="#pagination">4</a>
- </li>
- <li class="page-item active">
- <a href="#pagination">5</a>
- </li>
- <li class="page-item">
- <a href="#pagination">6</a>
- </li>
- <li class="page-item">
- <span>...</span>
- </li>
- <li class="page-item">
- <a href="#pagination">9</a>
- </li>
- <li class="page-item">
- <a href="#pagination">Next</a>
- </li>
- </ul>
- </div>
- <div class="column col-xs-12">
- <ul class="pagination">
- <li class="page-item disabled">
- <a href="#pagination" tabindex="-1">Prev</a>
- </li>
- <li class="page-item active">
- <a href="#pagination">1</a>
- </li>
- <li class="page-item">
- <a href="#pagination">2</a>
- </li>
- <li class="page-item">
- <a href="#pagination">3</a>
- </li>
- <li class="page-item">
- <span>...</span>
- </li>
- <li class="page-item">
- <a href="#pagination">9</a>
- </li>
- <li class="page-item">
- <a href="#pagination">Next</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p>
- </div>
-
-<!-- pagination -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;pagination&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item disabled&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;Previous&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;1&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;2&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;3&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">span</span>&gt;...&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;12&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Next&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- <div class="columns">
- <div class="column col-12">
- <ul class="pagination">
- <li class="page-item page-prev">
- <a href="#pagination">
- <div class="page-item-subtitle">Previous</div>
- <div class="page-item-title h5">Getting started</div>
- </a>
- </li>
- <li class="page-item page-next">
- <a href="#pagination">
- <div class="page-item-subtitle">Next</div>
- <div class="page-item-title h5">Layout</div>
- </a>
- </li>
- </ul>
+ </div>
+ </div>
+ <p>Add a container element with the <code>nav</code> class.
+ And add child elements with the <code>nav-item</code> class.
+ The <code>nav-item</code> with the <code>active</code> class will be highlighted.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-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>Elements<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item active"</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>Layout<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-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>Flexbox grid<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-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>Responsive<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-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>Navbar<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-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>Empty states<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">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-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>Components<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-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>Utilities<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></code></pre>
</div>
- </div>
- <div class="docs-note">
- <p>You could use previous and next pagination to navigate. </p>
- </div>
-
-<!-- pagination -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;pagination&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item page-prev&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;page-item-subtitle&quot;</span>&gt;Previous&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-title h5&quot;</span>&gt;Getting started&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">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item page-next&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;page-item-subtitle&quot;</span>&gt;Next&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-title h5&quot;</span>&gt;Layout&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;
-</code></pre>
-
- </div>
-
- <div id="panels" class="container">
- <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3>
- <div class="docs-note">
- <p>Panels are flexible view container with auto-expand content section.</p>
- </div>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="panel">
- <div class="panel-header text-center">
- <figure class="avatar avatar-lg">
- <img src="img/avatar-2.png" alt="Avatar">
- </figure>
- <div class="panel-title h5 mt-10">Bruce Banner</div>
- <div class="panel-subtitle">THE HULK</div>
+ <div class="container" id="pagination">
+ <h3 class="s-title"><a class="anchor" href="#pagination" aria-hidden="true">#</a>Pagination</h3>
+ <div class="columns">
+ <div class="column col-xs-12">
+ <ul class="pagination">
+ <li class="page-item"><a href="#pagination">Prev</a></li>
+ <li class="page-item"><a href="#pagination">1</a></li>
+ <li class="page-item"><span>...</span></li>
+ <li class="page-item"><a href="#pagination">4</a></li>
+ <li class="page-item active"><a href="#pagination">5</a></li>
+ <li class="page-item"><a href="#pagination">6</a></li>
+ <li class="page-item"><span>...</span></li>
+ <li class="page-item"><a href="#pagination">9</a></li>
+ <li class="page-item"><a href="#pagination">Next</a></li>
+ </ul>
</div>
- <nav class="panel-nav">
- <ul class="tab tab-block">
- <li class="tab-item active">
- <a href="#panels">
- Profile
- </a>
- </li>
- <li class="tab-item">
- <a href="#panels">
- Files
- </a>
- </li>
- <li class="tab-item">
- <a href="#panels">
- Tasks
- </a>
- </li>
+ <div class="column col-xs-12">
+ <ul class="pagination">
+ <li class="page-item disabled"><a href="#pagination" tabindex="-1">Prev</a></li>
+ <li class="page-item active"><a href="#pagination">1</a></li>
+ <li class="page-item"><a href="#pagination">2</a></li>
+ <li class="page-item"><a href="#pagination">3</a></li>
+ <li class="page-item"><span>...</span></li>
+ <li class="page-item"><a href="#pagination">9</a></li>
+ <li class="page-item"><a href="#pagination">Next</a></li>
</ul>
- </nav>
- <div class="panel-body">
- <div class="tile tile-centered">
- <div class="tile-content">
- <div class="tile-title">E-mail</div>
- <div class="tile-subtitle">bruce.banner@hulk.com</div>
- </div>
- <div class="tile-action">
- <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+ </div>
+ </div>
+ <p>Add a container element with the <code>pagination</code> class.
+ And add child elements with the <code>page-item</code> class.
+ The <code>page-item</code> with the <code>active</code> class will be highlighted.
+ You can add the <code>disabled</code> class to the <code>page-item</code> to have unclickable page links.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item disabled"</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> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>Previous<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item active"</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>1<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-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>2<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-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>3<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-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>12<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-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>Next<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>
+</code></pre>
+ <div class="columns">
+ <div class="column col-12">
+ <ul class="pagination">
+ <li class="page-item page-prev"><a href="#pagination">
+ <div class="page-item-subtitle">Previous</div>
+ <div class="page-item-title h5">Getting started</div></a></li>
+ <li class="page-item page-next"><a href="#pagination">
+ <div class="page-item-subtitle">Next</div>
+ <div class="page-item-title h5">Layout</div></a></li>
+ </ul>
+ </div>
+ </div>
+ <p>You could use previous and next pagination to navigate. </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-prev"</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">"page-item-subtitle"</span>&gt;</span>Previous<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">"page-item-title h5"</span>&gt;</span>Getting started<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-next"</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">"page-item-subtitle"</span>&gt;</span>Next<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">"page-item-title h5"</span>&gt;</span>Layout<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></code></pre>
+ </div>
+ <div class="container" id="panels">
+ <h3 class="s-title"><a class="anchor" href="#panels" aria-hidden="true">#</a>Panels</h3>
+ <p>Panels are flexible view container with auto-expand content section.</p>
+ <div class="columns">
+ <div class="column col-6 col-xs-12">
+ <div class="panel">
+ <div class="panel-header text-center">
+ <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"></figure>
+ <div class="panel-title h5 mt-10">Bruce Banner</div>
+ <div class="panel-subtitle">THE HULK</div>
</div>
- </div>
- <div class="tile tile-centered">
- <div class="tile-content">
- <div class="tile-title">Skype</div>
- <div class="tile-subtitle">bruce.banner</div>
+ <nav class="panel-nav">
+ <ul class="tab tab-block">
+ <li class="tab-item active"><a href="#panels">Profile</a></li>
+ <li class="tab-item"><a href="#panels">Files</a></li>
+ <li class="tab-item"><a href="#panels">Tasks</a></li>
+ </ul>
+ </nav>
+ <div class="panel-body">
+ <div class="tile tile-centered">
+ <div class="tile-content">
+ <div class="tile-title">E-mail</div>
+ <div class="tile-subtitle">bruce.banner@hulk.com</div>
+ </div>
+ <div class="tile-action">
+ <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+ </div>
+ </div>
+ <div class="tile tile-centered">
+ <div class="tile-content">
+ <div class="tile-title">Skype</div>
+ <div class="tile-subtitle">bruce.banner</div>
+ </div>
+ <div class="tile-action">
+ <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+ </div>
+ </div>
+ <div class="tile tile-centered">
+ <div class="tile-content">
+ <div class="tile-title">Location</div>
+ <div class="tile-subtitle">Dayton, Ohio</div>
+ </div>
+ <div class="tile-action">
+ <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+ </div>
+ </div>
</div>
- <div class="tile-action">
- <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+ <div class="panel-footer">
+ <button class="btn btn-primary btn-block">Save</button>
</div>
</div>
- <div class="tile tile-centered">
- <div class="tile-content">
- <div class="tile-title">Location</div>
- <div class="tile-subtitle">Dayton, Ohio</div>
+ </div>
+ <div class="column col-6 col-xs-12">
+ <div class="panel">
+ <div class="panel-header">
+ <div class="panel-title h6">Comments</div>
</div>
- <div class="tile-action">
- <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+ <div class="panel-body">
+ <div class="tile">
+ <div class="tile-icon">
+ <figure class="avatar"><img src="img/avatar-1.png" alt="Avatar"></figure>
+ </div>
+ <div class="tile-content">
+ <p class="tile-title">Thor Odinson</p>
+ <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ </div>
+ </div>
+ <div class="tile">
+ <div class="tile-icon">
+ <figure class="avatar"><img src="img/avatar-2.png" alt="Avatar"></figure>
+ </div>
+ <div class="tile-content">
+ <p class="tile-title">Bruce Banner</p>
+ <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+ </div>
+ </div>
+ <div class="tile">
+ <div class="tile-icon">
+ <figure class="avatar" data-initial="TS"></figure>
+ </div>
+ <div class="tile-content">
+ <p class="tile-title">Tony Stark</p>
+ <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ </div>
+ </div>
+ <div class="tile">
+ <div class="tile-icon">
+ <figure class="avatar"><img src="img/avatar-4.png" alt="Avatar"></figure>
+ </div>
+ <div class="tile-content">
+ <p class="tile-title">Steve Rogers</p>
+ <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+ </div>
+ </div>
+ <div class="tile">
+ <div class="tile-icon">
+ <figure class="avatar"><img src="img/avatar-3.png" alt="Avatar"></figure>
+ </div>
+ <div class="tile-content">
+ <p class="tile-title">Natasha Romanoff</p>
+ <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ </div>
+ </div>
+ </div>
+ <div class="panel-footer">
+ <div class="input-group">
+ <input class="form-input" type="text" placeholder="Hello">
+ <button class="btn btn-primary input-group-btn">Send</button>
+ </div>
</div>
</div>
</div>
- <div class="panel-footer">
- <button class="btn btn-primary btn-block">Save</button>
- </div>
</div>
+ <p>Add a container element with the <code>panel</code> class.
+ And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> classes.
+ The <code>panel-body</code> can be auto expanded and vertically scrollable.
+ </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">"panel"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-title"</span>&gt;</span>Comments<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-nav"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- navigation components: tabs, breadcrumbs or pagination --&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">"panel-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- contents --&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">"panel-footer"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- buttons or inputs --&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-6 col-xs-12">
- <div class="panel">
- <div class="panel-header">
- <div class="panel-title h6">Comments</div>
- </div>
- <div class="panel-body">
- <div class="tile">
- <div class="tile-icon">
- <figure class="avatar">
- <img src="img/avatar-1.png" alt="Avatar">
- </figure>
- </div>
- <div class="tile-content">
- <p class="tile-title">Thor Odinson</p>
- <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ <div class="container" id="popovers">
+ <h3 class="s-title"><a class="anchor" href="#popovers" aria-hidden="true">#</a>Popovers</h3>
+ <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
+ <div class="columns">
+ <div class="column col-3 col-sm-6">
+ <div class="popover"><a class="btn btn-primary" href="#popovers">top popover</a>
+ <div class="popover-container">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title h5">Apple</div>
+ <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+ <div class="card-footer">
+ <button class="btn btn-primary">Buy</button>
+ </div>
+ </div>
</div>
</div>
- <div class="tile">
- <div class="tile-icon">
- <figure class="avatar">
- <img src="img/avatar-2.png" alt="Avatar">
- </figure>
- </div>
- <div class="tile-content">
- <p class="tile-title">Bruce Banner</p>
- <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+ </div>
+ <div class="column col-3 col-sm-6">
+ <div class="popover popover-right"><a class="btn btn-primary" href="#popovers">right popover</a>
+ <div class="popover-container">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title h5">Apple</div>
+ <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+ <div class="card-footer">
+ <button class="btn btn-primary">Buy</button>
+ </div>
+ </div>
</div>
</div>
- <div class="tile">
- <div class="tile-icon">
- <figure class="avatar" data-initial="TS"></figure>
+ </div>
+ <div class="column col-3 col-sm-6">
+ <div class="popover popover-bottom"><a class="btn btn-primary" href="#popovers">bottom popover</a>
+ <div class="popover-container">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title h5">Apple</div>
+ <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+ <div class="card-footer">
+ <button class="btn btn-primary">Buy</button>
+ </div>
+ </div>
</div>
- <div class="tile-content">
- <p class="tile-title">Tony Stark</p>
- <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ </div>
+ </div>
+ <div class="column col-3 col-sm-6">
+ <div class="popover popover-left"><a class="btn btn-primary" href="#popovers">left popover</a>
+ <div class="popover-container">
+ <div class="card">
+ <div class="card-header">
+ <div class="card-title h5">Apple</div>
+ <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div>
+ <div class="card-footer">
+ <button class="btn btn-primary">Buy</button>
+ </div>
+ </div>
</div>
</div>
+ </div>
+ </div>
+ <p>Wrap an element by a container with the <code>popover</code> class.
+ And add a container with the <code>popover-container</code> next to the element.
+ You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>.
+ </p>
+ <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position.
+ By default, the popovers appear above the element.
+ </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">"popover popover-right"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>right popover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover-container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</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">"card-body"</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">"card-footer"</span>&gt;</span>
+ ...
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+ </div>
+ <div class="container" id="steps">
+ <h3 class="s-title"><a class="anchor" href="#steps" aria-hidden="true">#</a>Steps</h3>
+ <p>Steps are progress indicators of a sequence of task steps.</p>
+ <div class="columns">
+ <div class="column col-12">
+ <ul class="step">
+ <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip"></a></li>
+ <li class="step-item active"><a class="tooltip" href="#steps" data-tooltip="Step 2 Tooltip"></a></li>
+ <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 3 Tooltip"></a></li>
+ <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 4 Tooltip"></a></li>
+ </ul>
+ </div>
+ <div class="column col-12">
+ <ul class="step">
+ <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip">Step 1</a></li>
+ <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 2 Tooltip">Step 2</a></li>
+ <li class="step-item active"><a class="tooltip" href="#steps" data-tooltip="Step 3 Tooltip">Step 3</a></li>
+ <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 4 Tooltip">Step 4</a></li>
+ </ul>
+ </div>
+ </div>
+ <p>Add a container element with the <code>step</code> class.
+ And add child elements with the <code>step-item</code> class.
+ The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-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> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 1"</span>&gt;</span>Step 1<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item active"</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 2"</span>&gt;</span>Step 2<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-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> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 3"</span>&gt;</span>Step 3<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-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> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 4"</span>&gt;</span>Step 4<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>
+ </code></pre>
+ </div>
+ <div class="container" id="tabs">
+ <h3 class="s-title"><a class="anchor" href="#tabs" aria-hidden="true">#</a>Tabs</h3>
+ <p>Tabs enable quick switch between different views.</p>
+ <div class="columns">
+ <div class="column col-6 col-sm-12">
+ <ul class="tab">
+ <li class="tab-item active"><a href="#tabs">Music</a></li>
+ <li class="tab-item"><a href="#tabs">Playlists</a></li>
+ <li class="tab-item"><a href="#tabs">Radio</a></li>
+ <li class="tab-item"><a href="#tabs">Store</a></li>
+ </ul>
+ </div>
+ <div class="column col-6 col-sm-12">
+ <ul class="tab tab-block">
+ <li class="tab-item active"><a href="#tabs">Music</a></li>
+ <li class="tab-item"><a href="#tabs">Playlists</a></li>
+ <li class="tab-item"><a href="#tabs">Radio</a></li>
+ </ul>
+ </div>
+ </div>
+ <p>Add a container element with the <code>tab</code> class.
+ And add child elements with the <code>tab-item</code> class.
+ You can add the <code>tab-block</code> class for a full-width tab.
+ The <code>tab-item</code> or its child &lt;a&gt; with the <code>active</code> class will be highlighted.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</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>Music<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-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> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>&gt;</span>Playlists<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-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>Radio<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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-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>Connect<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>
+</code></pre>
+ <div class="columns">
+ <div class="column col-sm-12">
+ <ul class="tab">
+ <li class="tab-item active"><a class="badge" href="#tabs" data-badge="999">Music</a></li>
+ <li class="tab-item"><a href="#tabs">Playlists</a></li>
+ <li class="tab-item"><a href="#tabs">Radio</a></li>
+ </ul>
+ </div>
+ <div class="column col-sm-12">
+ <ul class="tab tab-block">
+ <li class="tab-item active"><a class="badge" href="#tabs" data-badge="9">Music</a></li>
+ <li class="tab-item"><a class="badge" href="#tabs" data-badge="99">Playlists</a></li>
+ <li class="tab-item"><a href="#tabs">Radio</a></li>
+ </ul>
+ </div>
+ </div>
+ <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"9"</span>&gt;</span>
+ Music
+ <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>
+</code></pre>
+ <div class="columns">
+ <div class="column col-12">
+ <ul class="tab">
+ <li class="tab-item active"><a href="#tabs">Music<span class="btn btn-clear"></span></a></li>
+ <li class="tab-item"><a href="#tabs">Playlists</a></li>
+ <li class="tab-item"><a href="#tabs">Radio</a></li>
+ <li class="tab-item"><a href="#tabs">Store</a></li>
+ <li class="tab-item tab-action">
+ <div class="input-group input-inline">
+ <input class="form-input input-sm" type="text" placeholder="search">
+ <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <p>
+ You could add a search box or buttons inside a tab.
+ Add the <code>tab-action</code> class to the <code>tab-item</code>.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</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>
+ Music
+ <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">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item tab-action"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>&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 input-sm"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"search"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm input-group-btn"</span>&gt;</span>Search<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
+ </div>
+ <div class="container" id="tiles">
+ <h3 class="s-title"><a class="anchor" href="#tiles" aria-hidden="true">#</a>Tiles</h3>
+ <p>Tiles are repeatable or embeddable information blocks.</p>
+ <div class="columns">
+ <div class="column col-9 col-sm-12">
<div class="tile">
<div class="tile-icon">
- <figure class="avatar">
- <img src="img/avatar-4.png" alt="Avatar">
- </figure>
+ <figure class="avatar avatar-lg"><img src="img/avatar-3.png" alt="Avatar"></figure>
</div>
<div class="tile-content">
- <p class="tile-title">Steve Rogers</p>
- <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+ <p class="tile-title">The Avengers</p>
+ <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ </div>
+ <div class="tile-action">
+ <button class="btn btn-primary">Join</button>
+ <button class="btn">Contact</button>
</div>
</div>
+ </div>
+ <div class="column col-9 col-sm-12">
<div class="tile">
<div class="tile-icon">
- <figure class="avatar">
- <img src="img/avatar-3.png" alt="Avatar">
- </figure>
+ <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"></figure>
</div>
<div class="tile-content">
- <p class="tile-title">Natasha Romanoff</p>
- <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ <p class="tile-title">The S.H.I.E.L.D.</p>
+ <p class="tile-subtitle text-gray">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+ <p>
+ <button class="btn btn-primary btn-sm">Join</button>
+ <button class="btn btn-sm">Contact</button>
+ </p>
</div>
</div>
</div>
- <div class="panel-footer">
- <div class="input-group">
- <input type="text" class="form-input" placeholder="Hello">
- <button class="btn btn-primary input-group-btn">Send</button>
- </div>
- </div>
</div>
- </div>
- </div>
-
- <div class="docs-note">
- <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p>
- </div>
-
-<!-- panels -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-header&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-title&quot;</span>&gt;Comments&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-nav&quot;</span>&gt;
- <span class="com">&lt;!-- navigation components: tabs, breadcrumbs or pagination --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-body&quot;</span>&gt;
- <span class="com">&lt;!-- contents --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-footer&quot;</span>&gt;
- <span class="com">&lt;!-- buttons or inputs --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <p>Add a container with the <code>tile</code> class.
+ And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes.
+ The <code>tile-icon</code> and <code>tile-action</code> are optional.
+ </p>
+ <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</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">"tile"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</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-file centered"</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">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>&gt;</span>The Avengers<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>&gt;</span>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...<span class="hljs-tag">&lt;/<span class="hljs-name">p</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-action"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>Join<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- </div>
-
- <div id="popovers" class="container">
- <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3>
- <div class="docs-note">
- <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
- </div>
- <div class="columns">
- <div class="column col-3 col-sm-6">
- <div class="popover">
- <a href="#popovers" class="btn btn-primary">
- top popover
- </a>
- <div class="popover-container">
- <div class="card">
- <div class="card-header">
- <div class="card-title h5">Apple</div>
- <div class="card-subtitle text-gray">Software and hardware</div>
+ <h4 class="s-subtitle" id="tiles-compact"><a class="anchor" href="#tiles-compact" aria-hidden="true">#</a>Compact tiles</h4>
+ <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
+ <p>Add the <code>tile-centered</code> class to the container <code>tile</code>.
+ The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.
+ </p>
+ <div class="columns">
+ <div class="column col-6 col-md-9 col-xs-12">
+ <div class="tile tile-centered">
+ <div class="tile-icon">
+ <div class="example-tile-icon"><i class="icon icon-mail centered"></i></div>
</div>
- <div class="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
+ <div class="tile-content">
+ <div class="tile-title">spectre-docs.pdf</div>
+ <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
</div>
- <div class="card-footer">
- <button class="btn btn-primary">Buy</button>
+ <div class="tile-action">
+ <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button>
</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">"tile tile-centered"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</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-file centered"</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">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-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">"tile-title"</span>&gt;</span>spectre-docs.pdf<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-subtitle text-gray"</span>&gt;</span>14MB · Public · 1 Jan, 2017<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</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-more-vert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-3 col-sm-6">
- <div class="popover popover-right">
- <a href="#popovers" class="btn btn-primary">
- right popover
- </a>
- <div class="popover-container">
- <div class="card">
- <div class="card-header">
- <div class="card-title h5">Apple</div>
- <div class="card-subtitle text-gray">Software and hardware</div>
- </div>
- <div class="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
- </div>
- <div class="card-footer">
- <button class="btn btn-primary">Buy</button>
- </div>
+ <div class="container" id="toasts">
+ <h3 class="s-title"><a class="anchor" href="#toasts" aria-hidden="true">#</a>Toasts</h3>
+ <p>Toasts are used to show alert or information to users.</p>
+ <div class="columns">
+ <div class="column col-9 col-sm-12">
+ <div class="toast">
+ <button class="btn btn-clear float-right"></button>
+ <h6>Toast Title</h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
- </div>
- </div>
- <div class="column col-3 col-sm-6">
- <div class="popover popover-bottom">
- <a href="#popovers" class="btn btn-primary">
- bottom popover
- </a>
- <div class="popover-container">
- <div class="card">
- <div class="card-header">
- <div class="card-title h5">Apple</div>
- <div class="card-subtitle text-gray">Software and hardware</div>
- </div>
- <div class="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
- </div>
- <div class="card-footer">
- <button class="btn btn-primary">Buy</button>
- </div>
+ <div class="column col-9 col-sm-12">
+ <div class="toast toast-primary">
+ <button class="btn btn-clear float-right"></button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
- </div>
- <div class="column col-3 col-sm-6">
- <div class="popover popover-left">
- <a href="#popovers" class="btn btn-primary">
- left popover
- </a>
- <div class="popover-container">
- <div class="card">
- <div class="card-header">
- <div class="card-title h5">Apple</div>
- <div class="card-subtitle text-gray">Software and hardware</div>
- </div>
- <div class="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
- </div>
- <div class="card-footer">
- <button class="btn btn-primary">Buy</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="docs-note">
- <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p>
- <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p>
- </div>
-
-<!-- popovers -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;popover popover-right&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;right popover&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;popover-container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-header&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;card-body&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;card-footer&quot;</span>&gt;
- ...
- &lt;<span class="tag">/div</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>
-
- </div>
-
- <div id="steps" class="container">
- <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3>
- <div class="docs-note">
- <p>Steps are progress indicators of a sequence of task steps.</p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <ul class="step">
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip"></a>
- </li>
- <li class="step-item active">
- <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip"></a>
- </li>
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip"></a>
- </li>
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip"></a>
- </li>
- </ul>
- </div>
- <div class="column col-12">
- <ul class="step">
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip">Step 1</a>
- </li>
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip">Step 2</a>
- </li>
- <li class="step-item active">
- <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip">Step 3</a>
- </li>
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip">Step 4</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p>
- </div>
-
-<!-- steps -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;step&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
- &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;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 1&quot;</span>&gt;Step 1&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item active&quot;</span>&gt;
- &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;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 2&quot;</span>&gt;Step 2&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
- &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;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 3&quot;</span>&gt;Step 3&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
- &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;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 4&quot;</span>&gt;Step 4&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="tabs" class="container">
- <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3>
- <div class="docs-note">
- <p>Tabs enable quick switch between different views.</p>
- </div>
- <div class="columns">
- <div class="column col-6 col-sm-12">
- <ul class="tab">
- <li class="tab-item active">
- <a href="#tabs">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Store
- </a>
- </li>
- </ul>
- </div>
- <div class="column col-6 col-sm-12">
- <ul class="tab tab-block">
- <li class="tab-item active">
- <a href="#tabs">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child &lt;a&gt; with the <code>active</code> class will be highlighted.</p>
- </div>
-
-<!-- tabs -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Music&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &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;active&quot;</span>&gt;Playlists&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Radio&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Connect&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- <div class="columns">
- <div class="column col-sm-12">
- <ul class="tab">
- <li class="tab-item active">
- <a href="#tabs" class="badge" data-badge="999">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- </ul>
- </div>
- <div class="column col-sm-12">
- <ul class="tab tab-block">
- <li class="tab-item active">
- <a href="#tabs" class="badge" data-badge="9">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs" class="badge" data-badge="99">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
- </div>
-
-<!-- tabs with badges -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
- &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;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;9&quot;</span>&gt;
- Music
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
+ <p>Add a container element with the <code>toast</code> class.
+ You can add any text within the container, and even icons.
+ You may also add a close button with the <code>btn-clear</code> class if you need.
+ </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">"toast"</span>&gt;</span>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- <div class="columns">
- <div class="column col-12">
- <ul class="tab">
- <li class="tab-item active">
- <a href="#tabs">
- Music
- <span class="btn btn-clear"></span>
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Store
- </a>
- </li>
- <li class="tab-item tab-action">
- <div class="input-group input-inline">
- <input class="form-input input-sm" type="text" placeholder="search">
- <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+ <div class="columns">
+ <div class="column col-sm-12">
+ <div class="toast toast-success">
+ <button class="btn btn-clear float-right"></button>Toast success
</div>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p>
- </div>
-
-<!-- tabs with badges -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- Music
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item tab-action&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group input-inline&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input input-sm&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;search&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm input-group-btn&quot;</span>&gt;Search&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="tiles" class="container">
- <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3>
- <div class="docs-note">
- <p>Tiles are repeatable or embeddable information blocks.</p>
- </div>
- <div class="columns">
- <div class="column col-9 col-sm-12">
- <div class="tile">
- <div class="tile-icon">
- <figure class="avatar avatar-lg">
- <img src="img/avatar-3.png" alt="Avatar">
- </figure>
</div>
- <div class="tile-content">
- <p class="tile-title">The Avengers</p>
- <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ <div class="column col-sm-12">
+ <div class="toast toast-warning">
+ <button class="btn btn-clear float-right"></button>Toast warning
+ </div>
</div>
- <div class="tile-action">
- <button class="btn btn-primary">Join</button>
- <button class="btn">Contact</button>
+ <div class="column col-sm-12">
+ <div class="toast toast-error">
+ <button class="btn btn-clear float-right"></button>Toast error
+ </div>
</div>
</div>
+ <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</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">"toast toast-primary"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-9 col-sm-12">
- <div class="tile">
- <div class="tile-icon">
- <figure class="avatar avatar-lg">
- <img src="img/avatar-2.png" alt="Avatar">
- </figure>
+ <div class="container" id="tooltips">
+ <h3 class="s-title"><a class="anchor" href="#tooltips" aria-hidden="true">#</a>Tooltips</h3>
+ <p>Tooltips provide context information labels that appear on hover and focus.</p>
+ <div class="columns text-center">
+ <div class="column col-xs-12">
+ <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button>
</div>
- <div class="tile-content">
- <p class="tile-title">The S.H.I.E.L.D.</p>
- <p class="tile-subtitle text-gray">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
- <p>
- <button class="btn btn-primary btn-sm">Join</button>
- <button class="btn btn-sm">Contact</button>
- </p>
+ <div class="column col-xs-12">
+ <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button>
</div>
- </div>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container with the <code>tile</code> class. And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p>
- <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p>
- </div>
-
-<!-- tiles -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile&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">div</span> <span class="atn">class</span>=<span class="atv">&quot;example-tile-icon&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-file centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/div</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;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;tile-title&quot;</span>&gt;The Avengers&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;tile-subtitle text-gray&quot;</span>&gt;Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...&lt;<span class="tag">/p</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-action&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Join&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4>
- <div class="docs-note">
- <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
- <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p>
- </div>
- <div class="columns">
- <div class="column col-6 col-md-9 col-xs-12">
- <div class="tile tile-centered">
- <div class="tile-icon">
- <div class="example-tile-icon">
- <i class="icon icon-mail centered"></i>
- </div>
+ <div class="column col-xs-12">
+ <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button>
</div>
- <div class="tile-content">
- <div class="tile-title">spectre-docs.pdf</div>
- <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
- </div>
- <div class="tile-action">
- <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button>
+ <div class="column col-xs-12">
+ <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button>
</div>
</div>
+ <p>Tooltips component is built entirely in CSS.</p>
+ <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements.</p>
+ <p>And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip.
+ By default, the tooltip appears above the element.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>&gt;</span>top tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip tooltip-right"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>&gt;</span>right tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> </code></pre>
</div>
</div>
-
-<!-- tiles -->
-<pre class="code" data-lang="HTML"><code>&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">div</span> <span class="atn">class</span>=<span class="atv">&quot;example-tile-icon&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-file centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/div</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;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-title&quot;</span>&gt;spectre-docs.pdf&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-subtitle text-gray&quot;</span>&gt;14MB · Public · 1 Jan, 2017&lt;<span class="tag">/div</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-action&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-more-vert&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
</div>
-
- <div id="toasts" class="container">
- <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3>
- <div class="docs-note">
- <p>Toasts are used to show alert or information to users.</p>
- </div>
- <div class="columns">
- <div class="column col-9 col-sm-12">
- <div class="toast">
- <button class="btn btn-clear float-right"></button>
- <h6>Toast Title</h6>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- </div>
- <div class="column col-9 col-sm-12">
- <div class="toast toast-primary">
- <button class="btn btn-clear float-right"></button>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p>
- </div>
- <div class="columns">
- <div class="column col-sm-12">
- <div class="toast toast-success">
- <button class="btn btn-clear float-right"></button>
- Toast success
- </div>
- </div>
- <div class="column col-sm-12">
- <div class="toast toast-warning">
- <button class="btn btn-clear float-right"></button>
- Toast warning
- </div>
- </div>
- <div class="column col-sm-12">
- <div class="toast toast-error">
- <button class="btn btn-clear float-right"></button>
- Toast error
- </div>
- </div>
- </div>
- <div class="docs-note">
- <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p>
- </div>
-
-<!-- toasts -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast&quot;</span>&gt;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-&lt;<span class="tag">/div</span>&gt;
-
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast toast-primary&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="tooltips" class="container">
- <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3>
- <div class="docs-note">
- <p>Tooltips provide context information labels that appear on hover and focus.</p>
- </div>
- <div class="columns text-center">
- <div class="column col-xs-12">
- <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button>
- </div>
- </div>
- <div class="docs-note">
- <p>Tooltips component is built entirely in CSS.</p>
- <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements. And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. By default, the tooltip appears above the element.</p>
- </div>
-
-<!-- tooltips -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;top tooltip&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip tooltip-right&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;right tooltip&lt;<span class="tag">/button</span>&gt;
-</code></pre>
-
- </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
diff --git a/docs/elements.html b/docs/elements.html
index b20594a..7038e74 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -75,9 +75,9 @@
<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#menu">Menu</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#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>
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
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 2665d0c..216684e 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -75,9 +75,9 @@
<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#menu">Menu</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#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>
diff --git a/docs/layout.html b/docs/layout.html
index 95f95f2..65d8008 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -75,9 +75,9 @@
<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#menu">Menu</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#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>
diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug
index ae2da02..864e458 100644
--- a/docs/src/_docs-layout.pug
+++ b/docs/src/_docs-layout.pug
@@ -53,9 +53,9 @@ block content
{url: '#cards', name: 'Cards'},
{url: '#chips', name: 'Chips'},
{url: '#empty', name: 'Empty states'},
- {url: '#menus', name: 'Menus'},
+ {url: '#menu', name: 'Menu'},
{url: '#modals', name: 'Modals'},
- {url: '#navs', name: 'Navs'},
+ {url: '#nav', name: 'Nav'},
{url: '#pagination', name: 'Pagination'},
{url: '#panels', name: 'Panels'},
{url: '#popovers', name: 'Popovers'},
diff --git a/docs/src/components.pug b/docs/src/components.pug
new file mode 100644
index 0000000..87e39ca
--- /dev/null
+++ b/docs/src/components.pug
@@ -0,0 +1,83 @@
+extends _docs-layout.pug
+
+block variables
+ - var title = 'Components - Spectre.css CSS Framework'
+ - var description = ''
+ - var current = 'components'
+
+block docs-content
+ //- Accordions
+ +docs-heading('accordions', 'Accordions')
+ include contents/accordions.pug
+
+ //- Avatars
+ +docs-heading('avatars', 'Avatars')
+ include contents/avatars.pug
+
+ //- Badges
+ +docs-heading('badges', 'Badges')
+ include contents/badges.pug
+
+ //- Bars
+ +docs-heading('bars', 'Bars')
+ include contents/bars.pug
+
+ //- Breadcrumbs
+ +docs-heading('breadcrumbs', 'Breadcrumbs')
+ include contents/breadcrumbs.pug
+
+ //- Cards
+ +docs-heading('cards', 'Cards')
+ include contents/cards.pug
+
+ //- Chips
+ +docs-heading('chips', 'Chips')
+ include contents/chips.pug
+
+ //- Empty states
+ +docs-heading('empty', 'Empty states')
+ include contents/empty.pug
+
+ //- Menu
+ +docs-heading('menu', 'Menu')
+ include contents/menu.pug
+
+ //- Modals
+ +docs-heading('modals', 'Modals')
+ include contents/modals.pug
+
+ //- Nav
+ +docs-heading('nav', 'Nav')
+ include contents/nav.pug
+
+ //- Pagination
+ +docs-heading('pagination', 'Pagination')
+ include contents/pagination.pug
+
+ //- Panels
+ +docs-heading('panels', 'Panels')
+ include contents/panels.pug
+
+ //- Popovers
+ +docs-heading('popovers', 'Popovers')
+ include contents/popovers.pug
+
+ //- Steps
+ +docs-heading('steps', 'Steps')
+ include contents/steps.pug
+
+ //- Tabs
+ +docs-heading('tabs', 'Tabs')
+ include contents/tabs.pug
+
+ //- Tiles
+ +docs-heading('tiles', 'Tiles')
+ include contents/tiles.pug
+
+ //- Toasts
+ +docs-heading('toasts', 'Toasts')
+ include contents/toasts.pug
+
+ //- Tooltips
+ +docs-heading('tooltips', 'Tooltips')
+ include contents/tooltips.pug \ No newline at end of file
diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug
new file mode 100644
index 0000000..8914516
--- /dev/null
+++ b/docs/src/contents/accordions.pug
@@ -0,0 +1,113 @@
+p Accordions are used to toggle sections of content.
+
+.columns
+ .column.col-6.col-md-12
+ .accordion
+ input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="")
+ label.accordion-header.c-hand(for="accordion-1")
+ i.icon.icon-arrow-right.mr-1
+ | Elements
+ .accordion-body
+ ul.menu.menu-nav
+ li.menu-item
+ a(href="#accordions") Element 1
+ li.menu-item
+ a(href="#accordions") Element 2
+ .accordion
+ input#accordion-2(type="radio" name="accordion-radio" hidden="")
+ label.accordion-header.c-hand(for="accordion-2")
+ i.icon.icon-arrow-right.mr-1
+ | Layout
+ .accordion-body
+ ul.menu.menu-nav
+ li.menu-item
+ a(href="#accordions") Layout 1
+ li.menu-item
+ a(href="#accordions") Layout 2
+ .accordion
+ input#accordion-3(type="radio" name="accordion-radio" hidden="")
+ label.accordion-header.c-hand(for="accordion-3")
+ i.icon.icon-arrow-right.mr-1
+ | Components
+ .accordion-body
+ ul.menu.menu-nav
+ li.menu-item
+ a(href="#accordions") Component 1
+ li.menu-item
+ a(href="#accordions") Component 2
+ .column.col-6.col-md-12
+ .accordion
+ input#accordion-4(type="checkbox" name="accordion-checkbox" hidden="" checked="")
+ label.accordion-header.c-hand(for="accordion-4")
+ | Elements
+ .accordion-body
+ ul.menu.menu-nav
+ li.menu-item
+ a(href="#accordions") Element 1
+ li.menu-item
+ a(href="#accordions") Element 2
+ .accordion
+ input#accordion-5(type="checkbox" name="accordion-checkbox" hidden="")
+ label.accordion-header.c-hand(for="accordion-5")
+ | Layout
+ .accordion-body
+ ul.menu.menu-nav
+ li.menu-item
+ a(href="#accordions") Layout 1
+ li.menu-item
+ a(href="#accordions") Layout 2
+ .accordion
+ input#accordion-6(type="checkbox" name="accordion-checkbox" hidden="")
+ label.accordion-header.c-hand(for="accordion-6")
+ | Components
+ .accordion-body
+ ul.menu.menu-nav
+ li.menu-item
+ a(href="#accordions") Component 1
+ li.menu-item
+ a(href="#accordions") Component 2
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- standard Accordions example -->
+ <div class="accordion">
+ <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
+ <label class="accordion-header">
+ <i class="icon icon-arrow-right mr-1"></i>
+ Title
+ </label>
+ <div class="accordion-body">
+ <!-- Accordions content -->
+ </div>
+ </div>
+
+ <!-- mutually exclusive Accordions example (with same input names) -->
+ <div class="accordion">
+ <input type="radio" id="accordion-1" name="accordion-radio" hidden>
+ <label class="accordion-header">
+ Title
+ </label>
+ <div class="accordion-body">
+ <!-- Accordions content -->
+ </div>
+ </div>
+
+p
+ | Alternatively, you can use #[code details] and #[code summary] instead of #[code input] radio or checkbox trick.
+ | Add the #[code open] attribute to #[code details] to expand it.
+ | Microsoft Edge support is #[a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank") under consideration].
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- details and summary Accordions example -->
+ <details class="accordion" open>
+ <summary class="accordion-header">
+ <i class="icon icon-arrow-right mr-1"></i>
+ Title
+ </summary>
+ <div class="accordion-body">
+ <!-- Accordions content -->
+ </div>
+ </details> \ No newline at end of file
diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug
new file mode 100644
index 0000000..ca93c8a
--- /dev/null
+++ b/docs/src/contents/autocomplete.pug
@@ -0,0 +1,119 @@
+p
+ | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
+
+.columns
+ .column.col-9.col-xs-12
+ .form-group
+ .form-autocomplete
+ .form-autocomplete-input.form-input
+ span.chip
+ | Bruce Banner
+ .chip
+ img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar")
+ | Thor Odinson
+ .chip
+ img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar")
+ | Steve Rogers
+ .chip
+ figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+ | Tony Stark
+ span.chip.active
+ | Natasha Romanoff
+ input.form-input(type="text" placeholder="")
+ .column.col-9.col-xs-12
+ .form-group
+ .form-autocomplete
+ .form-autocomplete-input.form-input.is-focused
+ span.chip
+ | Bruce Banner
+ a.btn.btn-clear(href="#" aria-label="Close" role="button")
+ span.chip
+ img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson")
+ | Thor Odinson
+ a.btn.btn-clear(href="#" aria-label="Close" role="button")
+ .has-icon-left
+ input.form-input(type="text" placeholder="" value="S")
+ i.form-icon.loading
+ ul.menu
+ li.menu-item
+ a(href="#autocomplete")
+ .tile.tile-centered
+ .tile-icon
+ img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers")
+ .tile-content
+ mark S
+ | teve Roger
+ mark s
+ li.menu-item
+ a(href="#autocomplete")
+ .tile.tile-centered
+ .tile-icon
+ figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+ .tile-content
+ | Tony
+ mark S
+ | tark
+
+p
+ | Add a container element with the #[code form-autocomplete] class.
+ | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component.
+ | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state.
+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.
+
+.columns
+ .column.col-9.col-xs-12
+ .form-group
+ .form-autocomplete.autocomplete-oneline
+ .form-autocomplete-input.form-input
+ span.chip
+ | Bruce Banner
+ .chip
+ img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar")
+ | Thor Odinson
+ .chip
+ img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar")
+ | Steve Rogers
+ .chip
+ figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+ | Tony Stark
+ span.chip.active
+ | Natasha Romanoff
+ input.form-input(type="text" placeholder="")
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="form-autocomplete">
+ <!-- autocomplete input container -->
+ <div class="form-autocomplete-input form-input">
+
+ <!-- autocomplete chips -->
+ <div 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>
+ </div>
+
+ <!-- autocomplete real input box -->
+ <input class="form-input" type="text" placeholder="typing here">
+ </div>
+
+ <!-- autocomplete suggestion list -->
+ <ul class="menu">
+ <!-- menu list chips -->
+ <li class="menu-item">
+ <a href="#">
+ <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">
+ Steve Rogers
+ </div>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug
new file mode 100644
index 0000000..ff8f6c6
--- /dev/null
+++ b/docs/src/contents/avatars.pug
@@ -0,0 +1,93 @@
+p Avatars are user profile pictures.
+
+.columns
+ .column.col-6.col-xs-12
+ figure.avatar.avatar-xl
+ img(src="img/avatar-1.png" alt="Avatar XL")
+ figure.avatar.avatar-lg
+ img(src="img/avatar-2.png" alt="Avatar LG")
+ figure.avatar
+ img(src="img/avatar-3.png" alt="Avatar")
+ figure.avatar.avatar-sm
+ img(src="img/avatar-4.png" alt="Avatar SM")
+ figure.avatar.avatar-xs
+ img(src="img/avatar-5.png" alt="Avatar XS")
+ .column.col-6.col-xs-12
+ figure.avatar.avatar-xl(data-initial="YZ")
+ figure.avatar.avatar-lg(data-initial="YZ")
+ figure.avatar(data-initial="YZ")
+ figure.avatar.avatar-sm(data-initial="YZ")
+ figure.avatar.avatar-xs(data-initial="YZ")
+
+p
+ | Add the #[code avatar] class to #{'<img>'} element.
+ | There are 4 additional sizes available, including #[code avatar-xl](64px), #[code avatar-lg](48px), #[code avatar-sm](24px), and #[code avatar-xs](16px).
+ | By default, the avatar size is 32px.
+p
+ | For users who don't have profile pictures, you may use their initials for avatars.
+ | Add the #[code avatar] class and avatar size class to #{'<div>'} element.
+ | The #[code data-initial] attribute is the name appear inside the avatar.
+
+.columns
+ .column.col-6.col-xs-12
+ figure.avatar.avatar-xl
+ img(src="img/avatar-1.png" alt="Avatar")
+ img.avatar-icon(src="img/avatar-2.png" alt="Avatar")
+ figure.avatar.avatar-lg
+ img(src="img/avatar-2.png" alt="Avatar")
+ img.avatar-icon(src="img/avatar-3.png" alt="Avatar")
+ figure.avatar
+ img(src="img/avatar-3.png" alt="Avatar")
+ img.avatar-icon(src="img/avatar-4.png" alt="Avatar")
+ figure.avatar.avatar-sm
+ img(src="img/avatar-4.png" alt="Avatar")
+ img.avatar-icon(src="img/avatar-5.png" alt="Avatar")
+ figure.avatar.avatar-xs
+ img(src="img/avatar-5.png" alt="Avatar")
+ img.avatar-icon(src="img/avatar-1.png" alt="Avatar")
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- Basic avatar examples -->
+ <figure class="avatar avatar-xl">
+ <img src="img/avatar-1.png" alt="...">
+ </figure>
+
+ <figure class="avatar avatar-xl">
+ <img src="img/avatar-1.png" alt="...">
+ <img src="img/avatar-5.png" class="avatar-icon" alt="...">
+ </figure>
+
+ <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+ <!-- Show initals when avatar image is unavailable or not fully loaded -->
+ <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+ <img src="img/avatar-1.png" alt="...">
+ </figure>
+
+.columns
+ .column.col-6.col-xs-12
+ figure.avatar.avatar-xl(data-initial="YZ")
+ i.avatar-presence.online
+ figure.avatar.avatar-lg(data-initial="YZ")
+ i.avatar-presence.busy
+ figure.avatar(data-initial="YZ")
+ i.avatar-presence.away
+ figure.avatar.avatar-sm(data-initial="YZ")
+ i.avatar-presence.offline
+ figure.avatar.avatar-xs(data-initial="YZ")
+ i.avatar-presence.online
+
+p
+ | Avatars support presence indicators.
+ | You can add an #{'<i>'} element with the #[code avatar-presence] class, and add #[code online], #[code busy] or #[code away] class for different status colors.
+ | The default is gray which means offline.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <figure class="avatar avatar-xl">
+ <img src="img/avatar-1.png" alt="...">
+ <i class="avatar-presence online"></i>
+ </figure> \ No newline at end of file
diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug
new file mode 100644
index 0000000..250fb39
--- /dev/null
+++ b/docs/src/contents/badges.pug
@@ -0,0 +1,59 @@
+p Badges are often used as unread number indicators.
+
+.columns
+ .column.col-3.col-xs-6
+ span.badge(data-badge="")
+ | Notifications
+ .column.col-3.col-xs-6
+ span.badge(data-badge="8")
+ | Notifications
+ .column.col-3.col-xs-6
+ span.badge(data-badge="88")
+ | Notifications
+ .column.col-3.col-xs-6
+ span.badge(data-badge="888")
+ | Notifications
+
+p
+ | Add the #[code badge] class to non self closing elements.
+ | And add the #[code data-badge] attribute to define the content of a badge.
+ | The badge will appear in the top-right direction of the element.
+p
+ | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.
+
+.columns
+ .column.col-sm-12
+ button.btn.badge(data-badge="") Button
+ button.btn.badge(data-badge="8") Button
+ .column.col-sm-12
+ button.btn.btn-primary.badge(data-badge="") Button
+ button.btn.btn-primary.badge(data-badge="8") Button
+ .column.col-sm-12
+ figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ")
+ img(src="img/avatar-1.png" alt="YZ")
+ figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ")
+ img(src="img/avatar-2.png" alt="YZ")
+ figure.avatar.badge(data-badge="8" data-initial="YZ")
+ img(src="img/avatar-3.png" alt="YZ")
+
+p
+ | Badges support #[code button] and #[code avatars] elements as well.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <span class="badge">
+ Notifications
+ </span>
+
+ <span class="badge" data-badge="8">
+ Notifications
+ </span>
+
+ <button class="btn badge" data-badge="8">
+ Button
+ </button>
+
+ <figure class="avatar badge" data-badge="8" data-initial="YZ">
+ <img src="img/avatar-3.png" alt="YZ">
+ </figure> \ No newline at end of file
diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug
new file mode 100644
index 0000000..58d7f3c
--- /dev/null
+++ b/docs/src/contents/bars.pug
@@ -0,0 +1,84 @@
+p
+ | Bars represent the progress of a task or the value within the known range.
+ | Bars are custom components for displaying HTML5 #{'<progress>'}, #{'<meter>'} and input range elements.
+
+.columns
+ .column.col-8.col-xs-12
+ .bar.bar-sm
+ .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
+.columns
+ .column.col-8.col-xs-12
+ .bar
+ .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
+.columns
+ .column.col-8.col-xs-12
+ .bar
+ .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
+ .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15%
+ .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10%
+ .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15%
+
+p
+ | Add a container element with the #[code bar] class.
+ | And add child elements with the #[code bar-item] class.
+ | The width percentage value is needed for every #[code bar-item].
+
+p
+ | There is the #[code bar-sm] class for thinner Bars.
+ | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item].
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="bar bar-sm">
+ <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <!-- multi-bars -->
+ <div class="bar">
+ <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
+ <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
+ </div>
+
++docs-subheading('bars-slider', 'Slider bars')
+
+.columns
+ .column.col-8.col-xs-12
+ .bar.bar-slider
+ .bar-item(role="progressbar" style="width:50%;")
+ button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
+.columns
+ .column.col-8.col-xs-12
+ .bar.bar-slider
+ .bar-item(role="progressbar" style="width:15%;")
+ button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider")
+ .bar-item(role="progressbar" style="width:65%;")
+ button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider")
+
+p
+ | You can add the #[code bar-slider] class to the Bars container.
+ | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item.
+ | You need to set the #[code bar-item] width manually to have the slider point.
+
+p
+ | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- slider -->
+ <div class="bar bar-slider">
+ <div class="bar-item" role="progressbar" style="width:25%;">
+ <button class="bar-slider-btn btn" role="slider"></button>
+ </div>
+ </div>
+
+ <!-- range slider -->
+ <div class="bar bar-slider">
+ <div class="bar-item" role="progressbar" style="width:15%;">
+ <button class="bar-slider-btn btn" role="slider"></button>
+ </div>
+ <div class="bar-item" role="progressbar" style="width:65%;">
+ <button class="bar-slider-btn btn" role="slider"></button>
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug
new file mode 100644
index 0000000..b1b66c5
--- /dev/null
+++ b/docs/src/contents/breadcrumbs.pug
@@ -0,0 +1,45 @@
+p Breadcrumbs are used as navigational hierarchies to indicate current location.
+
+.columns
+ .column.col-12
+ ul.breadcrumb
+ li.breadcrumb-item
+ a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+ li.breadcrumb-item
+ a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+ .column.col-12
+ ul.breadcrumb
+ li.breadcrumb-item
+ a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+ li.breadcrumb-item
+ a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+ li.breadcrumb-item
+ a.tooltip(href="#breadcrumbs" data-tooltip="Change avatar") Change avatar
+ .column.col-12
+ ul.breadcrumb
+ li.breadcrumb-item
+ a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+ li.breadcrumb-item
+ a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+ li.breadcrumb-item
+ | Search result:
+ a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre
+
+p
+ | Add a container element with the #[code breadcrumb] class.
+ | And add child elements with the #[code breadcrumb-item] class.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="breadcrumb">
+ <li class="breadcrumb-item">
+ <a href="#">Home</a>
+ </li>
+ <li class="breadcrumb-item">
+ <a href="#">Settings</a>
+ </li>
+ <li class="breadcrumb-item">
+ <a href="#">Change avatar</a>
+ </li>
+ </ul> \ No newline at end of file
diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug
new file mode 100644
index 0000000..0806844
--- /dev/null
+++ b/docs/src/contents/calendars.pug
@@ -0,0 +1,195 @@
+p
+ | Calendars are designed for date or date range picker and events display. It is made with flex layout.
+
+.columns
+ .column.col-4.col-md-12
+ .calendar
+ .calendar-nav.navbar
+ button.btn.btn-action.btn-link.btn-lg
+ i.icon.icon-arrow-left
+ .navbar-primary March 2017
+ button.btn.btn-action.btn-link.btn-lg
+ i.icon.icon-arrow-right
+ .calendar-container
+ .calendar-header
+ .calendar-date Sun
+ .calendar-date Mon
+ .calendar-date Tue
+ .calendar-date Wed
+ .calendar-date Thu
+ .calendar-date Fri
+ .calendar-date Sat
+ .calendar-body
+ .calendar-date.prev-month.disabled
+ button.date-item 26
+ .calendar-date.prev-month.disabled
+ button.date-item 27
+ .calendar-date.prev-month.disabled
+ button.date-item 28
+ .calendar-date.current-month
+ button.date-item 1
+ .calendar-date.current-month
+ button.date-item 2
+ .calendar-date.current-month
+ button.date-item 3
+ .calendar-date.current-month.tooltip(data-tooltip="Today")
+ button.date-item.date-today 4
+ .calendar-date.current-month.tooltip(data-tooltip="Not available")
+ button.date-item(disabled="") 5
+ .calendar-date.current-month
+ button.date-item 6
+ .calendar-date.current-month
+ button.date-item 7
+ .calendar-date.current-month.tooltip(data-tooltip="You have appointments")
+ button.date-item.badge 8
+ .calendar-date.current-month
+ button.date-item 9
+ .calendar-date.current-month
+ button.date-item 10
+ .calendar-date.current-month
+ button.date-item 11
+ .calendar-date.current-month
+ button.date-item 12
+ .calendar-date.current-month
+ button.date-item 13
+ .calendar-date.current-month
+ button.date-item 14
+ .calendar-date.current-month
+ button.date-item 15
+ .calendar-date.current-month.calendar-range.range-start
+ button.date-item.active 16
+ .calendar-date.current-month.calendar-range
+ button.date-item 17
+ .calendar-date.current-month.calendar-range
+ button.date-item 18
+ .calendar-date.current-month.calendar-range
+ button.date-item 19
+ .calendar-date.current-month.calendar-range.range-end
+ button.date-item.active 20
+ .calendar-date.current-month
+ button.date-item 21
+ .calendar-date.current-month
+ button.date-item 22
+ .calendar-date.current-month
+ button.date-item 23
+ .calendar-date.current-month
+ button.date-item 24
+ .calendar-date.current-month
+ button.date-item 25
+ .calendar-date.current-month
+ button.date-item 26
+ .calendar-date.current-month
+ button.date-item 27
+ .calendar-date.current-month
+ button.date-item 28
+ .calendar-date.current-month
+ button.date-item 29
+ .calendar-date.current-month
+ button.date-item 30
+ .calendar-date.current-month
+ button.date-item 31
+ .calendar-date.next-month.disabled
+ button.date-item 1
+
++docs-subheading('calendars-sizes', 'Calendars sizes')
+
+.columns
+ .column.col-12
+ .calendar.calendar-lg
+ .calendar-nav.navbar
+ button.btn.btn-action.btn-link.btn-lg
+ i.icon.icon-arrow-left
+ .navbar-primary March 2017
+ button.btn.btn-action.btn-link.btn-lg
+ i.icon.icon-arrow-right
+ .calendar-container
+ .calendar-header
+ .calendar-date Sun
+ .calendar-date Mon
+ .calendar-date Tue
+ .calendar-date Wed
+ .calendar-date Thu
+ .calendar-date Fri
+ .calendar-date Sat
+ .calendar-body
+ .calendar-date.prev-month.disabled
+ button.date-item 26
+ .calendar-date.prev-month.disabled
+ button.date-item 27
+ .calendar-events
+ a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival
+ .calendar-date.prev-month.disabled
+ button.date-item 28
+ .calendar-date.current-month
+ button.date-item 1
+ .calendar-date.current-month
+ button.date-item 2
+ .calendar-date.current-month
+ button.date-item 3
+ .calendar-date.current-month.tooltip(data-tooltip="Today")
+ button.date-item.date-today 4
+ .calendar-date.current-month
+ button.date-item(disabled="") 5
+ .calendar-date.current-month
+ button.date-item 6
+ .calendar-date.current-month
+ button.date-item 7
+ .calendar-date.current-month.tooltip(data-tooltip="You have appointments")
+ button.date-item.badge 8
+ .calendar-events
+ a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event
+ a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day
+ .calendar-date.current-month
+ button.date-item 9
+ .calendar-date.current-month
+ button.date-item 10
+ .calendar-date.current-month
+ button.date-item 11
+ .calendar-date.current-month
+ button.date-item 12
+ .calendar-events
+ a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day
+ .calendar-date.current-month
+ button.date-item 13
+ .calendar-date.current-month
+ button.date-item 14
+ .calendar-date.current-month
+ button.date-item 15
+ .calendar-date.current-month.calendar-range.range-start
+ button.date-item.active 16
+ .calendar-date.current-month.calendar-range
+ button.date-item 17
+ .calendar-date.current-month.calendar-range
+ button.date-item 18
+ .calendar-date.current-month.calendar-range
+ button.date-item 19
+ .calendar-date.current-month.calendar-range.range-end
+ button.date-item.active 20
+ .calendar-events
+ a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox
+ .calendar-date.current-month
+ button.date-item 21
+ .calendar-date.current-month
+ button.date-item 22
+ .calendar-date.current-month
+ button.date-item 23
+ .calendar-date.current-month
+ button.date-item 24
+ .calendar-date.current-month
+ button.date-item 25
+ .calendar-date.current-month
+ button.date-item 26
+ .calendar-date.current-month
+ button.date-item 27
+ .calendar-date.current-month
+ button.date-item 28
+ .calendar-date.current-month
+ button.date-item 29
+ .calendar-date.current-month
+ button.date-item 30
+ .calendar-date.current-month
+ button.date-item 31
+ .calendar-date.next-month.disabled
+ button.date-item 1
+ .calendar-events
+ a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day \ No newline at end of file
diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug
new file mode 100644
index 0000000..4fb3671
--- /dev/null
+++ b/docs/src/contents/cards.pug
@@ -0,0 +1,94 @@
+p Cards are flexible content containers.
+
+.columns
+ .column.col-6.col-xs-12
+ .card
+ .card-image
+ img.img-responsive(src="img/osx-el-capitan.jpg" alt="OS X El Capitan")
+ .card-header
+ .card-title.h5 Microsoft
+ .card-subtitle.text-gray Software and hardware
+ .card-body
+ | Empower every person and every organization on the planet to achieve more.
+ .card-footer
+ a.btn.btn-primary(href="#cards") Do
+ .column.col-6.col-xs-12
+ .card
+ .card-header
+ .card-title.h5 Apple
+ .card-subtitle.text-gray Hardware and software
+ .card-image
+ img.img-responsive(src="img/osx-yosemite.jpg" alt="OS X Yosemite")
+ .card-body
+ | To make a contribution to the world by making tools for the mind that advance humankind.
+ .card-footer
+ .btn-group.btn-group-block
+ button.btn.btn-primary Buy
+ button.btn Buy
+ button.btn Buy
+ .column.col-6.col-xs-12
+ .card
+ .card-image
+ img.img-responsive(src="img/macos-sierra-2.jpg" alt="macOS Sierra")
+ .card-header
+ button.btn.btn-primary.float-right
+ i.icon.icon-plus
+ .card-title.h5 Google I/O
+ .card-subtitle.text-gray Software and hardware
+ .card-body
+ | An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+ .column.col-6.col-xs-12
+ .card
+ .card-image
+ img.img-responsive(src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan")
+ .card-footer
+ a.btn.btn-primary(href="#cards") Buy
+ a.btn.btn-link(href="#cards") Share
+ .card-body
+ strong Surface Studio
+ | . Turn your desk into a Studio. Surface Studio is designed for the creative process.
+ .column.col-6.col-xs-12
+ .card
+ .card-header
+ .card-title.h5 Apple
+ .card-subtitle.text-gray Hardware and software
+ .card-body
+ | To make a contribution to the world by making tools for the mind that advance humankind.
+ .card-image
+ img.img-responsive(src="img/macos-sierra.jpg" alt="macOS Sierra")
+ .column.col-6.col-xs-12
+ .card
+ .card-header
+ .card-title.h5 Google
+ .card-subtitle.text-gray Software and hardware
+ .card-body
+ | Organize the world’s information and make it universally accessible and useful.
+ .card-image
+ img.img-responsive(src="img/osx-yosemite-2.jpg" alt="OS X Yosemite")
+ .card-footer
+ a.btn.btn-primary(href="#cards") Search
+ a.btn.btn-link(href="#cards") Share
+
+p
+ | Add a container element with the #[code card] class.
+ | And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes.
+ | The #[code card-image] can be placed in any position.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="card">
+ <div class="card-image">
+ <img src="img/osx-el-capitan.jpg" class="img-responsive">
+ </div>
+ <div class="card-header">
+ <div class="card-title h5">Microsoft</div>
+ <div class="card-subtitle text-gray">Software and hardware</div>
+ </div>
+ <div class="card-body">
+ Empower every person and every organization on the planet to achieve more.
+ </div>
+ <div class="card-footer">
+ <button class="btn btn-primary">Do</button>
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug
new file mode 100644
index 0000000..5ce41fa
--- /dev/null
+++ b/docs/src/contents/carousels.pug
@@ -0,0 +1,39 @@
+p Carousels are slideshows for cycling images. It is built in pure CSS.
+
+.columns
+ .column.col-12
+ .carousel
+ input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="")
+ input#slide-2.carousel-locator(type="radio" name="carousel-radio" hidden="")
+ input#slide-3.carousel-locator(type="radio" name="carousel-radio" hidden="")
+ input#slide-4.carousel-locator(type="radio" name="carousel-radio" hidden="")
+ .carousel-container
+ figure.carousel-item
+ label.item-prev.btn.btn-action.btn-lg(for="slide-4")
+ i.icon.icon-arrow-left
+ label.item-next.btn.btn-action.btn-lg(for="slide-2")
+ i.icon.icon-arrow-right
+ img.img-responsive.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper")
+ figure.carousel-item
+ label.item-prev.btn.btn-action.btn-lg(for="slide-1")
+ i.icon.icon-arrow-left
+ label.item-next.btn.btn-action.btn-lg(for="slide-3")
+ i.icon.icon-arrow-right
+ img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+ figure.carousel-item
+ label.item-prev.btn.btn-action.btn-lg(for="slide-2")
+ i.icon.icon-arrow-left
+ label.item-next.btn.btn-action.btn-lg(for="slide-4")
+ i.icon.icon-arrow-right
+ img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper")
+ figure.carousel-item
+ label.item-prev.btn.btn-action.btn-lg(for="slide-3")
+ i.icon.icon-arrow-left
+ label.item-next.btn.btn-action.btn-lg(for="slide-1")
+ i.icon.icon-arrow-right
+ img.img-responsive.rounded(src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper")
+ .carousel-nav
+ label.nav-item.text-hide.c-hand(for="slide-1") 1
+ label.nav-item.text-hide.c-hand(for="slide-2") 2
+ label.nav-item.text-hide.c-hand(for="slide-3") 3
+ label.nav-item.text-hide.c-hand(for="slide-4") 4 \ No newline at end of file
diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug
new file mode 100644
index 0000000..ff02780
--- /dev/null
+++ b/docs/src/contents/chips.pug
@@ -0,0 +1,44 @@
+p Chips are complex entities in small blocks.
+
+.columns
+ .column.col-12
+ span.chip
+ | Crime
+ span.chip
+ | Drama
+ span.chip
+ | Biography
+ a.btn.btn-clear(href="#" aria-label="Close" role="button")
+ span.chip
+ | Mystery
+ a.btn.btn-clear(href="#" aria-label="Close" role="button")
+ .column.col-12
+ .chip
+ figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+ | Tony Stark
+ .chip
+ img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson")
+ | Thor Odinson
+ .chip
+ img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers")
+ | Steve Rogers
+
+p
+ | Add a container element with the #[code chip] class.
+ | And add child text element, buttons or avatars with the #[code avatar] class.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <span class="chip">Crime</span>
+
+ <span class="chip">
+ Biography
+ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+ </span>
+
+ <div class="chip">
+ <img src="img/avatar-1.png" class="avatar avatar-sm">
+ Yan Zhu
+ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug
new file mode 100644
index 0000000..84a86be
--- /dev/null
+++ b/docs/src/contents/colors.pug
@@ -0,0 +1,89 @@
+p Color utilities are used for changing colors for text, link and background.
+
++docs-subheading('colors-text', 'Text colors')
+
+.columns
+ .column.col-12
+ p
+ span.text-primary primary color
+ p
+ span.text-secondary secondary color
+ p
+ span.text-gray gray color
+ p
+ span.text-light.bg-dark.p-1.rounded light color
+ p
+ span.text-success success color
+ p
+ span.text-warning warning color
+ p
+ span.text-error error color
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <span class="text-primary">primary color</span>
+ <span class="text-secondary">secondary color</span>
+ <span class="text-gray">gray color</span>
+ <span class="text-light">light color</span>
+ <span class="text-success">success color</span>
+ <span class="text-warning">warning color</span>
+ <span class="text-error">error color</span>
+
+.columns
+ .column.col-12
+ p
+ a.text-primary.p-1(href="#colors") primary link
+ p
+ a.text-secondary.p-1(href="#colors") secondary link
+ p
+ a.text-gray.p-1(href="#colors") gray link
+ p
+ a.text-light.bg-dark.p-1.rounded(href="#colors") light link
+ p
+ a.text-success.p-1(href="#colors") success link
+ p
+ a.text-warning.p-1(href="#colors") warning link
+ p
+ a.text-error.p-1(href="#colors") error link
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <a class="text-primary" href="#">primary color</a>
+ <a class="text-secondary" href="#">secondary color</a>
+ <a class="text-gray" href="#">gray color</a>
+ <a class="text-light" href="#">light color</a>
+ <a class="text-success" href="#">success color</a>
+ <a class="text-warning" href="#">warning color</a>
+ <a class="text-error" href="#">error color</a>
+
++docs-subheading('colors-background', 'Background colors')
+
+.columns
+ .column.col-12
+ p
+ span.bg-primary.p-1.rounded primary bg
+ p
+ span.bg-secondary.text-primary.p-1.rounded secondary bg
+ p
+ span.bg-dark.p-1.rounded dark bg
+ p
+ span.bg-gray.p-1.rounded gray bg
+ p
+ span.bg-success.p-1.rounded success bg
+ p
+ span.bg-warning.p-1.rounded warning bg
+ p
+ span.bg-error.p-1.rounded error bg
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="bg-primary">primary bg</div>
+ <div class="bg-secondary">secondary bg</div>
+ <div class="bg-dark">dark bg</div>
+ <div class="bg-gray">gray bg</div>
+ <div class="bg-success">success bg</div>
+ <div class="bg-warning">warning bg</div>
+ <div class="bg-error">error bg</div> \ No newline at end of file
diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug
new file mode 100644
index 0000000..5f6ce38
--- /dev/null
+++ b/docs/src/contents/comparison.pug
@@ -0,0 +1,29 @@
+p
+ | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
+
+.columns
+ .column.col-12
+ .comparison-slider
+ figure.comparison-before
+ img.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+ .comparison-label Before
+ figure.comparison-after
+ img.filter-grayscale.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+ .comparison-label After
+ textarea.comparison-resizer(readonly="")
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="comparison-slider">
+ <figure class="comparison-before">
+ <!-- image (before) -->
+ <div class="comparison-label">Before</div>
+ </figure>
+
+ <figure class="comparison-after">
+ <!-- image (after) -->
+ <div class="comparison-label">After</div>
+ <textarea class="comparison-resizer" readonly></textarea>
+ </figure>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursor.pug
new file mode 100644
index 0000000..df92600
--- /dev/null
+++ b/docs/src/contents/cursor.pug
@@ -0,0 +1,31 @@
+p Cursor utilities specify which mouse cursor to display when mouseover.
+
+.columns
+ .column.col-4
+ .bg-gray.docs-block.c-hand c-hand
+ .column.col-4
+ .bg-gray.docs-block.c-move c-move
+ .column.col-4
+ .bg-gray.docs-block.c-zoom-in c-zoom-in
+ .column.col-4
+ .bg-gray.docs-block.c-zoom-out c-zoom-out
+ .column.col-4
+ .bg-gray.docs-block.c-not-allowed c-not-allowed
+ .column.col-4
+ .bg-gray.docs-block.c-auto c-auto
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- cursor: hand; -->
+ <div class="c-hand"></div>
+ <!-- cursor: move; -->
+ <div class="c-move"></div>
+ <!-- cursor: zoom-in; -->
+ <div class="c-zoom-in"></div>
+ <!-- cursor: zoom-out; -->
+ <div class="c-zoom-out"></div>
+ <!-- cursor: not-allowed; -->
+ <div class="c-not-allowed"></div>
+ <!-- cursor: auto; -->
+ <div class="c-auto"></div> \ No newline at end of file
diff --git a/docs/src/contents/display.pug b/docs/src/contents/display.pug
new file mode 100644
index 0000000..bb3a0a3
--- /dev/null
+++ b/docs/src/contents/display.pug
@@ -0,0 +1,26 @@
+p Display utilities are used for display and hidden things.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- display: block; -->
+ <div class="d-block"></div>
+ <!-- display: inline; -->
+ <div class="d-inline"></div>
+ <!-- display: inline-block; -->
+ <div class="d-inline-block"></div>
+ <!-- display: flex; -->
+ <div class="d-flex"></div>
+ <!-- display: inline-flex; -->
+ <div class="d-inline-flex"></div>
+ <!-- display: none; -->
+ <div class="d-none"></div>
+ <div class="d-hide"></div>
+ <!-- visibility: visible; -->
+ <div class="d-visible"></div>
+ <!-- visibility: hidden; -->
+ <div class="d-invisible"></div>
+ <!-- hide text contents -->
+ <div class="text-hide"></div>
+ <!-- assistive text for screen reader -->
+ <div class="text-assistive"></div> \ No newline at end of file
diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug
new file mode 100644
index 0000000..e84ff11
--- /dev/null
+++ b/docs/src/contents/divider.pug
@@ -0,0 +1,54 @@
+p A Divider is used for separating elements.
+
+.columns
+ .column
+ .divider
+.columns
+ .column
+ | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+ .divider.text-center(data-content="OR")
+ | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+.columns
+ .column
+ form
+ .form-group
+ label.form-label(for="input-example-1") Email
+ input#input-example-1.form-input(type="text" placeholder="Email")
+ .form-group
+ label.form-label(for="input-example-2") Password
+ input#input-example-2.form-input(type="password" placeholder="Password")
+ .form-group
+ label.form-checkbox
+ input(type="checkbox")
+ i.form-icon
+ | Remember me
+ .form-group
+ button.btn.btn-primary Sign in
+ .divider-vert(data-content="OR")
+ .column
+ form
+ .form-group
+ label.form-label(for="input-example-3") Email
+ input#input-example-3.form-input(type="text" placeholder="Email")
+ .form-group
+ button.btn.btn-primary.btn-block Sign up
+ button.btn.btn-link.btn-block Learn more
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- divider element -->
+ <div class="divider"></div>
+ <!-- divider element with text -->
+ <div class="divider text-center" data-content="OR"></div>
+
+ <!-- vertical divider element with text -->
+ <div class="columns">
+ <div class="column">
+ <!-- column content -->
+ </div>
+ <div class="divider-vert" data-content="OR"></div>
+ <div class="column">
+ <!-- column content -->
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug
new file mode 100644
index 0000000..0ac70dc
--- /dev/null
+++ b/docs/src/contents/empty.pug
@@ -0,0 +1,50 @@
+p
+ | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
+
+.columns
+ .column.col-12
+ .empty
+ .empty-icon
+ i.icon.icon-3x.icon-mail
+ p.empty-title.h5 You have no new messages
+ p.empty-subtitle Click the button to start a conversation
+ .empty-action
+ button.btn.btn-primary Send a message
+ .column.col-12
+ .empty
+ .empty-icon
+ i.icon.icon-3x.icon-mail
+ p.empty-title.h5 You've successfully signed up
+ p.empty-subtitle Click the button to invite your friends
+ .empty-action
+ button.btn.btn-primary Invite your friends
+ .empty-action
+ button.btn.btn-link Skip
+ .column.col-12
+ .empty
+ .empty-icon
+ i.icon.icon-3x.icon-people
+ p.empty-title.h5 You are not following anyone
+ p.empty-subtitle Start to meet new friends
+ .empty-action.input-group.input-inline
+ input.form-input(type="text" placeholder="")
+ button.btn.btn-primary.input-group-btn Search
+
+p
+ | An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+ | Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements.
+ | HTML structure is exampled below.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="empty">
+ <div class="empty-icon">
+ <i class="icon icon-people"></i>
+ </div>
+ <p class="empty-title h5">You have no new messages</p>
+ <p class="empty-subtitle">Click the button to start a conversation.</p>
+ <div class="empty-action">
+ <button class="btn btn-primary">Send a message</button>
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/experimentals.pug b/docs/src/contents/experimentals.pug
new file mode 100644
index 0000000..cec5b41
--- /dev/null
+++ b/docs/src/contents/experimentals.pug
@@ -0,0 +1,4 @@
+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] before browsers fully support them.
+ | Sometimes, there are some specific browsers targeted components. \ No newline at end of file
diff --git a/docs/src/contents/filters.pug b/docs/src/contents/filters.pug
new file mode 100644
index 0000000..0c61640
--- /dev/null
+++ b/docs/src/contents/filters.pug
@@ -0,0 +1,107 @@
+p Filters are CSS only content filters.
+
+.columns
+ .column.col-12
+ .filter
+ input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
+ input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="")
+ input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="")
+ input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="")
+ input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="")
+ .filter-nav
+ label.chip(for="tag-0") All
+ label.chip(for="tag-1") Action
+ label.chip(for="tag-2") Roleplaying
+ label.chip(for="tag-3") Shooter
+ label.chip(for="tag-4") Sports
+ .filter-body.columns
+ .column.col-4.filter-item(data-tag="tag-2")
+ .card
+ .card-header
+ .card-title Fallout 4
+ .card-subtitle Roleplaying
+ .column.col-4.filter-item(data-tag="tag-3")
+ .card
+ .card-header
+ .card-title Halo 5
+ .card-subtitle Shooter
+ .column.col-4.filter-item(data-tag="tag-1")
+ .card
+ .card-header
+ .card-title Quantum Break
+ .card-subtitle Action
+ .column.col-4.filter-item(data-tag="tag-4")
+ .card
+ .card-header
+ .card-title Forza Horizon 3
+ .card-subtitle Sports
+ .column.col-4.filter-item(data-tag="tag-2")
+ .card
+ .card-header
+ .card-title Final Fantasy XV
+ .card-subtitle Roleplaying
+ .column.col-4.filter-item(data-tag="tag-4")
+ .card
+ .card-header
+ .card-title NBA 2K17
+ .card-subtitle Sports
+ .column.col-4.filter-item(data-tag="tag-3")
+ .card
+ .card-header
+ .card-title Battlefield 1
+ .card-subtitle Shooter
+ .column.col-4.filter-item(data-tag="tag-1")
+ .card
+ .card-header
+ .card-title GTA V
+ .card-subtitle Action
+ .column.col-4.filter-item(data-tag="tag-4")
+ .card
+ .card-header
+ .card-title FIFA 17
+ .card-subtitle Sports
+ .column.col-4.filter-item(data-tag="tag-3")
+ .card
+ .card-header
+ .card-title Overwatch
+ .card-subtitle Shooter
+ .column.col-4.filter-item(data-tag="tag-3")
+ .card
+ .card-header
+ .card-title Titanfall 2
+ .card-subtitle Shooter
+ .column.col-4.filter-item(data-tag="tag-3")
+ .card
+ .card-header
+ .card-title Gears of Wars 4
+ .card-subtitle Shooter
+
+p
+ | Filters use #[code tag-1] to #[code tag-8] to flag different tags.
+ | #[code tag-0] is reserved for clearing filter (or showing all).
+ | You can overwrite #[code $filter-number] in #[code _filters.scss] to have more filters.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <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>
+
+ <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>
+ </div>
+
+ <div class="filter-body">
+ <div class="filter-item card" data-tag="tag-1">
+ <!-- Filter item content -->
+ </div>
+ <div class="filter-item card" data-tag="tag-2">
+ <!-- Filter item content -->
+ </div>
+ <!-- Filter items -->
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/loading.pug b/docs/src/contents/loading.pug
new file mode 100644
index 0000000..c7643b2
--- /dev/null
+++ b/docs/src/contents/loading.pug
@@ -0,0 +1,21 @@
+p
+ | Loading indicator is used for loading or updating.
+ | You can add the #[code loading] class to a container for loading status.
+
+.columns
+ .column.col-12.text-center
+ .loading
+
+p
+ | Add the #[code loading-lg] class for large size.
+
+.columns
+ .column.col-12.text-center
+ .loading.loading-lg
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- loading element -->
+ <div class="loading"></div>
+ <div class="loading loading-lg"></div> \ No newline at end of file
diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug
new file mode 100644
index 0000000..fe7825b
--- /dev/null
+++ b/docs/src/contents/menu.pug
@@ -0,0 +1,184 @@
+p Menus are vertical list of links or buttons for actions and navigation.
+
+.columns
+ .column.col-4.col-xs-12
+ ul.menu
+ li.menu-item
+ .tile.tile-centered
+ .tile-icon
+ img.avatar(src="img/avatar-4.png" alt="Avatar")
+ .tile-content
+ | Steve Rogers
+ li.divider
+ li.menu-item
+ .menu-badge
+ label.label.label-primary 2
+ a.active(href="#menus")
+ | My profile
+ li.menu-item
+ a(href="#menus")
+ | Settings
+ li.menu-item
+ a(href="#menus")
+ | Logout
+ .column.col-4.col-xs-12
+ ul.menu
+ li.divider(data-content="LINKS")
+ li.menu-item
+ a(href="#menus") Slack
+ li.menu-item
+ a(href="#menus") Hipchat
+ li.menu-item
+ a(href="#menus") Skype
+ .column.col-4.col-xs-12
+ ul.menu
+ li.menu-item
+ label.form-checkbox
+ input(type="checkbox" checked="")
+ i.form-icon
+ | form-checkbox
+ li.menu-item
+ label.form-radio
+ input(type="radio" checked="")
+ i.form-icon
+ | form-radio
+ li.menu-item
+ label.form-switch
+ input(type="checkbox" checked="")
+ i.form-icon
+ | form-switch
+
+p
+ | Add a container element with the #[code menu] class.
+ | And add child elements with the #[code menu-item] class.
+ | You can separate menu items with a #[code divider].
+ | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
+p
+ | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="menu">
+ <!-- menu header text -->
+ <li class="divider" data-content="LINKS">
+ </li>
+ <!-- menu item standard -->
+ <li class="menu-item">
+ <a href="#">
+ <i class="icon icon-link"></i> Slack
+ </a>
+ </li>
+ <!-- menu item with form control -->
+ <li class="menu-item">
+ <label class="form-checkbox">
+ <input type="checkbox">
+ <i class="form-icon"></i> form-checkbox
+ </label>
+ </li>
+ <!-- menu divider -->
+ <li class="divider"></li>
+ <!-- menu item with badge -->
+ <li class="menu-item">
+ <div class="menu-badge">
+ <label class="label label-primary">2</label>
+ </div>
+ <a href="#">
+ <i class="icon icon-link"></i> Settings
+ </a>
+ </li>
+ </ul>
+
++docs-subheading('menu-dropdown', 'Dropdown menu')
+
+p The dropdown is a combination of buttons and menus.
+
+.columns
+ .column.col-xs-12
+ .dropdown
+ .btn-group
+ a.btn.btn-primary dropdown button
+ a.btn.btn-primary.dropdown-toggle(tabindex="0")
+ i.icon.icon-caret
+ ul.menu
+ li.menu-item
+ a(href="#dropdowns")
+ | Slack
+ li.menu-item
+ a(href="#dropdowns")
+ | Hipchat
+ li.menu-item
+ a(href="#dropdowns")
+ | Skype
+ .column.col-xs-12
+ .dropdown
+ a.btn.btn-link.dropdown-toggle(tabindex="0")
+ | dropdown button
+ i.icon.icon-caret
+ ul.menu
+ li.menu-item
+ a(href="#dropdowns")
+ | Slack
+ li.menu-item
+ a(href="#dropdowns")
+ | Hipchat
+ li.menu-item
+ a(href="#dropdowns")
+ | Skype
+
+p
+ | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event.
+p
+ | Add a container element with the #[code dropdown] class.
+ | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it.
+ | You also need to add #[code tabindex] to make the buttons focusable.
+p
+ | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen.
+
+.columns
+ .column.col-xs-12.text-right
+ .dropdown.dropdown-right
+ a.btn.btn-primary.dropdown-toggle(tabindex="0")
+ | dropdown button
+ i.icon.icon-caret
+ ul.menu.text-left
+ li.menu-item
+ a(href="#dropdowns") Slack
+ li.menu-item
+ a(href="#dropdowns") Hipchat
+ li.menu-item
+ a(href="#dropdowns") Skype
+
+p
+ | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- basic dropdown button -->
+ <div class="dropdown">
+ <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+ dropdown menu <i class="icon icon-caret"></i>
+ </a>
+ <!-- menu component -->
+ <ul class="menu">
+ ...
+ </ul>
+ </div>
+
+ <!-- dropdown button group -->
+ <div class="dropdown">
+ <div class="btn-group">
+ <a href="#" class="btn">
+ dropdown button
+ </a>
+ <a href="#" class="btn dropdown-toggle" tabindex="0">
+ <i class="icon icon-caret"></i>
+ </a>
+
+ <!-- menu component -->
+ <ul class="menu">
+ ...
+ </ul>
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/meters.pug b/docs/src/contents/meters.pug
new file mode 100644
index 0000000..dd6899c
--- /dev/null
+++ b/docs/src/contents/meters.pug
@@ -0,0 +1,22 @@
+p Meters represent the value within the known range.
+
+.columns
+ .column.col-3.col-xs-12
+ meter.meter(value="20" min="0" max="100")
+ .column.col-3.col-xs-12
+ meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100")
+ .column.col-3.col-xs-12
+ meter.meter(value="85" min="0" low="30" high="80" max="100")
+ .column.col-3.col-xs-12
+ meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100")
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- Meter is green when low < value < high -->
+ <meter class="meter" value="20" min="0" max="100"></meter>
+ <meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
+ <!-- Meter is yellow when value < low or high < value -->
+ <meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
+ <!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
+ <meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter> \ No newline at end of file
diff --git a/docs/src/contents/modals.pug b/docs/src/contents/modals.pug
new file mode 100644
index 0000000..29580c9
--- /dev/null
+++ b/docs/src/contents/modals.pug
@@ -0,0 +1,141 @@
+p Modals are flexible dialog prompts.
+
+.columns
+ .column
+ a.btn.btn-primary(href="#example-modal-1") Open Modal
+ #example-modal-1.modal
+ a.modal-overlay(href="#modals" aria-label="Close")
+ .modal-container(role="document")
+ .modal-header
+ a.btn.btn-clear.float-right(href="#modals" aria-label="Close")
+ .modal-title.h5 Modal title
+ .modal-body
+ .content
+ p This is the content inside the modal.
+ h4 Lorem ipsum
+ 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
+ | 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.
+ h4 Cupcake ipsum
+ p
+ | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+ p
+ | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+ h4 Candy ipsum
+ p
+ | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+ p
+ | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+ .modal-footer
+ button.btn.btn-primary Share
+ a.btn.btn-link(href="#modals") Close
+
+p
+ | Add a container element with the #[code modal] class.
+ | And add a real container #[code modal-container] and overlay #[code modal-overlay] inside it.
+ | You can add child elements with the #[code modal-header], #[code modal-body] and #[code modal-footer] - any or all of them.
+p
+ | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
+ | To make a modal appear, add the #[code active] class to the #[code modal] container.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="modal active" id="modal-id">
+ <a href="#close" class="modal-overlay" aria-label="Close"></a>
+ <div class="modal-container">
+ <div class="modal-header">
+ <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
+ <div class="modal-title h5">Modal title</div>
+ </div>
+ <div class="modal-body">
+ <div class="content">
+ <!-- content here -->
+ </div>
+ </div>
+ <div class="modal-footer">
+ ...
+ </div>
+ </div>
+ </div>
+
++docs-subheading('modals-sizes', 'Modal sizes')
+
+.columns
+ .column.col-6.col-xs-12
+ a.btn.btn-primary(href="#example-modal-2") Open small size Modal
+ #example-modal-2.modal.modal-sm
+ a.modal-overlay(href="#modals-sizes" aria-label="Close")
+ .modal-container(role="document")
+ .modal-header
+ a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
+ .modal-title.h5 Modal title
+ .modal-body
+ .content
+ form
+ .form-group
+ label.form-label(for="input-example-7") Name
+ input#input-example-7.form-input(type="text" placeholder="Name")
+ .form-group
+ label.form-label Gender
+ label.form-radio
+ input(type="radio" name="gender")
+ i.form-icon
+ | Male
+ label.form-radio
+ input(type="radio" name="gender" checked="")
+ i.form-icon
+ | Female
+ .modal-footer
+ button.btn.btn-primary Submit
+ a.btn.btn-link(href="#modals-sizes" aria-label="Close") Close
+
+p
+ | Use the #[code modal-sm] class for a smaller modal dialog.
+ | The container max width is #[code 320px].
+
+.columns
+ .column
+ a.btn.btn-primary(href="#example-modal-3") Open large size Modal
+ #example-modal-3.modal.modal-lg
+ a.modal-overlay(href="#modals-sizes" aria-label="Close")
+ .modal-container(role="document")
+ .modal-header
+ a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
+ .modal-title.h5 Modal title
+ .modal-body
+ .content
+ p This is the content inside the modal.
+ h4 Lorem ipsum
+ 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
+ | 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.
+ h4 Cupcake ipsum
+ p
+ | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+ p
+ | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+ h4 Candy ipsum
+ p
+ | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+ p
+ | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+ .modal-footer
+ button.btn.btn-primary Share
+ a.btn.btn-link(href="#modals-sizes") Close
+
+p
+ | Use the #[code modal-lg] class for a full size modal.
+ | The container max width is #[code 960px].
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="modal modal-sm">
+ <a href="#close" class="modal-overlay" aria-label="Close"></a>
+ <div class="modal-container">
+ <!-- modal structure here -->
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/nav.pug b/docs/src/contents/nav.pug
new file mode 100644
index 0000000..537b6d2
--- /dev/null
+++ b/docs/src/contents/nav.pug
@@ -0,0 +1,57 @@
+.columns
+ .column.col-6.col-xs-12
+ ul.nav
+ li.nav-item
+ a(href="#nav") Elements
+ li.nav-item.active
+ a(href="#nav") Layout
+ ul.nav
+ li.nav-item
+ a(href="#nav") Flexbox grid
+ li.nav-item
+ a(href="#nav") Responsive
+ li.nav-item
+ a(href="#nav") Navbar
+ li.nav-item
+ a(href="#nav") Empty states
+ li.nav-item
+ a(href="#nav") Components
+ li.nav-item
+ a(href="#nav") Utilities
+
+p
+ | Add a container element with the #[code nav] class.
+ | And add child elements with the #[code nav-item] class.
+ | The #[code nav-item] with the #[code active] class will be highlighted.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="nav">
+ <li class="nav-item">
+ <a href="#">Elements</a>
+ </li>
+ <li class="nav-item active">
+ <a href="#">Layout</a>
+ <ul class="nav">
+ <li class="nav-item">
+ <a href="#">Flexbox grid</a>
+ </li>
+ <li class="nav-item">
+ <a href="#">Responsive</a>
+ </li>
+ <li class="nav-item">
+ <a href="#">Navbar</a>
+ </li>
+ <li class="nav-item">
+ <a href="#">Empty states</a>
+ </li>
+ </ul>
+ </li>
+ <li class="nav-item">
+ <a href="#">Components</a>
+ </li>
+ <li class="nav-item">
+ <a href="#">Utilities</a>
+ </li>
+ </ul> \ No newline at end of file
diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug
new file mode 100644
index 0000000..7e45132
--- /dev/null
+++ b/docs/src/contents/off-canvas.pug
@@ -0,0 +1,45 @@
+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
+ | By default, the off-canvas menu is collapsed whenever the window width is.
+ | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px].
+
+.columns
+ .column
+ .off-canvas.off-canvas-sidebar-show
+ a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo")
+ i.icon.icon-menu
+ #sidebar-demo.off-canvas-sidebar.flex-centered
+ span Sidebar
+ a.off-canvas-overlay(href="#close")
+ .off-canvas-content
+ .content
+ h4 Lorem ipsum
+ 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
+ | 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
+ | You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar].
+ | And remove the #[code active] to close it.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="off-canvas">
+ <!-- off-screen toggle button -->
+ <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
+ <i class="icon icon-menu"></i>
+ </a>
+
+ <div id="sidebar-id" class="off-canvas-sidebar">
+ <!-- off-screen sidebar -->
+ </div>
+
+ <a class="off-canvas-overlay" href="#close"></a>
+
+ <div class="off-canvas-content">
+ <!-- off-screen content -->
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/pagination.pug b/docs/src/contents/pagination.pug
new file mode 100644
index 0000000..83a3f92
--- /dev/null
+++ b/docs/src/contents/pagination.pug
@@ -0,0 +1,102 @@
+.columns
+ .column.col-xs-12
+ ul.pagination
+ li.page-item
+ a(href="#pagination") Prev
+ li.page-item
+ a(href="#pagination") 1
+ li.page-item
+ span ...
+ li.page-item
+ a(href="#pagination") 4
+ li.page-item.active
+ a(href="#pagination") 5
+ li.page-item
+ a(href="#pagination") 6
+ li.page-item
+ span ...
+ li.page-item
+ a(href="#pagination") 9
+ li.page-item
+ a(href="#pagination") Next
+ .column.col-xs-12
+ ul.pagination
+ li.page-item.disabled
+ a(href="#pagination" tabindex="-1") Prev
+ li.page-item.active
+ a(href="#pagination") 1
+ li.page-item
+ a(href="#pagination") 2
+ li.page-item
+ a(href="#pagination") 3
+ li.page-item
+ span ...
+ li.page-item
+ a(href="#pagination") 9
+ li.page-item
+ a(href="#pagination") Next
+
+p
+ | Add a container element with the #[code pagination] class.
+ | And add child elements with the #[code page-item] class.
+ | The #[code page-item] with the #[code active] class will be highlighted.
+ | You can add the #[code disabled] class to the #[code page-item] to have unclickable page links.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="pagination">
+ <li class="page-item disabled">
+ <a href="#" tabindex="-1">Previous</a>
+ </li>
+ <li class="page-item active">
+ <a href="#">1</a>
+ </li>
+ <li class="page-item">
+ <a href="#">2</a>
+ </li>
+ <li class="page-item">
+ <a href="#">3</a>
+ </li>
+ <li class="page-item">
+ <span>...</span>
+ </li>
+ <li class="page-item">
+ <a href="#">12</a>
+ </li>
+ <li class="page-item">
+ <a href="#">Next</a>
+ </li>
+ </ul>
+
+.columns
+ .column.col-12
+ ul.pagination
+ li.page-item.page-prev
+ a(href="#pagination")
+ .page-item-subtitle Previous
+ .page-item-title.h5 Getting started
+ li.page-item.page-next
+ a(href="#pagination")
+ .page-item-subtitle Next
+ .page-item-title.h5 Layout
+
+p You could use previous and next pagination to navigate.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="pagination">
+ <li class="page-item page-prev">
+ <a href="#">
+ <div class="page-item-subtitle">Previous</div>
+ <div class="page-item-title h5">Getting started</div>
+ </a>
+ </li>
+ <li class="page-item page-next">
+ <a href="#">
+ <div class="page-item-subtitle">Next</div>
+ <div class="page-item-title h5">Layout</div>
+ </a>
+ </li>
+ </ul> \ No newline at end of file
diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug
new file mode 100644
index 0000000..3651c81
--- /dev/null
+++ b/docs/src/contents/panels.pug
@@ -0,0 +1,114 @@
+p Panels are flexible view container with auto-expand content section.
+
+.columns
+ .column.col-6.col-xs-12
+ .panel
+ .panel-header.text-center
+ figure.avatar.avatar-lg
+ img(src="img/avatar-2.png" alt="Avatar")
+ .panel-title.h5.mt-10 Bruce Banner
+ .panel-subtitle THE HULK
+ nav.panel-nav
+ ul.tab.tab-block
+ li.tab-item.active
+ a(href="#panels")
+ | Profile
+ li.tab-item
+ a(href="#panels")
+ | Files
+ li.tab-item
+ a(href="#panels")
+ | Tasks
+ .panel-body
+ .tile.tile-centered
+ .tile-content
+ .tile-title E-mail
+ .tile-subtitle bruce.banner@hulk.com
+ .tile-action
+ button.btn.btn-link.btn-action.btn-lg
+ i.icon.icon-edit
+ .tile.tile-centered
+ .tile-content
+ .tile-title Skype
+ .tile-subtitle bruce.banner
+ .tile-action
+ button.btn.btn-link.btn-action.btn-lg
+ i.icon.icon-edit
+ .tile.tile-centered
+ .tile-content
+ .tile-title Location
+ .tile-subtitle Dayton, Ohio
+ .tile-action
+ button.btn.btn-link.btn-action.btn-lg
+ i.icon.icon-edit
+ .panel-footer
+ button.btn.btn-primary.btn-block Save
+ .column.col-6.col-xs-12
+ .panel
+ .panel-header
+ .panel-title.h6 Comments
+ .panel-body
+ .tile
+ .tile-icon
+ figure.avatar
+ img(src="img/avatar-1.png" alt="Avatar")
+ .tile-content
+ p.tile-title Thor Odinson
+ p.tile-subtitle
+ | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+ .tile
+ .tile-icon
+ figure.avatar
+ img(src="img/avatar-2.png" alt="Avatar")
+ .tile-content
+ p.tile-title Bruce Banner
+ p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+ .tile
+ .tile-icon
+ figure.avatar(data-initial="TS")
+ .tile-content
+ p.tile-title Tony Stark
+ p.tile-subtitle
+ | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+ .tile
+ .tile-icon
+ figure.avatar
+ img(src="img/avatar-4.png" alt="Avatar")
+ .tile-content
+ p.tile-title Steve Rogers
+ p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+ .tile
+ .tile-icon
+ figure.avatar
+ img(src="img/avatar-3.png" alt="Avatar")
+ .tile-content
+ p.tile-title Natasha Romanoff
+ p.tile-subtitle
+ | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+ .panel-footer
+ .input-group
+ input.form-input(type="text" placeholder="Hello")
+ button.btn.btn-primary.input-group-btn Send
+
+p
+ | Add a container element with the #[code panel] class.
+ | And add child elements with the #[code panel-header], #[code panel-nav], #[code panel-body] and/or #[code panel-footer] classes.
+ | The #[code panel-body] can be auto expanded and vertically scrollable.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="panel">
+ <div class="panel-header">
+ <div class="panel-title">Comments</div>
+ </div>
+ <div class="panel-nav">
+ <!-- navigation components: tabs, breadcrumbs or pagination -->
+ </div>
+ <div class="panel-body">
+ <!-- contents -->
+ </div>
+ <div class="panel-footer">
+ <!-- buttons or inputs -->
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/parallax.pug b/docs/src/contents/parallax.pug
new file mode 100644
index 0000000..88d2c17
--- /dev/null
+++ b/docs/src/contents/parallax.pug
@@ -0,0 +1,34 @@
+p
+ | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
+
+.columns
+ .column.col-sm-12.col-8.col-mx-auto
+ .parallax
+ .parallax-top-left(tabindex="1")
+ .parallax-top-right(tabindex="2")
+ .parallax-bottom-left(tabindex="3")
+ .parallax-bottom-right(tabindex="4")
+ .parallax-content
+ .parallax-front
+ h2 tvOS parallax demo
+ .parallax-back
+ img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <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-el-capitan.jpg" class="img-responsive rounded" ...>
+ </div>
+ </div>
+ </div>
+ \ No newline at end of file
diff --git a/docs/src/contents/popovers.pug b/docs/src/contents/popovers.pug
new file mode 100644
index 0000000..ca81e54
--- /dev/null
+++ b/docs/src/contents/popovers.pug
@@ -0,0 +1,82 @@
+p Popovers are small overlay content containers. Popovers component is built entirely in CSS.
+.columns
+ .column.col-3.col-sm-6
+ .popover
+ a.btn.btn-primary(href="#popovers")
+ | top popover
+ .popover-container
+ .card
+ .card-header
+ .card-title.h5 Apple
+ .card-subtitle.text-gray Software and hardware
+ .card-body
+ | To make a contribution to the world by making tools for the mind that advance humankind.
+ .card-footer
+ button.btn.btn-primary Buy
+ .column.col-3.col-sm-6
+ .popover.popover-right
+ a.btn.btn-primary(href="#popovers")
+ | right popover
+ .popover-container
+ .card
+ .card-header
+ .card-title.h5 Apple
+ .card-subtitle.text-gray Software and hardware
+ .card-body
+ | To make a contribution to the world by making tools for the mind that advance humankind.
+ .card-footer
+ button.btn.btn-primary Buy
+ .column.col-3.col-sm-6
+ .popover.popover-bottom
+ a.btn.btn-primary(href="#popovers")
+ | bottom popover
+ .popover-container
+ .card
+ .card-header
+ .card-title.h5 Apple
+ .card-subtitle.text-gray Software and hardware
+ .card-body
+ | To make a contribution to the world by making tools for the mind that advance humankind.
+ .card-footer
+ button.btn.btn-primary Buy
+ .column.col-3.col-sm-6
+ .popover.popover-left
+ a.btn.btn-primary(href="#popovers")
+ | left popover
+ .popover-container
+ .card
+ .card-header
+ .card-title.h5 Apple
+ .card-subtitle.text-gray Software and hardware
+ .card-body
+ | To make a contribution to the world by making tools for the mind that advance humankind.
+ .card-footer
+ button.btn.btn-primary Buy
+
+p
+ | Wrap an element by a container with the #[code popover] class.
+ | And add a container with the #[code popover-container] next to the element.
+ | You can use #[a(href="#cards") Cards] component inside the #[code popover-container].
+p
+ | Also, you can add the #[code popover-right], #[code popover-bottom] or #[code popover-left] class to define the position.
+ | By default, the popovers appear above the element.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="popover popover-right">
+ <button class="btn btn-primary">right popover</button>
+ <div class="popover-container">
+ <div class="card">
+ <div class="card-header">
+ ...
+ </div>
+ <div class="card-body">
+ ...
+ </div>
+ <div class="card-footer">
+ ...
+ </div>
+ </div>
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/position.pug b/docs/src/contents/position.pug
new file mode 100644
index 0000000..4e73fed
--- /dev/null
+++ b/docs/src/contents/position.pug
@@ -0,0 +1,40 @@
+p
+ | Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- clear float -->
+ <div class="clearfix"></div>
+ <!-- float: left and right -->
+ <div class="float-left"></div>
+ <div class="float-right"></div>
+ <!-- position: relative, absolute and fixed -->
+ <div class="relative"></div>
+ <div class="absolute"></div>
+ <div class="fixed"></div>
+ <!-- centered block -->
+ <div class="centered"></div>
+
+ <!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
+ <div class="m-1"></div>
+ <div class="m-2"></div>
+ <!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
+ <div class="mt-1"></div>
+ <div class="mt-2"></div>
+ <!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
+ <div class="mx-1"></div>
+ <div class="mx-2"></div>
+ <div class="my-1"></div>
+ <div class="my-2"></div>
+ <!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
+ <div class="p-1"></div>
+ <div class="p-2"></div>
+ <!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
+ <div class="pt-1"></div>
+ <div class="pt-2"></div>
+ <!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
+ <div class="px-1"></div>
+ <div class="px-2"></div>
+ <div class="py-1"></div>
+ <div class="py-2"></div> \ No newline at end of file
diff --git a/docs/src/contents/progress.pug b/docs/src/contents/progress.pug
new file mode 100644
index 0000000..22a09c1
--- /dev/null
+++ b/docs/src/contents/progress.pug
@@ -0,0 +1,17 @@
+p The Progress indicates the progress completion of a task.
+
+.columns
+ .column.col-3.col-xs-12
+ progress.progress(value="75" max="100")
+ .column.col-3.col-xs-12
+ progress.progress(value="50" max="100")
+ .column.col-3.col-xs-12
+ progress.progress(value="25" max="100")
+ .column.col-3.col-xs-12
+ progress.progress(max="100")
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <progress class="progress" value="25" max="100"></progress>
+ <progress class="progress" max="100"></progress> \ No newline at end of file
diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug
new file mode 100644
index 0000000..fc07d4d
--- /dev/null
+++ b/docs/src/contents/shapes.pug
@@ -0,0 +1,17 @@
+p Shape utilities are used for change element shapes.
+
+.columns
+ .column.col-6.text-center
+ .bg-primary.text-light.docs-shape.rounded.centered
+ | rounded
+ .column.col-6.text-center
+ .bg-primary.text-light.docs-shape.circle.centered
+ | circle
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- rounded element -->
+ <div class="rounded"></div>
+ <!-- circle element -->
+ <div class="circle"></div> \ No newline at end of file
diff --git a/docs/src/contents/sliders.pug b/docs/src/contents/sliders.pug
new file mode 100644
index 0000000..de3597b
--- /dev/null
+++ b/docs/src/contents/sliders.pug
@@ -0,0 +1,18 @@
+p Sliders are for selecting values from ranges.
+p
+ | You can add the class #[code tooltip] to have tooltip labels.
+ | If no #[code data-tooltip] is set, the #[code value] will be used instead.
+
+.columns
+ .column.col-6.col-xs-12
+ input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);")
+ .column.col-6.col-xs-12
+ input.slider(type="range" min="0" max="100" value="50" disabled="")
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- Sliders -->
+ <input class="slider" type="range" min="0" max="100" value="50">
+ <!-- Sliders with tooltips -->
+ <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);"> \ No newline at end of file
diff --git a/docs/src/contents/steps.pug b/docs/src/contents/steps.pug
new file mode 100644
index 0000000..5cf8b84
--- /dev/null
+++ b/docs/src/contents/steps.pug
@@ -0,0 +1,47 @@
+p Steps are progress indicators of a sequence of task steps.
+
+.columns
+ .column.col-12
+ ul.step
+ li.step-item
+ a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip")
+ li.step-item.active
+ a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip")
+ li.step-item
+ a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip")
+ li.step-item
+ a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip")
+ .column.col-12
+ ul.step
+ li.step-item
+ a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1
+ li.step-item
+ a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2
+ li.step-item.active
+ a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3
+ li.step-item
+ a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4
+
+p
+ | Add a container element with the #[code step] class.
+ | And add child elements with the #[code step-item] class.
+ | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="step">
+ <li class="step-item">
+ <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
+ </li>
+ <li class="step-item active">
+ <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
+ </li>
+ <li class="step-item">
+ <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
+ </li>
+ <li class="step-item">
+ <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
+ </li>
+ </ul>
+
diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug
new file mode 100644
index 0000000..f89005d
--- /dev/null
+++ b/docs/src/contents/tabs.pug
@@ -0,0 +1,132 @@
+p Tabs enable quick switch between different views.
+
+.columns
+ .column.col-6.col-sm-12
+ ul.tab
+ li.tab-item.active
+ a(href="#tabs")
+ | Music
+ li.tab-item
+ a(href="#tabs")
+ | Playlists
+ li.tab-item
+ a(href="#tabs")
+ | Radio
+ li.tab-item
+ a(href="#tabs")
+ | Store
+ .column.col-6.col-sm-12
+ ul.tab.tab-block
+ li.tab-item.active
+ a(href="#tabs")
+ | Music
+ li.tab-item
+ a(href="#tabs")
+ | Playlists
+ li.tab-item
+ a(href="#tabs")
+ | Radio
+
+p
+ | Add a container element with the #[code tab] class.
+ | And add child elements with the #[code tab-item] class.
+ | You can add the #[code tab-block] class for a full-width tab.
+ | The #[code tab-item] or its child #{'<a>'} with the #[code active] class will be highlighted.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="tab tab-block">
+ <li class="tab-item active">
+ <a href="#">Music</a>
+ </li>
+ <li class="tab-item">
+ <a href="#" class="active">Playlists</a>
+ </li>
+ <li class="tab-item">
+ <a href="#">Radio</a>
+ </li>
+ <li class="tab-item">
+ <a href="#">Connect</a>
+ </li>
+ </ul>
+
+.columns
+ .column.col-sm-12
+ ul.tab
+ li.tab-item.active
+ a.badge(href="#tabs" data-badge="999")
+ | Music
+ li.tab-item
+ a(href="#tabs")
+ | Playlists
+ li.tab-item
+ a(href="#tabs")
+ | Radio
+ .column.col-sm-12
+ ul.tab.tab-block
+ li.tab-item.active
+ a.badge(href="#tabs" data-badge="9")
+ | Music
+ li.tab-item
+ a.badge(href="#tabs" data-badge="99")
+ | Playlists
+ li.tab-item
+ a(href="#tabs")
+ | Radio
+
+p
+ | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item].
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="tab tab-block">
+ <li class="tab-item active">
+ <a href="#" class="badge" data-badge="9">
+ Music
+ </a>
+ </li>
+ </ul>
+
+.columns
+ .column.col-12
+ ul.tab
+ li.tab-item.active
+ a(href="#tabs")
+ | Music
+ span.btn.btn-clear
+ li.tab-item
+ a(href="#tabs")
+ | Playlists
+ li.tab-item
+ a(href="#tabs")
+ | Radio
+ li.tab-item
+ a(href="#tabs")
+ | Store
+ li.tab-item.tab-action
+ .input-group.input-inline
+ input.form-input.input-sm(type="text" placeholder="search")
+ button.btn.btn-primary.btn-sm.input-group-btn Search
+
+p
+ | You could add a search box or buttons inside a tab.
+ | Add the #[code tab-action] class to the #[code tab-item].
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <ul class="tab">
+ <li class="tab-item active">
+ <a href="#">
+ Music
+ </a>
+ </li>
+ <li class="tab-item tab-action">
+ <div class="input-group input-inline">
+ <input class="form-input input-sm" type="text" placeholder="search">
+ <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+ </div>
+ </li>
+ </ul> \ No newline at end of file
diff --git a/docs/src/contents/text.pug b/docs/src/contents/text.pug
new file mode 100644
index 0000000..a6a733b
--- /dev/null
+++ b/docs/src/contents/text.pug
@@ -0,0 +1,36 @@
+p Text utilities are used for text alignment, styles and overflow things.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <!-- left-aligned text -->
+ <div class="text-left"></div>
+ <!-- center-aligned text -->
+ <div class="text-center"></div>
+ <!-- right-aligned text -->
+ <div class="text-right"></div>
+ <!-- justified text -->
+ <div class="text-justify"></div>
+
+ <!-- Lowercased text -->
+ <div class="text-lowercase"></div>
+ <!-- Uppercased text -->
+ <div class="text-uppercase"></div>
+ <!-- Capitalized text -->
+ <div class="text-capitalize"></div>
+
+ <!-- Normal weight text -->
+ <div class="text-normal"></div>
+ <!-- Bold text -->
+ <div class="text-bold"></div>
+ <!-- Italicized text -->
+ <div class="text-italic"></div>
+ <!-- Larger text (120%) -->
+ <div class="text-large"></div>
+
+ <!-- Overflow behavior: display an ellipsis to represent clipped text -->
+ <div class="text-ellipsis"></div>
+ <!-- Overflow behavior: truncate the text -->
+ <div class="text-clip"></div>
+ <!-- Text may be broken at arbitrary points -->
+ <div class="text-break"></div> \ No newline at end of file
diff --git a/docs/src/contents/tiles.pug b/docs/src/contents/tiles.pug
new file mode 100644
index 0000000..e1e7379
--- /dev/null
+++ b/docs/src/contents/tiles.pug
@@ -0,0 +1,92 @@
+p Tiles are repeatable or embeddable information blocks.
+
+.columns
+ .column.col-9.col-sm-12
+ .tile
+ .tile-icon
+ figure.avatar.avatar-lg
+ img(src="img/avatar-3.png" alt="Avatar")
+ .tile-content
+ p.tile-title The Avengers
+ p.tile-subtitle.text-gray
+ | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+ .tile-action
+ button.btn.btn-primary Join
+ button.btn Contact
+ .column.col-9.col-sm-12
+ .tile
+ .tile-icon
+ figure.avatar.avatar-lg
+ img(src="img/avatar-2.png" alt="Avatar")
+ .tile-content
+ p.tile-title The S.H.I.E.L.D.
+ p.tile-subtitle.text-gray The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+ p
+ button.btn.btn-primary.btn-sm Join
+ button.btn.btn-sm Contact
+
+p
+ | Add a container with the #[code tile] class.
+ | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes.
+ | The #[code tile-icon] and #[code tile-action] are optional.
+p
+ | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="tile">
+ <div class="tile-icon">
+ <div class="example-tile-icon">
+ <i class="icon icon-file centered"></i>
+ </div>
+ </div>
+ <div class="tile-content">
+ <p class="tile-title">The Avengers</p>
+ <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+ </div>
+ <div class="tile-action">
+ <button class="btn btn-primary">Join</button>
+ </div>
+ </div>
+
++docs-subheading('tiles-compact', 'Compact tiles')
+
+p
+ | There is compact version of Tiles component, which is often used as contact and file info blocks.
+p
+ | Add the #[code tile-centered] class to the container #[code tile].
+ | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered.
+
+.columns
+ .column.col-6.col-md-9.col-xs-12
+ .tile.tile-centered
+ .tile-icon
+ .example-tile-icon
+ i.icon.icon-mail.centered
+ .tile-content
+ .tile-title spectre-docs.pdf
+ .tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017
+ .tile-action
+ button.btn.btn-link.btn-action
+ i.icon.icon-more-vert
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="tile tile-centered">
+ <div class="tile-icon">
+ <div class="example-tile-icon">
+ <i class="icon icon-file centered"></i>
+ </div>
+ </div>
+ <div class="tile-content">
+ <div class="tile-title">spectre-docs.pdf</div>
+ <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
+ </div>
+ <div class="tile-action">
+ <button class="btn btn-link">
+ <i class="icon icon-more-vert"></i>
+ </button>
+ </div>
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/timelines.pug b/docs/src/contents/timelines.pug
new file mode 100644
index 0000000..1badfdf
--- /dev/null
+++ b/docs/src/contents/timelines.pug
@@ -0,0 +1,81 @@
+p Timelines are ordered sequences of activities.
+
+.columns
+ .column.col-9.col-sm-12
+ .timeline
+ #timeline-example-1.timeline-item
+ .timeline-left
+ a.timeline-icon.tooltip(href="#timeline-example-1" data-tooltip="March 2016")
+ .timeline-content
+ .tile
+ .tile-content
+ p.tile-subtitle March 2016
+ p.tile-title Initial commit
+ #timeline-example-2.timeline-item
+ .timeline-left
+ a.timeline-icon.icon-lg.tooltip(href="#timeline-example-2" data-tooltip="February 2017")
+ i.icon.icon-check
+ .timeline-content
+ .tile
+ .tile-content
+ p.tile-subtitle February 2017
+ p.tile-title New Documents experience
+ p.tile-title
+ a(href="components.html#bars") Bars
+ | : represent the progress of a task
+ p.tile-title
+ a(href="components.html#steps") Steps
+ | : progress indicators of a sequence of task steps
+ p.tile-title
+ a(href="components.html#tiles") Tiles
+ | : repeatable or embeddable information blocks
+ .tile-action
+ button.btn View
+ #timeline-example-3.timeline-item
+ .timeline-left
+ a.timeline-icon.icon-lg.tooltip(href="#timeline-example-3" data-tooltip="March 2017")
+ i.icon.icon-check
+ .timeline-content
+ .tile
+ .tile-content
+ p.tile-subtitle March 2017
+ p.tile-title
+ a(href="elements.html#icons") Icons
+ | : single-element, responsive and pure CSS icons
+ p.tile-title
+ a(href="components.html#popovers") Popovers
+ | : small overlay content containers
+ p.tile-title
+ a(href="experimentals.html#calendars") Calendars
+ | : date or date range picker and events display
+ p.tile-title
+ a(href="experimentals.html#carousels") Carousels
+ | : slideshows for cycling images
+ .tile-action
+ button.btn View
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="timeline">
+ <div class="timeline-item" id="timeline-example-1">
+ <div class="timeline-left">
+ <a class="timeline-icon" href="#timeline-example-1"></a>
+ </div>
+ <div class="timeline-content">
+ <!-- tiles structure -->
+ </div>
+ </div>
+
+ <div class="timeline-item" id="timeline-example-2">
+ <div class="timeline-left">
+ <a class="timeline-icon icon-lg" href="#timeline-example-2">
+ <i class="icon icon-check"></i>
+ </a>
+ </div>
+ <div class="timeline-content">
+ <!-- tiles structure -->
+ </div>
+ </div>
+ ...
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/toasts.pug b/docs/src/contents/toasts.pug
new file mode 100644
index 0000000..cf4c31a
--- /dev/null
+++ b/docs/src/contents/toasts.pug
@@ -0,0 +1,49 @@
+p Toasts are used to show alert or information to users.
+
+.columns
+ .column.col-9.col-sm-12
+ .toast
+ button.btn.btn-clear.float-right
+ h6 Toast Title
+ | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ .column.col-9.col-sm-12
+ .toast.toast-primary
+ button.btn.btn-clear.float-right
+ | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+p
+ | Add a container element with the #[code toast] class.
+ | You can add any text within the container, and even icons.
+ | You may also add a close button with the #[code btn-clear] class if you need.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="toast">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ </div>
+
+.columns
+ .column.col-sm-12
+ .toast.toast-success
+ button.btn.btn-clear.float-right
+ | Toast success
+ .column.col-sm-12
+ .toast.toast-warning
+ button.btn.btn-clear.float-right
+ | Toast warning
+ .column.col-sm-12
+ .toast.toast-error
+ button.btn.btn-clear.float-right
+ | Toast error
+
+p
+ | And you can add the #[code toast-primary], #[code toast-success], #[code toast-warning] or #[code toast-error] class for additional toast colors.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <div class="toast toast-primary">
+ <button class="btn btn-clear float-right"></button>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ </div> \ No newline at end of file
diff --git a/docs/src/contents/tooltips.pug b/docs/src/contents/tooltips.pug
new file mode 100644
index 0000000..bda259a
--- /dev/null
+++ b/docs/src/contents/tooltips.pug
@@ -0,0 +1,24 @@
+p Tooltips provide context information labels that appear on hover and focus.
+
+.columns.text-center
+ .column.col-xs-12
+ button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip
+ .column.col-xs-12
+ button.btn.btn-primary.tooltip.tooltip-right(data-tooltip="Right Tooltip Text") right tooltip
+ .column.col-xs-12
+ button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip
+ .column.col-xs-12
+ button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text") left tooltip
+
+p Tooltips component is built entirely in CSS.
+p
+ | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements.
+p
+ | And add the #[code tooltip-right], #[code tooltip-bottom] or #[code tooltip-left] class to define the position of a tooltip.
+ | By default, the tooltip appears above the element.
+
+pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+ <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button> \ No newline at end of file
diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug
new file mode 100644
index 0000000..770f19b
--- /dev/null
+++ b/docs/src/experimentals.pug
@@ -0,0 +1,55 @@
+extends _docs-layout.pug
+
+block variables
+ - var title = 'Experimentals - Spectre.css CSS Framework'
+ - var description = ''
+ - var current = 'experimentals'
+
+block docs-content
+ //- Experimentals
+ +docs-heading('experimentals', 'Experimentals')
+ include contents/experimentals.pug
+
+ //- Autocomplete
+ +docs-heading('autocomplete', 'Autocomplete')
+ include contents/autocomplete.pug
+
+ //- Calendars
+ +docs-heading('calendars', 'Calendars')
+ include contents/calendars.pug
+
+ //- Carousels
+ +docs-heading('carousels', 'Carousels')
+ include contents/carousels.pug
+
+ //- Comparison sliders
+ +docs-heading('comparison', 'Comparison sliders')
+ include contents/comparison.pug
+
+ //- Filters
+ +docs-heading('filters', 'Filters')
+ include contents/filters.pug
+
+ //- Meters
+ +docs-heading('meters', 'Meters')
+ include contents/meters.pug
+
+ //- Off-canvas
+ +docs-heading('off-canvas', 'Off-canvas')
+ include contents/off-canvas.pug
+
+ //- Parallax
+ +docs-heading('parallax', 'Parallax')
+ include contents/parallax.pug
+
+ //- Progress
+ +docs-heading('progress', 'Progress')
+ include contents/progress.pug
+
+ //- Sliders
+ +docs-heading('sliders', 'Sliders')
+ include contents/sliders.pug
+
+ //- Timelines
+ +docs-heading('timelines', 'Timelines')
+ include contents/timelines.pug \ No newline at end of file
diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug
new file mode 100644
index 0000000..e516576
--- /dev/null
+++ b/docs/src/utilities.pug
@@ -0,0 +1,39 @@
+extends _docs-layout.pug
+
+block variables
+ - var title = 'Utilities - Spectre.css CSS Framework'
+ - var description = ''
+ - var current = 'utilities'
+
+block docs-content
+ //- Colors
+ +docs-heading('colors', 'Color utilities')
+ include contents/colors.pug
+
+ //- Cursor
+ +docs-heading('cursor', 'Cursor utilities')
+ include contents/cursor.pug
+
+ //- Display
+ +docs-heading('display', 'Display utilities')
+ include contents/display.pug
+
+ //- Divider
+ +docs-heading('divider', 'Divider')
+ include contents/divider.pug
+
+ //- Loading
+ +docs-heading('loading', 'Loading')
+ include contents/loading.pug
+
+ //- Position
+ +docs-heading('position', 'Position utilities')
+ include contents/position.pug
+
+ //- Shapes
+ +docs-heading('shapes', 'Shape utilities')
+ include contents/shapes.pug
+
+ //- Text
+ +docs-heading('text', 'Text utilities')
+ include contents/text.pug \ No newline at end of file
diff --git a/docs/utilities.html b/docs/utilities.html
index 5a2256a..5032ec7 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -1,678 +1,442 @@
<!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>Utilities - 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>Utilities - 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 checked>
- <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="" checked="checked"/>
+ <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>
- <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</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=""/>
+ <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="utilities" class="container">
- <h3 class="s-title"><a href="#utilities" class="anchor" aria-hidden="true">#</a>Utilities</h3>
- </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>
- </div>
- </div>
-
- <div id="colors" class="container">
- <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3>
- <div class="docs-note">
- <p>Color utilities are used for changing colors for text, link and background.</p>
- </div>
- <h4 id="colors-text" class="s-subtitle">Text colors</h4>
- <div class="docs-note">
- <p><span class="text-primary">primary color</span></p>
- <p><span class="text-secondary">secondary color</span></p>
- <p><span class="text-gray">gray color</span></p>
- <p><span class="text-light bg-dark p-1 rounded">light color</span></p>
- <p><span class="text-success">success color</span></p>
- <p><span class="text-warning">warning color</span></p>
- <p><span class="text-error">error color</span></p>
- </div>
-
-<!-- colors -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-primary&quot;</span>&gt;primary color&lt;<span class="tag">/span</span>&gt;
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-secondary&quot;</span>&gt;secondary color&lt;<span class="tag">/span</span>&gt;
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-gray&quot;</span>&gt;gray color&lt;<span class="tag">/span</span>&gt;
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-light&quot;</span>&gt;light color&lt;<span class="tag">/span</span>&gt;
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-success&quot;</span>&gt;success color&lt;<span class="tag">/span</span>&gt;
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-warning&quot;</span>&gt;warning color&lt;<span class="tag">/span</span>&gt;
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-error&quot;</span>&gt;error color&lt;<span class="tag">/span</span>&gt;
-</code></pre>
-
- <div class="docs-note">
- <p><a class="text-primary p-1" href="#colors">primary link</a></p>
- <p><a class="text-secondary p-1" href="#colors">secondary link</a></p>
- <p><a class="text-gray p-1" href="#colors">gray link</a></p>
- <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p>
- <p><a class="text-success p-1" href="#colors">success link</a></p>
- <p><a class="text-warning p-1" href="#colors">warning link</a></p>
- <p><a class="text-error p-1" href="#colors">error link</a></p>
- </div>
-
-<!-- colors -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-primary&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;primary color&lt;<span class="tag">/a</span>&gt;
-&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-secondary&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;secondary color&lt;<span class="tag">/a</span>&gt;
-&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-gray&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;gray color&lt;<span class="tag">/a</span>&gt;
-&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-light&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;light color&lt;<span class="tag">/a</span>&gt;
-&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-success&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;success color&lt;<span class="tag">/a</span>&gt;
-&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-warning&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;warning color&lt;<span class="tag">/a</span>&gt;
-&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-error&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;error color&lt;<span class="tag">/a</span>&gt;
-</code></pre>
-
- <h4 id="colors-background" class="s-subtitle">Background colors</h4>
- <div class="docs-note">
- <p><span class="bg-primary p-1 rounded">primary bg</span></p>
- <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p>
- <p><span class="bg-dark p-1 rounded">dark bg</span></p>
- <p><span class="bg-gray p-1 rounded">gray bg</span></p>
- <p><span class="bg-success p-1 rounded">success bg</span></p>
- <p><span class="bg-warning p-1 rounded">warning bg</span></p>
- <p><span class="bg-error p-1 rounded">error bg</span></p>
- </div>
-
-<!-- colors -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-primary&quot;</span>&gt;primary bg&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-secondary&quot;</span>&gt;secondary bg&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-dark&quot;</span>&gt;dark bg&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-gray&quot;</span>&gt;gray bg&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-success&quot;</span>&gt;success bg&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-warning&quot;</span>&gt;warning bg&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-error&quot;</span>&gt;error bg&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="cursors" class="container">
- <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursor utilities</h3>
- <div class="docs-note">
- <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
- </div>
- <div class="columns">
- <div class="column">
- <div class="bg-gray docs-block c-hand">c-hand</div>
- </div>
- <div class="column">
- <div class="bg-gray docs-block c-move">c-move</div>
- </div>
- <div class="column">
- <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div>
- </div>
- <div class="column">
- <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div>
- </div>
- <div class="column">
- <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div>
- </div>
- <div class="column">
- <div class="bg-gray docs-block c-auto">c-auto</div>
- </div>
- </div>
-
-<!-- display utilities -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- cursor: hand; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-hand&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- cursor: move; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-move&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- cursor: zoom-in; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-zoom-in&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- cursor: zoom-out; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-zoom-out&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- cursor: not-allowed; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-not-allowed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- cursor: auto; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-auto&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="colors">
+ <h3 class="s-title"><a class="anchor" href="#colors" aria-hidden="true">#</a>Color utilities</h3>
+ <p>Color utilities are used for changing colors for text, link and background.</p>
+ <h4 class="s-subtitle" id="colors-text"><a class="anchor" href="#colors-text" aria-hidden="true">#</a>Text colors</h4>
+ <div class="columns">
+ <div class="column col-12">
+ <p><span class="text-primary">primary color</span></p>
+ <p><span class="text-secondary">secondary color</span></p>
+ <p><span class="text-gray">gray color</span></p>
+ <p><span class="text-light bg-dark p-1 rounded">light color</span></p>
+ <p><span class="text-success">success color</span></p>
+ <p><span class="text-warning">warning color</span></p>
+ <p><span class="text-error">error color</span></p>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span>&gt;</span>primary color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span>&gt;</span>secondary color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span>&gt;</span>gray color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span>&gt;</span>light color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span>&gt;</span>success color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>&gt;</span>warning color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</code></pre>
-
- </div>
-
- <div id="display" class="container">
- <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3>
- <div class="docs-note">
- <p>Display utilities are used for display and hidden things.</p>
- </div>
-
-<!-- display utilities -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- display: block; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: inline; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-inline&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: inline-block; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-inline-block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: flex; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-flex&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: inline-flex; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-inline-flex&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: none; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-none&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;d-hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- visibility: visible; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-visible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- visibility: hidden; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-invisible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- hide text contents --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- assistive text for screen reader --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-assistive&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+ <div class="columns">
+ <div class="column col-12">
+ <p><a class="text-primary p-1" href="#colors">primary link</a></p>
+ <p><a class="text-secondary p-1" href="#colors">secondary link</a></p>
+ <p><a class="text-gray p-1" href="#colors">gray link</a></p>
+ <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p>
+ <p><a class="text-success p-1" href="#colors">success link</a></p>
+ <p><a class="text-warning p-1" href="#colors">warning link</a></p>
+ <p><a class="text-error p-1" href="#colors">error link</a></p>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>primary color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>secondary color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>gray color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>light color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>success color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>warning color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</code></pre>
-
- </div>
-
- <div id="divider" class="container">
- <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3>
- <div class="docs-note">
- <p>A Divider is used for separating elements.</p>
- </div>
- <div class="columns">
- <div class="column">
- <div class="divider"></div>
- </div>
- </div>
- <div class="columns">
- <div class="column">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
- <div class="divider text-center" data-content="OR"></div>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+ <h4 class="s-subtitle" id="colors-background"><a class="anchor" href="#colors-background" aria-hidden="true">#</a>Background colors</h4>
+ <div class="columns">
+ <div class="column col-12">
+ <p><span class="bg-primary p-1 rounded">primary bg</span></p>
+ <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p>
+ <p><span class="bg-dark p-1 rounded">dark bg</span></p>
+ <p><span class="bg-gray p-1 rounded">gray bg</span></p>
+ <p><span class="bg-success p-1 rounded">success bg</span></p>
+ <p><span class="bg-warning p-1 rounded">warning bg</span></p>
+ <p><span class="bg-error p-1 rounded">error bg</span></p>
+ </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">"bg-primary"</span>&gt;</span>primary bg<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">"bg-secondary"</span>&gt;</span>secondary bg<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">"bg-dark"</span>&gt;</span>dark bg<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">"bg-gray"</span>&gt;</span>gray bg<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">"bg-success"</span>&gt;</span>success bg<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">"bg-warning"</span>&gt;</span>warning bg<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">"bg-error"</span>&gt;</span>error bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- </div>
-
- <div class="columns">
- <div class="column">
- <form>
- <div class="form-group">
- <label class="form-label" for="input-example-1">Email</label>
- <input class="form-input" type="text" id="input-example-1" placeholder="Email">
+ <div class="container" id="cursor">
+ <h3 class="s-title"><a class="anchor" href="#cursor" aria-hidden="true">#</a>Cursor utilities</h3>
+ <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
+ <div class="columns">
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-hand">c-hand</div>
</div>
- <div class="form-group">
- <label class="form-label" for="input-example-2">Password</label>
- <input class="form-input" type="password" id="input-example-2" placeholder="Password">
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-move">c-move</div>
</div>
- <div class="form-group">
- <label class="form-checkbox">
- <input type="checkbox">
- <i class="form-icon"></i> Remember me
- </label>
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div>
</div>
- <div class="form-group">
- <button class="btn btn-primary">Sign in</button>
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div>
</div>
- </form>
- </div>
- <div class="divider-vert" data-content="OR"></div>
- <div class="column">
- <form>
- <div class="form-group">
- <label class="form-label" for="input-example-3">Email</label>
- <input class="form-input" type="text" id="input-example-3" placeholder="Email">
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div>
</div>
- <div class="form-group">
- <button class="btn btn-primary btn-block">Sign up</button>
- <button class="btn btn-link btn-block">Learn more</button>
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-auto">c-auto</div>
</div>
- </form>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- cursor: hand; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-hand"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: move; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-move"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: zoom-in; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-in"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: zoom-out; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-out"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: not-allowed; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-not-allowed"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: auto; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-auto"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- </div>
-
-<!-- divider utilities -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- divider element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- divider element with text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider text-center&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;OR&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- vertical divider element with text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column&quot;</span>&gt;
- <span class="com">&lt;!-- column 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;divider-vert&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;OR&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;column&quot;</span>&gt;
- <span class="com">&lt;!-- column content --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
+ <div class="container" id="display">
+ <h3 class="s-title"><a class="anchor" href="#display" aria-hidden="true">#</a>Display utilities</h3>
+ <p>Display utilities are used for display and hidden things.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- display: block; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline-block; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: flex; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline-flex; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: none; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none"</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">"d-hide"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- visibility: visible; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-visible"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- visibility: hidden; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-invisible"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- hide text contents --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-hide"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- assistive text for screen reader --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-assistive"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+ </div>
+ <div class="container" id="divider">
+ <h3 class="s-title"><a class="anchor" href="#divider" aria-hidden="true">#</a>Divider</h3>
+ <p>A Divider is used for separating elements.</p>
+ <div class="columns">
+ <div class="column">
+ <div class="divider"></div>
+ </div>
+ </div>
+ <div class="columns">
+ <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+ <div class="divider text-center" data-content="OR"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+ </div>
+ </div>
+ <div class="columns">
+ <div class="column">
+ <form>
+ <div class="form-group">
+ <label class="form-label" for="input-example-1">Email</label>
+ <input class="form-input" id="input-example-1" type="text" placeholder="Email">
+ </div>
+ <div class="form-group">
+ <label class="form-label" for="input-example-2">Password</label>
+ <input class="form-input" id="input-example-2" type="password" placeholder="Password">
+ </div>
+ <div class="form-group">
+ <label class="form-checkbox">
+ <input type="checkbox"><i class="form-icon"></i> Remember me
+ </label>
+ </div>
+ <div class="form-group">
+ <button class="btn btn-primary">Sign in</button>
+ </div>
+ </form>
+ </div>
+ <div class="divider-vert" data-content="OR"></div>
+ <div class="column">
+ <form>
+ <div class="form-group">
+ <label class="form-label" for="input-example-3">Email</label>
+ <input class="form-input" id="input-example-3" type="text" placeholder="Email">
+ </div>
+ <div class="form-group">
+ <button class="btn btn-primary btn-block">Sign up</button>
+ <button class="btn btn-link btn-block">Learn more</button>
+ </div>
+ </form>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- divider element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- divider element with text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider text-center"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"OR"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <div id="loading" class="container">
- <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3>
- <div class="docs-note">
- <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p>
- </div>
- <div class="columns">
- <div class="column col-12 text-center">
- <div class="loading"></div>
+<span class="hljs-comment">&lt;!-- vertical divider element with text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- column 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">"divider-vert"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"OR"</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">"column"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- column 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>
- <div class="docs-note">
- <p>Add the <code>loading-lg</code> class for large size. </p>
- </div>
- <div class="columns">
- <div class="column col-12 text-center">
- <div class="loading loading-lg"></div>
+ <div class="container" id="loading">
+ <h3 class="s-title"><a class="anchor" href="#loading" aria-hidden="true">#</a>Loading</h3>
+ <p>
+ Loading indicator is used for loading or updating.
+ You can add the <code>loading</code> class to a container for loading status.
+ </p>
+ <div class="columns">
+ <div class="column col-12 text-center">
+ <div class="loading"></div>
+ </div>
+ </div>
+ <p>Add the <code>loading-lg</code> class for large size.</p>
+ <div class="columns">
+ <div class="column col-12 text-center">
+ <div class="loading loading-lg"></div>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- loading element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading"</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">"loading loading-lg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- </div>
-
-<!-- loading -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- loading element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;loading&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;loading loading-lg&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="position" class="container">
- <h3 class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3>
- <div class="docs-note">
- <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
- </div>
-
-<!-- position utilities -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- clear float --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;clearfix&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- float: left and right --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;float-left&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;float-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- position: relative, absolute and fixed --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;relative&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;absolute&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;fixed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- centered block --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;centered&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+ <div class="container" id="position">
+ <h3 class="s-title"><a class="anchor" href="#position" aria-hidden="true">#</a>Position utilities</h3>
+ <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- clear float --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"clearfix"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- float: left and right --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-left"</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">"float-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- position: relative, absolute and fixed --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"relative"</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">"absolute"</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">"fixed"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- centered block --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"centered"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="com">&lt;!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;m-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;m-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mt-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;mt-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- mx-1 {margin-left: 4px; margin-right: 4px;} --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mx-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;mx-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;my-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;my-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;p-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;p-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-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;pt-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- px-1 {padding-left: 4px; padding-right: 4px;} --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;px-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;px-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;py-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;py-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="shapes" class="container">
- <h3 class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3>
- <div class="docs-note">
- <p>Shape utilities are used for change element shapes.</p>
- </div>
- <div class="columns">
- <div class="column col-6 text-center">
- <div class="bg-primary text-light docs-shape rounded centered">
- rounded
- </div>
+<span class="hljs-comment">&lt;!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-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">"m-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-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">"mt-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- mx-1 {margin-left: 4px; margin-right: 4px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-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">"mx-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">"my-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">"my-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-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">"p-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-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">"pt-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- px-1 {padding-left: 4px; padding-right: 4px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-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">"px-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">"py-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">"py-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-6 text-center">
- <div class="bg-primary text-light docs-shape circle centered">
- circle
+ <div class="container" id="shapes">
+ <h3 class="s-title"><a class="anchor" href="#shapes" aria-hidden="true">#</a>Shape utilities</h3>
+ <p>Shape utilities are used for change element shapes.</p>
+ <div class="columns">
+ <div class="column col-6 text-center">
+ <div class="bg-primary text-light docs-shape rounded centered">rounded</div>
+ </div>
+ <div class="column col-6 text-center">
+ <div class="bg-primary text-light docs-shape circle centered">circle</div>
+ </div>
</div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- rounded element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rounded"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- circle element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- </div>
+ <div class="container" id="text">
+ <h3 class="s-title"><a class="anchor" href="#text" aria-hidden="true">#</a>Text utilities</h3>
+ <p>Text utilities are used for text alignment, styles and overflow things.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- left-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- center-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- right-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- justified text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-justify"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<!-- shape utilities -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- rounded element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;rounded&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- circle element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;circle&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</code></pre>
+<span class="hljs-comment">&lt;!-- Lowercased text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-lowercase"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Uppercased text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-uppercase"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Capitalized text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-capitalize"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- </div>
+<span class="hljs-comment">&lt;!-- Normal weight text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-normal"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Bold text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-bold"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Italicized text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-italic"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Larger text (120%) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-large"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <div id="text" class="container">
- <h3 class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3>
- <div class="docs-note">
- <p>Text utilities are used for text alignment, styles and overflow things.</p>
+<span class="hljs-comment">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-ellipsis"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Overflow behavior: truncate the text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-clip"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-break"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+ </div>
</div>
-
-<!-- text utilities -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- left-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- center-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-center&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- right-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- justified text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-justify&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Lowercased text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-lowercase&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Uppercased text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-uppercase&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Capitalized text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-capitalize&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Normal weight text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-normal&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Bold text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-bold&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Italicized text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-italic&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Larger text (120%) --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-large&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-ellipsis&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Overflow behavior: truncate the text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-clip&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-break&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
</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