diff options
Update old docs to new Pug templates
49 files changed, 5526 insertions, 3972 deletions
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"><!-- standard Accordions example --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-checkbox"</span> <span class="atn">hidden</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-1"</span>><<span class="tag">/i</span>> + </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"><!-- standard Accordions example --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Title - <<span class="tag">/label</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> - <span class="com"><!-- Accordions content --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span> + <span class="hljs-comment"><!-- Accordions content --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="com"><!-- mutually exclusive Accordions example (with same input names) --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-radio"</span> <span class="atn">hidden</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> +<span class="hljs-comment"><!-- mutually exclusive Accordions example (with same input names) --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>></span> Title - <<span class="tag">/label</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> - <span class="com"><!-- Accordions content --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span> + <span class="hljs-comment"><!-- Accordions content --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- details and summary Accordions example --></span> -<<span class="tag">details</span> <span class="atn">class</span>=<span class="atv">"accordion"</span> <span class="atn">open</span>> - <<span class="tag">summary</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-1"</span>><<span class="tag">/i</span>> + <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"><!-- details and summary Accordions example --></span> +<span class="hljs-tag"><<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">open</span>></span> + <span class="hljs-tag"><<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Title - <<span class="tag">/summary</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> - <span class="com"><!-- Accordions content --></span> - <<span class="tag">/div</span>> -<<span class="tag">/details</span>> -</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 <img> 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 <div> 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"><!-- Basic avatar examples --></span> -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> -<<span class="tag">/figure</span>> - -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar-icon"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> -<<span class="tag">/figure</span>> - -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5755d9;"</span>><<span class="tag">/figure</span>> - -<span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5755d9;"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> -<<span class="tag">/figure</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> + <span class="hljs-tag"></<span class="hljs-name">summary</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span> + <span class="hljs-comment"><!-- Accordions content --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">details</span>></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><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"avatar-presence online"</span>><<span class="tag">/i</span>> -<<span class="tag">/figure</span>> -</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><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span>> - Notifications -<<span class="tag">/span</span>> - -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"8"</span>> - Notifications -<<span class="tag">/span</span>> - -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn badge"</span> <span class="atn">data-badge</span>=<span class="atv">"8"</span>> - Button -<<span class="tag">/button</span>> - -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar badge"</span> <span class="atn">data-badge</span>=<span class="atv">"8"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">alt</span>=<span class="atv">"YZ"</span>> -<<span class="tag">/figure</span>> -</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 <img> 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 <div> 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"><!-- Basic avatar examples --></span> +<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span> + <span class="hljs-tag"><<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>></span> +<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -<!-- bars --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-sm"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span> <span class="atn">aria-valuenow</span>=<span class="atv">"25"</span> <span class="atn">aria-valuemin</span>=<span class="atv">"0"</span> <span class="atn">aria-valuemax</span>=<span class="atv">"100"</span>><<span class="tag">/div</span>> -<<span class="tag">/div</span>> +<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<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>></span> +<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -<span class="com"><!-- multi-bars --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"25%"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span>>25%<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">style</span>=<span class="atv">"width:15%;background:#818bd5;"</span>>15%<<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</code></pre> +<span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></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"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> +<span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<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>></span> +<span class="hljs-tag"></<span class="hljs-name">figure</span>></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 <i> 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"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-presence online"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> +<span class="hljs-tag"></<span class="hljs-name">figure</span>></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"><!-- slider --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-slider"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"bar-slider-btn btn"</span> <span class="atn">role</span>=<span class="atv">"slider"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <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"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>></span> + Notifications +<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="com"><!-- range slider --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-slider"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:15%;"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"bar-slider-btn btn"</span> <span class="atn">role</span>=<span class="atv">"slider"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:65%;"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"bar-slider-btn btn"</span> <span class="atn">role</span>=<span class="atv">"slider"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</code></pre> +<span class="hljs-tag"><<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>></span> + Notifications +<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - </div> +<span class="hljs-tag"><<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>></span> + Button +<span class="hljs-tag"></<span class="hljs-name">button</span>></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"><<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>></span> + <span class="hljs-tag"><<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>></span> +<span class="hljs-tag"></<span class="hljs-name">figure</span>></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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Home<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Settings<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Change avatar<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</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 <progress>, <meter> 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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-sm"</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + +<span class="hljs-comment"><!-- multi-bars --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar"</span>></span> + <span class="hljs-tag"><<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>></span>25%<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<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>></span>15%<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- slider --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>></span> + <span class="hljs-tag"><<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> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + +<span class="hljs-comment"><!-- range slider --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Change avatar<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-image"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive"</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-title h5"</span>>Microsoft<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-subtitle text-gray"</span>>Software and hardware<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> + <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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-image"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive"</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-title h5"</span>></span>Microsoft<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-subtitle text-gray"</span>></span>Software and hardware<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>></span> Empower every person and every organization on the planet to achieve more. - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-footer"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Do<<span class="tag">/button</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Do<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span>Crime<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<!-- chips --> -<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>>Crime<<span class="tag">/span</span>> - -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span> Biography - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> -<<span class="tag">/span</span>> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span>> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span> + <span class="hljs-tag"><<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> Yan Zhu - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> -<<span class="tag">/div</span>></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"><<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>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-icon"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-people"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-title h5"</span>></span>You have no new messages<span class="hljs-tag"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-subtitle"</span>></span>Click the button to start a conversation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-action"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Send a message<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty-icon"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> - <<span class="tag">/div</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-title h5"</span>>You have no new messages<<span class="tag">/p</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-subtitle"</span>>Click the button to start a conversation.<<span class="tag">/p</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty-action"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Send a message<<span class="tag">/button</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <span class="com"><!-- menu header text --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span> <span class="atn">data-content</span>=<span class="atv">"LINKS"</span>> - <<span class="tag">/li</span>> - <span class="com"><!-- menu item standard --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Slack - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <span class="com"><!-- menu item with form control --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> form-checkbox - <<span class="tag">/label</span>> - <<span class="tag">/li</span>> - <span class="com"><!-- menu divider --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/li</span>> - <span class="com"><!-- menu item with badge --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"menu-badge"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>2<<span class="tag">/label</span>> - <<span class="tag">/div</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Settings - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</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"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span> + <span class="hljs-comment"><!-- menu header text --></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-comment"><!-- menu item standard --></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Slack + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-comment"><!-- menu item with form control --></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> form-checkbox + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-comment"><!-- menu divider --></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-comment"><!-- menu item with badge --></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Settings + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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"><!-- basic dropdown button --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"dropdown"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link dropdown-toggle"</span> <span class="atn">tabindex</span>=<span class="atv">"0"</span>> - dropdown menu <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-caret"</span>><<span class="tag">/i</span>> - <<span class="tag">/a</span>> - <span class="com"><!-- menu component --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> + <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"><!-- basic dropdown button --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>></span> + <span class="hljs-tag"><<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>></span> + dropdown menu <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-comment"><!-- menu component --></span> + <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span> ... - <<span class="tag">/ul</span>> -<<span class="tag">/div</span>> + <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="com"><!-- dropdown button group --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"dropdown"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn"</span>> +<span class="hljs-comment"><!-- dropdown button group --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</span>></span> + <span class="hljs-tag"><<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>></span> dropdown button - <<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn dropdown-toggle"</span> <span class="atn">tabindex</span>=<span class="atv">"0"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-caret"</span>><<span class="tag">/i</span>> - <<span class="tag">/a</span>> + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="com"><!-- menu component --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> + <span class="hljs-comment"><!-- menu component --></span> + <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span> ... - <<span class="tag">/ul</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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"></<span class="hljs-name">ul</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span> <span class="atn">id</span>=<span class="atv">"modal-id"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#close"</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span>><<span class="tag">/a</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-header"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#close"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span>><<span class="tag">/a</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-title h5"</span>>Modal title<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-body"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"content"</span>> - <span class="com"><!-- content here --></span> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-footer"</span>> + <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"><<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>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title h5"</span>></span>Modal title<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span> + <span class="hljs-comment"><!-- content here --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>></span> ... - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal modal-sm"</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>></span> + <span class="hljs-comment"><!-- modal structure here --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#close"</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span>><<span class="tag">/a</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> - <span class="com"><!-- modal structure here --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#close"</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span>><<span class="tag">/a</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container modal-fullheight"</span>> - <span class="com"><!-- modal structure here --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Layout<<span class="tag">/a</span>> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Flexbox grid<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Responsive<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Navbar<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Empty states<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Components<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Utilities<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item disabled"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>Previous<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>1<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>2<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>3<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">span</span>>...<<span class="tag">/span</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>12<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Next<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</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>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"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Elements<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item active"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Layout<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Flexbox grid<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Responsive<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Navbar<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Empty states<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Components<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Utilities<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-prev"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"page-item-subtitle"</span>>Previous<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"page-item-title h5"</span>>Getting started<<span class="tag">/div</span>> - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-next"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"page-item-subtitle"</span>>Next<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"page-item-title h5"</span>>Layout<<span class="tag">/div</span>> - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</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"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item disabled"</span>></span> + <span class="hljs-tag"><<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>></span>Previous<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item active"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">span</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>12<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-prev"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>></span>Getting started<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-next"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>></span>Layout<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-header"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-title"</span>></span>Comments<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-nav"</span>></span> + <span class="hljs-comment"><!-- navigation components: tabs, breadcrumbs or pagination --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-body"</span>></span> + <span class="hljs-comment"><!-- contents --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-footer"</span>></span> + <span class="hljs-comment"><!-- buttons or inputs --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover popover-right"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>right popover<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover-container"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>></span> + ... + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>></span> + ... + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>></span> + ... + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span> + <span class="hljs-tag"><<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>></span>Step 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item active"</span>></span> + <span class="hljs-tag"><<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>></span>Step 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span> + <span class="hljs-tag"><<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>></span>Step 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span> + <span class="hljs-tag"><<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>></span>Step 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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 <a> with the <code>active</code> class will be highlighted. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Music<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span> + <span class="hljs-tag"><<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>></span>Playlists<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Radio<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Connect<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span> + <span class="hljs-tag"><<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>></span> + Music + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> + Music + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item tab-action"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<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>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-header"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-title"</span>>Comments<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-nav"</span>> - <span class="com"><!-- navigation components: tabs, breadcrumbs or pagination --></span> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-body"</span>> - <span class="com"><!-- contents --></span> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-footer"</span>> - <span class="com"><!-- buttons or inputs --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>></span>The Avengers<span class="hljs-tag"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>></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"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Join<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>></span>spectre-docs.pdf<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>></span>14MB · Public · 1 Jan, 2017<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-more-vert"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover popover-right"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>right popover<<span class="tag">/button</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover-container"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> - ... - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> - ... - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-footer"</span>> - ... - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"step"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"step-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Step 1"</span>>Step 1<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"step-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Step 2"</span>>Step 2<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"step-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Step 3"</span>>Step 3<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"step-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Step 4"</span>>Step 4<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</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 <a> with the <code>active</code> class will be highlighted.</p> - </div> - -<!-- tabs --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Music<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"active"</span>>Playlists<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Radio<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Connect<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> - Music - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> + <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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast"</span>></span> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Music - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item tab-action"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm input-group-btn"</span>>Search<<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast toast-primary"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-file centered"</span>><<span class="tag">/i</span>> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"tile-title"</span>>The Avengers<<span class="tag">/p</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"tile-subtitle text-gray"</span>>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...<<span class="tag">/p</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-action"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Join<<span class="tag">/button</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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"><<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>></span>top tooltip<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<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>></span>right tooltip<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> </div> </div> - -<!-- tiles --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-file centered"</span>><<span class="tag">/i</span>> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-title"</span>>spectre-docs.pdf<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-subtitle text-gray"</span>>14MB · Public · 1 Jan, 2017<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-action"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-more-vert"</span>><<span class="tag">/i</span>> - <<span class="tag">/button</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<<span class="tag">/div</span>> - -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast toast-primary"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<<span class="tag">/div</span>> -</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><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>top tooltip<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>> -</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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-autocomplete"</span>></span> + <span class="hljs-comment"><!-- autocomplete input container --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-autocomplete-input form-input"</span>></span> -<!-- autocomplete --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> - <span class="com"><!-- autocomplete input container --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input form-input"</span>> - - <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span>> + <span class="hljs-comment"><!-- autocomplete chips --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span> + <span class="hljs-tag"><<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>></span> Thor Odinson - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> - <<span class="tag">/div</span>> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="com"><!-- autocomplete real input box --></span> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span>> - <<span class="tag">/div</span>> + <span class="hljs-comment"><!-- autocomplete real input box --></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="com"><!-- autocomplete suggestion list --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <span class="com"><!-- menu list chips --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Steve Rogers"</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> + <span class="hljs-comment"><!-- autocomplete suggestion list --></span> + <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span> + <span class="hljs-comment"><!-- menu list chips --></span> + <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>></span> Steve Rogers - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> -<<span class="tag">/div</span>> -</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"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"carousel"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"slide-1"</span> <span class="atn">class</span>=<span class="atv">"carousel-locator"</span> <span class="atn">name</span>=<span class="atv">"carousel-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"slide-2"</span> <span class="atn">class</span>=<span class="atv">"carousel-locator"</span> <span class="atn">name</span>=<span class="atv">"carousel-radio"</span> <span class="atn">hidden</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"slide-3"</span> <span class="atn">class</span>=<span class="atv">"carousel-locator"</span> <span class="atn">name</span>=<span class="atv">"carousel-radio"</span> <span class="atn">hidden</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"slide-4"</span> <span class="atn">class</span>=<span class="atv">"carousel-locator"</span> <span class="atn">name</span>=<span class="atv">"carousel-radio"</span> <span class="atn">hidden</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"carousel-container"</span>> - <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"carousel-item"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-prev btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-4"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> - <<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-next btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-2"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right"</span>><<span class="tag">/i</span>> - <<span class="tag">/label</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> - <<span class="tag">/figure</span>> - - <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"carousel-item"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-prev btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-1"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> - <<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-next btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-3"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right"</span>><<span class="tag">/i</span>> - <<span class="tag">/label</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> - <<span class="tag">/figure</span>> - - <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"carousel-item"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-prev btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-2"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> - <<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-next btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-4"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right"</span>><<span class="tag">/i</span>> - <<span class="tag">/label</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> - <<span class="tag">/figure</span>> - - <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"carousel-item"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-prev btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-3"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> - <<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"item-next btn btn-action btn-lg"</span> <span class="atn">for</span>=<span class="atv">"slide-1"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right"</span>><<span class="tag">/i</span>> - <<span class="tag">/label</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> - <<span class="tag">/figure</span>> - <<span class="tag">/div</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"carousel-nav"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"nav-item text-hide c-hand"</span> <span class="atn">for</span>=<span class="atv">"slide-1"</span>>1<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"nav-item text-hide c-hand"</span> <span class="atn">for</span>=<span class="atv">"slide-2"</span>>2<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"nav-item text-hide c-hand"</span> <span class="atn">for</span>=<span class="atv">"slide-3"</span>>3<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"nav-item text-hide c-hand"</span> <span class="atn">for</span>=<span class="atv">"slide-4"</span>>4<<span class="tag">/label</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"comparison-slider"</span>> - <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"comparison-before"</span>> - <span class="com"><!-- image (before) --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"comparison-label"</span>>Before<<span class="tag">/div</span>> - <<span class="tag">/figure</span>> - - <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"comparison-after"</span>> - <span class="com"><!-- image (after) --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"comparison-label"</span>>After<<span class="tag">/div</span>> - <<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">"comparison-resizer"</span> <span class="atn">readonly</span>><<span class="tag">/textarea</span>> - <<span class="tag">/figure</span>> -<<span class="tag">/div</span>> -</code></pre> - - </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-slider"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-before"</span>></span> + <span class="hljs-comment"><!-- image (before) --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-label"</span>></span>Before<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">figure</span>></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"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-after"</span>></span> + <span class="hljs-comment"><!-- image (after) --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comparison-label"</span>></span>After<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> + <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-0"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-1"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-2"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-nav"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-0"</span>>All<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-1"</span>>Action<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-2"</span>>Roleplaying<<span class="tag">/label</span>> - <<span class="tag">/div</span>> + <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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<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>></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-body"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-1"</span>> - <span class="com"><!-- Filter item content --></span> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-2"</span>> - <span class="com"><!-- Filter item content --></span> - <<span class="tag">/div</span>> - <span class="com"><!-- Filter items --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</code></pre> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-nav"</span>></span> + <span class="hljs-tag"><<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>></span>All<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<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>></span>Action<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<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>></span>Roleplaying<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-body"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-comment"><!-- Filter item content --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-comment"><!-- Filter item content --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-comment"><!-- Filter items --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- Meter is green when low < value < high --></span> -<<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"20"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/meter</span>> -<<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"60"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">low</span>=<span class="atv">"30"</span> <span class="atn">high</span>=<span class="atv">"80"</span>><<span class="tag">/meter</span>> -<span class="com"><!-- Meter is yellow when value < low or high < value --></span> -<<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"85"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">low</span>=<span class="atv">"30"</span> <span class="atn">high</span>=<span class="atv">"80"</span>><<span class="tag">/meter</span>> -<span class="com"><!-- Meter is red when value < low < high < optimum or optimum < low < high < value --></span> -<<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"20"</span> <span class="atn">optimum</span>=<span class="atv">"90"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">low</span>=<span class="atv">"30"</span> <span class="atn">high</span>=<span class="atv">"80"</span>><<span class="tag">/meter</span>> -</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"><!-- Meter is green when low < value < high --></span> +<span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span> +<span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span> +<span class="hljs-comment"><!-- Meter is yellow when value < low or high < value --></span> +<span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></span> +<span class="hljs-comment"><!-- Meter is red when value < low < high < optimum or optimum < low < high < value --></span> +<span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">meter</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"off-canvas"</span>> - <span class="com"><!-- off-screen toggle button --></span> - <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"off-canvas-toggle btn btn-primary btn-action"</span> <span class="atn">href</span>=<span class="atv">"#sidebar-id"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-menu"</span>><<span class="tag">/i</span>> - <<span class="tag">/a</span>> - - <<span class="tag">div</span> <span class="atn">id</span>=<span class="atv">"sidebar-id"</span> <span class="atn">class</span>=<span class="atv">"off-canvas-sidebar"</span>> - <span class="com"><!-- off-screen sidebar --></span> - <<span class="tag">/div</span>> - - <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"off-canvas-overlay"</span> <span class="atn">href</span>=<span class="atv">"#close"</span>><<span class="tag">/a</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"off-canvas-content"</span>> - <span class="com"><!-- off-screen content --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas"</span>></span> + <span class="hljs-comment"><!-- off-screen toggle button --></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-menu"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<!-- parallax --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-top-left"</span> <span class="atn">tabindex</span>=<span class="atv">"1"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-top-right"</span> <span class="atn">tabindex</span>=<span class="atv">"2"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-bottom-left"</span> <span class="atn">tabindex</span>=<span class="atv">"3"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-bottom-right"</span> <span class="atn">tabindex</span>=<span class="atv">"4"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-content"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-front"</span>> - <<span class="tag">h2</span>>tvOS parallax demo<<span class="tag">/h2</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-back"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</code></pre> + <span class="hljs-tag"><<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>></span> + <span class="hljs-comment"><!-- off-screen sidebar --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">"progress"</span> <span class="atn">value</span>=<span class="atv">"25"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/progress</span>> -<<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">"progress"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/progress</span>> -</code></pre> - - </div> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"off-canvas-content"</span>></span> + <span class="hljs-comment"><!-- off-screen content --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> - </div> - -<!-- sliders --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- Sliders --></span> -<<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"slider"</span> <span class="atn">type</span>=<span class="atv">"range"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">value</span>=<span class="atv">"50"</span>> -<span class="com"><!-- Sliders with tooltips --></span> -<<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"slider tooltip"</span> <span class="atn">type</span>=<span class="atv">"range"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">value</span>=<span class="atv">"50"</span> <span class="atn">oninput</span>=<span class="atv">"this.setAttribute('value', this.value);"</span>> -</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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax"</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-content"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-front"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>tvOS parallax demo<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parallax-back"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">...</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<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>></span><span class="hljs-tag"></<span class="hljs-name">progress</span>></span> +<span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">progress</span>></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"><!-- Sliders --></span> +<span class="hljs-tag"><<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>></span> +<span class="hljs-comment"><!-- Sliders with tooltips --></span> +<span class="hljs-tag"><<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>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"timeline"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"timeline-item"</span> <span class="atn">id</span>=<span class="atv">"timeline-example-1"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"timeline-left"</span>> - <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"timeline-icon"</span> <span class="atn">href</span>=<span class="atv">"#timeline-example-1"</span>><<span class="tag">/a</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"timeline-content"</span>> - <span class="com"><!-- tiles structure --></span> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-left"</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-content"</span>></span> + <span class="hljs-comment"><!-- tiles structure --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"timeline-item"</span> <span class="atn">id</span>=<span class="atv">"timeline-example-2"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"timeline-left"</span>> - <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"timeline-icon icon-lg"</span> <span class="atn">href</span>=<span class="atv">"#timeline-example-2"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-check"</span>><<span class="tag">/i</span>> - <<span class="tag">/a</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"timeline-content"</span>> - <span class="com"><!-- tiles structure --></span> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-left"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-check"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> + <span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"timeline-content"</span>></span> + <span class="hljs-comment"><!-- tiles structure --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> ... -<<span class="tag">/div</span>> -</code></pre> - +<span class="hljs-tag"></<span class="hljs-name">div</span>></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><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span>>primary color<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span>>secondary color<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span>>gray color<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-light"</span>>light color<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-success"</span>>success color<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-warning"</span>>warning color<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-error"</span>>error color<<span class="tag">/span</span>> -</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><<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>primary color<<span class="tag">/a</span>> -<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>secondary color<<span class="tag">/a</span>> -<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>gray color<<span class="tag">/a</span>> -<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-light"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>light color<<span class="tag">/a</span>> -<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-success"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>success color<<span class="tag">/a</span>> -<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-warning"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>warning color<<span class="tag">/a</span>> -<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-error"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>error color<<span class="tag">/a</span>> -</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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-primary"</span>>primary bg<<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-secondary"</span>>secondary bg<<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-dark"</span>>dark bg<<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-gray"</span>>gray bg<<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-success"</span>>success bg<<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-warning"</span>>warning bg<<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-error"</span>>error bg<<span class="tag">/div</span>> -</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"><!-- cursor: hand; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-hand"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: move; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-move"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: zoom-in; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-zoom-in"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: zoom-out; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-zoom-out"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: not-allowed; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-not-allowed"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: auto; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-auto"</span>><<span class="tag">/div</span>> + </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"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span>></span>primary color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span>></span>secondary color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span>></span>gray color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span>></span>light color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span>></span>success color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>></span>warning color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span>></span>error color<span class="hljs-tag"></<span class="hljs-name">span</span>></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"><!-- display: block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-block"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline-block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline-block"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-flex"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline-flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline-flex"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: none; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-none"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-hide"</span>><<span class="tag">/div</span>> -<span class="com"><!-- visibility: visible; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-visible"</span>><<span class="tag">/div</span>> -<span class="com"><!-- visibility: hidden; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-invisible"</span>><<span class="tag">/div</span>> -<span class="com"><!-- hide text contents --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-hide"</span>><<span class="tag">/div</span>> -<span class="com"><!-- assistive text for screen reader --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-assistive"</span>><<span class="tag">/div</span>> + <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"><<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>></span>primary color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"><<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>></span>secondary color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"><<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>></span>gray color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"><<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>></span>light color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"><<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>></span>success color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"><<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>></span>warning color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> +<span class="hljs-tag"><<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>></span>error color<span class="hljs-tag"></<span class="hljs-name">a</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary"</span>></span>primary bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary"</span>></span>secondary bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-dark"</span>></span>dark bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-gray"</span>></span>gray bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-success"</span>></span>success bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>></span>warning bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-error"</span>></span>error bg<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- cursor: hand; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-hand"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- cursor: move; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-move"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- cursor: zoom-in; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-in"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- cursor: zoom-out; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-out"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- cursor: not-allowed; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-not-allowed"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- cursor: auto; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-auto"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> - </div> - -<!-- divider utilities --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- divider element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/div</span>> -<span class="com"><!-- divider element with text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider text-center"</span> <span class="atn">data-content</span>=<span class="atv">"OR"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- vertical divider element with text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column"</span>> - <span class="com"><!-- column content --></span> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider-vert"</span> <span class="atn">data-content</span>=<span class="atv">"OR"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column"</span>> - <span class="com"><!-- column content --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</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"><!-- display: block; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- display: inline; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- display: inline-block; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- display: flex; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- display: inline-flex; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-flex"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- display: none; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-hide"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- visibility: visible; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-visible"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- visibility: hidden; --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-invisible"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- hide text contents --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-hide"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- assistive text for screen reader --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-assistive"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- divider element --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- divider element with text --></span> +<span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- vertical divider element with text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span> + <span class="hljs-comment"><!-- column content --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span> + <span class="hljs-comment"><!-- column content --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- loading element --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading loading-lg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> - </div> - -<!-- loading --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- loading element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading loading-lg"</span>><<span class="tag">/div</span>> -</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"><!-- clear float --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> -<span class="com"><!-- float: left and right --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- position: relative, absolute and fixed --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"relative"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"absolute"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> -<span class="com"><!-- centered block --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> + <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"><!-- clear float --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"clearfix"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- float: left and right --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- position: relative, absolute and fixed --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"relative"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"absolute"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fixed"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- centered block --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="com"><!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"m-1"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"m-2"</span>><<span class="tag">/div</span>> -<span class="com"><!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-1"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-2"</span>><<span class="tag">/div</span>> -<span class="com"><!-- mx-1 {margin-left: 4px; margin-right: 4px;} --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mx-1"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mx-2"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"my-1"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"my-2"</span>><<span class="tag">/div</span>> -<span class="com"><!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"p-1"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"p-2"</span>><<span class="tag">/div</span>> -<span class="com"><!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-1"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-2"</span>><<span class="tag">/div</span>> -<span class="com"><!-- px-1 {padding-left: 4px; padding-right: 4px;} --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"px-1"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"px-2"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"py-1"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"py-2"</span>><<span class="tag">/div</span>> -</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"><!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- mx-1 {margin-left: 4px; margin-right: 4px;} --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- px-1 {padding-left: 4px; padding-right: 4px;} --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- rounded element --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rounded"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- circle element --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"circle"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- left-aligned text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- center-aligned text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- right-aligned text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- justified text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-justify"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<!-- shape utilities --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- rounded element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> -<span class="com"><!-- circle element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> -</code></pre> +<span class="hljs-comment"><!-- Lowercased text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-lowercase"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Uppercased text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-uppercase"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Capitalized text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-capitalize"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> - </div> +<span class="hljs-comment"><!-- Normal weight text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-normal"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Bold text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-bold"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Italicized text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-italic"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Larger text (120%) --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-large"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-ellipsis"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Overflow behavior: truncate the text --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-clip"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-comment"><!-- Text may be broken at arbitrary points --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-break"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> + </div> </div> - -<!-- text utilities --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- left-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> -<span class="com"><!-- center-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> -<span class="com"><!-- right-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- justified text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Lowercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Uppercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Capitalized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Normal weight text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Bold text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Italicized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Larger text (120%) --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-large"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Overflow behavior: truncate the text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Text may be broken at arbitrary points --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> -</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 |