diff options
1 files changed, 1625 insertions, 0 deletions
| -rw-r--r-- | docs/components.html | 1625 |
diff --git a/docs/components.html b/docs/components.html new file mode 100644 index 0000000..50f4f5e --- /dev/null +++ b/docs/components.html @@ -0,0 +1,1625 @@ +<!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" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="author" content="https://github.com/picturepan2/" /> + <title>Components - Spectre.css</title> + <link rel="stylesheet" href="../dist/spectre.css" /> + <link rel="stylesheet" href="css/docs.min.css" /> + <link rel="stylesheet" href="font/style.css" /> +</head> +<body> + <section class="section section-header bg-grey"> + <section class="grid-header container grid-960"> + <nav class="navbar"> + <section class="navbar-section"> + <a href="index.html" class="navbar-brand">Spectre.css</a> + <a href="index.html" class="btn btn-link">Docs</a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub</a> + </section> + <section class="navbar-section show-xs"> + <a href="#sidebar" class="btn btn-lg btn-link btn-action"><i class="icon icon-menu"></i></a> + </section> + </nav> + </section> + </section> + + <section class="container grid-960"> + <section class="columns"> + <div id="sidebar" class="docs-sidebar column col-3 col-sm-12"> + <ul class="docs-nav nav"> + <li class="nav-item"> + <a href="index.html">Getting started</a> + </li> + <li class="nav-item"> + <a href="elements.html">Elements</a> + </li> + <li class="nav-item"> + <a href="layout.html">Layout</a> + </li> + <li class="nav-item active"> + <a href="components.html">Components</a> + <ul class="nav"> + <li class="nav-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="nav-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="nav-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="nav-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="nav-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="nav-item"> + <a href="components.html#dropdowns">Dropdowns</a> + </li> + <li class="nav-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="nav-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="nav-item"> + <a href="components.html#navigation">Navigation</a> + </li> + <li class="nav-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="nav-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="nav-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="nav-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="utilities.html">Utilities</a> + </li> + </ul> + </div> + <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> + + <div class="docs-content column col-9 col-sm-12"> + <section id="autocomplete" class="container"> + <header class="text-center"><h3>Autocomplete</h3></header> + <section class="notes"> + <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p> + </section> + <div class="columns"> + <div class="column col-9 col-xs-12"> + <div class="form-group"> + <div class="form-autocomplete"> + <div class="form-autocomplete-input"> + <div class="chip"> + Bruce Banner + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar" /> + Thor Odinson + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <img src="img/avatar-4.png" class="avatar" /> + Steve Rogers + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure> + Tony Stark + <button class="btn btn-clear"></button> + </div> + <div class="chip active"> + Natasha Romanoff + <button class="btn btn-clear"></button> + </div> + <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 is-focused"> + <div class="chip"> + Bruce Banner + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar" alt="Thor Odinson"/> + Thor Odinson + <button class="btn btn-clear"></button> + </div> + <input class="form-input" type="text" placeholder="typing here" value="S" /> + </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> + <a href="#autocomplete"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #A2A8E1;"></figure> + </div> + <div class="tile-content"> + Tony <mark>S</mark>tark + </div> + </div> + </a> + </li> + </ul> + </div> + </div> + </div> + </div> + <section class="notes"> + <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the class <code>is-focused</code> 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> + </section> + +<!-- autocomplete example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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"</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"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span> /> + Thor Odinson + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> + <<span class="tag">/div</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="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"</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>> + 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">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-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> <span class="atn">alt</span>=<span class="atv">"Yan Zhu"</span> /> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> + Yan Zhu + <<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> + </section> + + <section id="avatars" class="container"> + <header class="text-center"><h3>Avatars</h3></header> + <section class="notes"> + <p><strong>Avatars</strong> are user profile pictures. </p> + </section> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"> + <img src="img/avatar-1.png" /> + </figure> + <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"> + <img src="img/avatar-2.png" /> + </figure> + <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"> + <img src="img/avatar-3.png" /> + </figure> + <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"> + <img src="img/avatar-4.png" /> + </figure> + <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"> + <img src="img/avatar-5.png" /> + </figure> + </div> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure> + <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"></figure> + <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure> + <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure> + <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure> + </div> + </div> + + <section class="notes"> + <p>Add the class <code>avatar</code> 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 class <code>avatar</code> and avatar size class to <div> element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p> + </section> + + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" /> + <img src="img/avatar-2.png" class="avatar-icon" /> + </figure> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" /> + <img src="img/avatar-3.png" class="avatar-icon" /> + </figure> + <figure class="avatar"> + <img src="img/avatar-3.png" /> + <img src="img/avatar-4.png" class="avatar-icon" /> + </figure> + <figure class="avatar avatar-sm"> + <img src="img/avatar-4.png" /> + <img src="img/avatar-5.png" class="avatar-icon" /> + </figure> + <figure class="avatar avatar-xs"> + <img src="img/avatar-5.png" /> + <img src="img/avatar-1.png" class="avatar-icon" /> + </figure> + </div> + </div> + +<!-- avatars example --> +<pre> +<code class="code lang-html" data-lang="HTML"><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="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="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="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: #5764c6;"</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: #5764c6;"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> /> +<<span class="tag">/figure</span>></code> +</pre> + </section> + + <section id="badges" class="container"> + <header class="text-center"><h3>Badges</h3></header> + <section class="notes"> + <p><strong>Badges</strong> are often used as unread number indicators.</p> + </section> + <div class="columns"> + <div class="column col-xs-6"> + <span class="badge" data-badge=""> + Notifications + </span> + </div> + <div class="column col-xs-6"> + <span class="badge" data-badge="1"> + Notifications + </span> + </div> + <div class="column col-xs-6"> + <span class="badge" data-badge="99"> + Notifications + </span> + </div> + <div class="column col-xs-6"> + <span class="badge" data-badge="999"> + Notifications + </span> + </div> + </div> + <section class="notes"> + <p>Add the class <code>badge</code> to non self closing elements. And add the attribute <code>data-badge</code> 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 empty, the badge will appear as a dot.</p> + </section> + +<!-- badges example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">""</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">"99"</span>> + Notifications +<<span class="tag">/span</span>></code> +</pre> + </section> + + <section id="cards" class="container"> + <header class="text-center"><h3>Cards</h3></header> + <section class="notes"> + <p><strong>Cards</strong> are flexible content containers.</p> + </section> + <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" /> + </div> + <div class="card-header"> + <div class="card-title">Microsoft</div> + <div class="card-meta">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> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Apple</div> + <div class="card-meta">Hardware and software</div> + </div> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite.jpg" /> + </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 class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Google</div> + <div class="card-meta">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" /> + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Search</a> + <a href="#cards" class="btn btn-link">Share</a> + </div> + </div> + </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.jpg" /> + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Buy</a> + <a href="#cards" class="btn btn-link">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="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Apple</div> + <div class="card-meta">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/osx-yosemite.jpg" /> + </div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite.jpg" /> + </div> + <div class="card-header"> + <button class="btn btn-primary float-right"><i class="icon icon-playlist_add"></i></button> + <div class="card-title">Google I/O</div> + <div class="card-meta">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> + <section class="notes"> + <p>Add a container element with the class <code>card</code>. And add child elements with the class name <code>card-image</code>, <code>card-header</code>, <code>card-content</code> and/or <code>card-footer</code>. The <code>card-image</code> can be placed in any position. </p> + </section> +<!-- cards example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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">h4</span> <span class="atn">class</span>=<span class="atv">"card-title"</span>>Microsoft<<span class="tag">/h4</span>> + <<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">"card-meta"</span>>Software and hardware<<span class="tag">/h6</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> + To make a contribution to the world by making tools for the mind that advance humankind. + <<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> + </section> + + <section id="chips" class="container"> + <header class="text-center"><h3>Chips</h3></header> + <section class="notes"> + <p><strong>Chips</strong> are complex entities in small blocks. </p> + </section> + <div class="columns"> + <div class="column col-12"> + <div class="chip"> + Crime + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + Drama + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + Biography + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + Mystery + <button class="btn btn-clear"></button> + </div> + </div> + <div class="column col-12"> + <div class="chip"> + <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure> + Tony Stark + <span class="chip-meta">Iron Man</span> + </div> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar" /> + Thor Odinson + </div> + <div class="chip"> + <img src="img/avatar-4.png" class="avatar" /> + Steve Rogers + <span class="chip-meta">American Captain</span> + </div> + </div> + </div> + + <section class="notes"> + <p>Add a container element with the class <code>chip</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> + </section> + +<!-- chips example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + Crime + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> +<<span class="tag">/div</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"</span> /> + Yan Zhu + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> +<<span class="tag">/div</span>></code> +</pre> + + </section> + + <section id="dropdowns" class="container"> + <header class="text-center"><h3>Dropdowns</h3></header> + <section class="notes"> + <p>A <strong>dropdown</strong> is a combination of buttons and menus.</p> + </section> + <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-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-primary dropdown-toggle" tabindex="0">dropdown button <i class="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 class="column col-xs-12"> + <div class="dropdown"> + <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="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> + <section class="notes"> + <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 class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. </p> + </section> + <section class="notes"> + <p>Also, you can implement your JS to interact with the dropdown menus by adding the class <code>active</code> to the <code>dropdown</code>.</p> + </section> +<!-- dropdowns example --> +<pre> +<code class="code lang-html" data-lang="HTML"><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-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>> + <<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>>Slack<<span class="tag">/a</span>> + <<span class="tag">/li</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>>Hipchat<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">/ul</span>> +<<span class="tag">/div</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>> + 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-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>> + ... + <<span class="tag">/ul</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>></code> +</pre> + </section> + + <section id="menus" class="container"> + <header class="text-center"><h3>Menus</h3></header> + <section class="notes"> + <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> + </section> + <div class="columns"> + <div class="column 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" /> + </div> + <div class="tile-content"> + Steve Rogers + </div> + </div> + </li> + <li class="divider"></li> + <li class="menu-item"> + <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-xs-12"> + <ul class="menu"> + <li class="menu-header"> + <span class="menu-header-text"> + Go to + </span> + </li> + <li class="menu-item"> + <a href="#menus"> + <i class="icon icon-link"></i> Slack + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + <i class="icon icon-link"></i> Hipchat + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + <i class="icon icon-link"></i> Skype + </a> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> + </section> + +<!-- menus example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> + <span class="com"><!-- menu header --></span> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-header"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> + Go to + <<span class="tag">/span</span>> + <<span class="tag">/li</span>> + <span class="com"><!-- menu item --></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="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>> Hipchat + <<span class="tag">/a</span>> + <<span class="tag">/li</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>> Skype + <<span class="tag">/a</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="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>> Settings + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>></code> +</pre> + </section> + + <section id="modals" class="container"> + <header class="text-center"><h3>Modals</h3></header> + <section class="notes"> + <p><strong>Modals</strong> are flexible dialog prompts.</p> + </section> + <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"> + <div class="modal-overlay"></div> + <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">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"> + <a href="#modals" class="btn btn-link">Close</a> + <button class="btn btn-primary">Share</button> + </div> + </div> + </div> + </div> + </div> + <section class="notes"> + <p>Add a container element with the class <code>modal</code>. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the class name <code>modal-header</code>, <code>modal-content</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 class <code>active</code> to the <code>modal</code> container</p> + </section> +<!-- modals example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</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">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-title"</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>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Close<<span class="tag">/button</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Share<<span class="tag">/button</span>> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>></code> +</pre> + + <header class="text-center"><h4>Modal sizes</h4></header> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="modal-temp modal-sm"> + <div class="modal-overlay"></div> + <div class="modal-container" role="document"> + <div class="modal-header"> + <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> + <div class="modal-title">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-link">Close</button> + <button class="btn btn-primary">Share</button> + </div> + </div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="modal-temp modal-sm"> + <div class="modal-overlay"></div> + <div class="modal-container" role="document"> + <div class="modal-header"> + <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> + <div class="modal-title">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" /> + </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> + <div class="modal-footer"> + <button class="btn btn-link">Close</button> + <button class="btn btn-primary">Submit</button> + </div> + </div> + </div> + </div> + </div> + <section class="notes"> + <p>Add the class <code>modal-sm</code> for a smaller modal dialog. </p> + </section> +<!-- modals example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</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> + </section> + + <section id="navigation" class="container"> + <header class="text-center"><h3>Navigation</h3></header> + <section class="notes"> + <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and navs.</p> + </section> + <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header> + <div class="columns"> + <div class="column col-6 col-sm-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs"> + Profile + </a> + </li> + <li class="breadcrumb-item"> + Change avatar + </li> + </ul> + </div> + <div class="column col-6 col-sm-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs"> + Home + </a> + </li> + <li class="breadcrumb-item"> + Search result: + <a href="#breadcrumbs"> + Spectre + </a> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>Add a container element with the class <code>breadcrumb</code>. And add child elements with the classname <code>breadcrumb-item</code>.</p> + </section> + +<!-- breadcrumbs example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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>> + Profile + <<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>> + Change avatar + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>></code> +</pre> + + <header id="tabs" class="text-center"><h4>Tabs</h4></header> + <div class="columns"> + <div class="column col-6 col-xs-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-xs-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> + <section class="notes"> + <p>Add a container element with the class <code>tab</code>. And add child elements with the classname <code>tab-item</code>. You can add the class <code>tab-block</code> for a full-width tab. The <code>tab-item</code> or its child <code><a></code> with the class <code>active</code> will be highlighted.</p> + </section> +<!-- tabs example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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-xs-12"> + <ul class="tab"> + <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 class="column col-xs-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> + + <section class="notes"> + <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> + </section> +<!-- tabs with badges example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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>></code> +</pre> + + <div class="columns"> + <div class="column col-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> + <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> + <section class="notes"> + <p>You could add a search box or buttons inside a tab. Add the class <code>tab-action</code> to the <code>tab-item</code>. </p> + </section> +<!-- tabs with badges example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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> <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">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> + + <header id="pagination" class="text-center"><h4>Pagination</h4></header> + <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"> + <a href="#pagination" disabled 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> + <section class="notes"> + <p>Add a container element with the class <code>pagination</code>. And add child elements with the classname <code>page-item</code>. The <code>page-item</code> with the class <code>active</code> will be highlighted.</p> + </section> +<!-- pagination example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">disabled</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"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Getting started</h3> + </a> + </li> + <li class="page-item page-next"> + <a href="#pagination"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Layout</h3> + </a> + </li> + </ul> + </div> + </div> + <div class="notes"> + <p>You could use previous and next pagination to navigate. </p> + </div> +<!-- pagination example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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">p</span> <span class="atn">class</span>=<span class="atv">"page-item-meta"</span>>Previous<<span class="tag">/p</span>> + <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Getting started<<span class="tag">/h3</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">p</span> <span class="atn">class</span>=<span class="atv">"page-item-meta"</span>>Next<<span class="tag">/p</span>> + <<span class="tag">h3</span> <span class="atn">class</span>=<span class="atv">"page-item-title"</span>>Layout<<span class="tag">/h3</span>> + <<span class="tag">/a</span>> + <<span class="tag">/li</span>></code> +</pre> + + <header id="navs" class="text-center"><h4>Navs</h4></header> + <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> + <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> + </div> + </div> + <section class="notes"> + <p>Add a container element with the class <code>nav</code>. And add child elements with the classname <code>nav-item</code>. The <code>nav-item</code> with the class <code>active</code> will be highlighted.</p> + </section> +<!-- navs example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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> + </section> + + <section id="steps" class="container"> + <header class="text-center"><h3>Steps</h3></header> + <section class="notes"> + <p><strong>Steps</strong> are progress indicators of a sequence of task steps.</p> + </section> + <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> + <section class="notes"> + <p>Add a container element with the class <code>step</code>. And add child elements with the classname <code>step-item</code>. The <code>step-item</code> with the class <code>active</code> will be highlighted and indicate the current state of progress.</p> + </section> +<!-- steps example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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> + </section> + + <section id="tiles" class="container"> + <header class="text-center"><h3>Tiles</h3></header> + <section class="notes"> + <p><strong>Tiles</strong> are repeatable or embeddable information blocks.</p> + </section> + <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" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">The Avengers</p> + <p>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> + </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" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">The S.H.I.E.L.D.</p> + <p>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> + <section class="notes"> + <p>Add a container with the class <code>tile</code>. And add child elements with the class name <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code>. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> + <p>There are <code>tile-title</code> and <code>tile-meta</code> classes for title and meta text styles.</p> + </section> + +<!-- tiles example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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-explore 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>>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> + + <section class="notes"> + <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> + <p>Add the class <code>tile-centered</code> 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> + </section> + <div class="columns"> + <div class="column col-6 col-sm-12"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-explore centered"></i> + </div> + </div> + <div class="tile-content"> + <div class="tile-title text-ellipsis">spectre-docs.pdf</div> + <div class="tile-meta text-ellipsis">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> + </div> + </div> + </div> + +<!-- tiles example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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-explore 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 text-ellipsis"</span>>spectre-docs.pdf<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-meta text-ellipsis"</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> + </section> + + <section id="toasts" class="container"> + <header class="text-center"><h3>Toasts</h3></header> + <section class="notes"> + <p><strong>Toasts</strong> are used to show alert or information to users.</p> + </section> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <div class="toast"> + <button class="btn btn-clear float-right"></button> + <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. + </div> + </div> + </div> + <section class="notes"> + <p>Add a container element with the class <code>toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code>btn-clear</code> if you need. </p> + </section> + <div class="columns"> + <div class="column col-sm-12"> + <div class="toast toast-primary"> + <i class="icon icon-error_outline"></i> Toast primary + </div> + </div> + <div class="column col-sm-12"> + <div class="toast toast-success"> + <i class="icon icon-error_outline"></i> Toast success + </div> + </div> + <div class="column col-sm-12"> + <div class="toast toast-danger"> + <i class="icon icon-error_outline"></i> Toast danger + </div> + </div> + </div> + <section class="notes"> + <p>And you can add the class <code>toast-primary</code>, <code>toast-success</code> or <code>toast-danger</code> for additional toast colors.</p> + </section> + +<!-- toasts example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</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>> + +<<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>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-error_outline"</span>><<span class="tag">/i</span>> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +<<span class="tag">/div</span>></code> +</pre> + </section> + + <section id="tooltips" class="container"> + <header class="text-center"><h3>Tooltips</h3></header> + <section class="notes"> + <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p> + </section> + <div class="columns text-center"> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip" data-tooltip="Tooltip text" data-tooltip-pos="top">top tooltip</button> + </div> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Tooltip text">right tooltip</button> + </div> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Tooltip text">bottom tooltip</button> + </div> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Tooltip text">left tooltip</button> + </div> + </div> + <section class="notes"> + <p>Tooltip component is built entirely in CSS.</p> + <p>Add the class <code>tooltip</code> and the attribute <code>data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p> + </section> + +<!-- tooltips example --> +<pre> +<code class="code lang-html" data-lang="HTML"><<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> + </section> + + <section class="container"> + <div class="divider"></div> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="layout.html"> + <p class="page-item-meta">Previous</p> + <h3 class="page-item-title">Layout</h3> + </a> + </li> + <li class="page-item page-next"> + <a href="utilities.html"> + <p class="page-item-meta">Next</p> + <h3 class="page-item-title">Utilities</h3> + </a> + </li> + </ul> + </section> + </div> + </section> + </section> + + <footer class="bg-grey"> + <section id="copyright" class="grid-footer container grid-960"> + <p> + <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | Version <span class="version"></span> + </p> + <p>Designed and built with ♥ 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> + </section> + </footer> + <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> |