diff options
Update the Docs completely
1 files changed, 108 insertions, 1025 deletions
| -rw-r--r-- | docs/experimentals.html | 1133 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index 47c51e9..94a7a9f 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -23,7 +23,8 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a></div> + <h2>SPECTRE</h2></a> + </div> <div class="docs-nav"> <div class="accordion-container"> <div class="accordion"> @@ -31,11 +32,14 @@ <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> + <li class="menu-item"><a href="getting-started/installation.html">Installation</a> + </li> + <li class="menu-item"><a href="getting-started/custom.html">Custom version</a> + </li> + <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a> + </li> + <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a> + </li> </ul> </div> </div> @@ -44,14 +48,22 @@ <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> + <li class="menu-item"><a href="elements/typography.html">Typography</a> + </li> + <li class="menu-item"><a href="elements/tables.html">Tables</a> + </li> + <li class="menu-item"><a href="elements/buttons.html">Buttons</a> + </li> + <li class="menu-item"><a href="elements/forms.html">Forms</a> + </li> + <li class="menu-item"><a href="elements/icons.html">Icons</a> + </li> + <li class="menu-item"><a href="elements/labels.html">Labels</a> + </li> + <li class="menu-item"><a href="elements/code.html">Code</a> + </li> + <li class="menu-item"><a href="elements/media.html">Media</a> + </li> </ul> </div> </div> @@ -60,9 +72,12 @@ <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#grid">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> + <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a> + </li> + <li class="menu-item"><a href="layout/responsive.html">Responsive</a> + </li> + <li class="menu-item"><a href="layout/navbar.html">Navbar</a> + </li> </ul> </div> </div> @@ -71,25 +86,44 @@ <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> + <li class="menu-item"><a href="components/accordions.html">Accordions</a> + </li> + <li class="menu-item"><a href="components/avatars.html">Avatars</a> + </li> + <li class="menu-item"><a href="components/badges.html">Badges</a> + </li> + <li class="menu-item"><a href="components/bars.html">Bars</a> + </li> + <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a> + </li> + <li class="menu-item"><a href="components/cards.html">Cards</a> + </li> + <li class="menu-item"><a href="components/chips.html">Chips</a> + </li> + <li class="menu-item"><a href="components/empty.html">Empty states</a> + </li> + <li class="menu-item"><a href="components/menu.html">Menu</a> + </li> + <li class="menu-item"><a href="components/modals.html">Modals</a> + </li> + <li class="menu-item"><a href="components/nav.html">Nav</a> + </li> + <li class="menu-item"><a href="components/pagination.html">Pagination</a> + </li> + <li class="menu-item"><a href="components/panels.html">Panels</a> + </li> + <li class="menu-item"><a href="components/popovers.html">Popovers</a> + </li> + <li class="menu-item"><a href="components/steps.html">Steps</a> + </li> + <li class="menu-item"><a href="components/tabs.html">Tabs</a> + </li> + <li class="menu-item"><a href="components/tiles.html">Tiles</a> + </li> + <li class="menu-item"><a href="components/toasts.html">Toasts</a> + </li> + <li class="menu-item"><a href="components/tooltips.html">Tooltips</a> + </li> </ul> </div> </div> @@ -98,14 +132,22 @@ <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> + <li class="menu-item"><a href="utilities/colors.html">Colors</a> + </li> + <li class="menu-item"><a href="utilities/cursors.html">Cursors</a> + </li> + <li class="menu-item"><a href="utilities/display.html">Display</a> + </li> + <li class="menu-item"><a href="utilities/divider.html">Divider</a> + </li> + <li class="menu-item"><a href="utilities/loading.html">Loading</a> + </li> + <li class="menu-item"><a href="utilities/position.html">Position</a> + </li> + <li class="menu-item"><a href="utilities/shapes.html">Shapes</a> + </li> + <li class="menu-item"><a href="utilities/text.html">Text</a> + </li> </ul> </div> </div> @@ -114,17 +156,28 @@ <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> + <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a> + </li> + <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a> + </li> + <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a> + </li> + <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a> + </li> + <li class="menu-item"><a href="experimentals/filters.html">Filters</a> + </li> + <li class="menu-item"><a href="experimentals/meters.html">Meters</a> + </li> + <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a> + </li> + <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a> + </li> + <li class="menu-item"><a href="experimentals/progress.html">Progress</a> + </li> + <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a> + </li> + <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a> + </li> </ul> </div> </div> @@ -141,976 +194,6 @@ Sometimes, there are some specific browsers targeted components. </p> </div> - <div class="container" id="autocomplete"> - <h3 class="s-title">Autocomplete<a class="anchor" href="#autocomplete" aria-hidden="true">#</a></h3> - <div class="docs-ad"> - <div class="hide-md text-center"> - <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - <div class="show-md text-center"> - <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - </div> - <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p> - <div class="docs-demo columns"> - <div class="column col-9 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input form-input"><span class="chip">Bruce Banner</span> - <div class="chip"><img class="avatar avatar-sm" src="img/avatar-1.png" alt="Avatar">Thor Odinson</div> - <div class="chip"><img class="avatar avatar-sm" src="img/avatar-4.png" alt="Avatar">Steve Rogers</div> - <div class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark - </div><span class="chip active">Natasha Romanoff</span> - <input class="form-input" type="text" placeholder=""> - </div> - </div> - </div> - </div> - <div class="column col-9 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input form-input is-focused"><span class="chip">Bruce Banner<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip"><img class="avatar avatar-sm" src="img/avatar-1.png" alt="Thor Odinson">Thor Odinson<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span> - <div class="has-icon-left"> - <input class="form-input" type="text" placeholder="" value="S"><i class="form-icon loading"></i> - </div> - </div> - <ul class="menu"> - <li class="menu-item"><a href="#autocomplete"> - <div class="tile tile-centered"> - <div class="tile-icon"><img class="avatar avatar-sm" src="img/avatar-4.png" alt="Steve Rogers"></div> - <div class="tile-content"> - <mark>S</mark>teve Roger - <mark>s</mark> - </div> - </div></a></li> - <li class="menu-item"><a href="#autocomplete"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> - </div> - <div class="tile-content">Tony - <mark>S</mark>tark - </div> - </div></a></li> - </ul> - </div> - </div> - </div> - </div> - <p>Add a container element with the <code>form-autocomplete</code> class. - There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. - You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state. - </p> - <p> - Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. - The autocomplete HTML structure is exampled below. - </p> - <div class="docs-demo columns"> - <div class="column col-9 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete autocomplete-oneline"> - <div class="form-autocomplete-input form-input"><span class="chip">Bruce Banner</span> - <div class="chip"><img class="avatar avatar-sm" src="img/avatar-1.png" alt="Avatar">Thor Odinson</div> - <div class="chip"><img class="avatar avatar-sm" src="img/avatar-4.png" alt="Avatar">Steve Rogers</div> - <div class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark - </div><span class="chip active">Natasha Romanoff</span> - <input class="form-input" type="text" placeholder=""> - </div> - </div> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<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> - - <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="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="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="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 items --></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">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> - <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 class="container" id="calendars"> - <h3 class="s-title">Calendars<a class="anchor" href="#calendars" aria-hidden="true">#</a></h3> - <div class="docs-ad docs-ad-sidebar text-center"> - <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> - </div> - <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p> - <div class="docs-demo columns"> - <div class="column col-4 col-md-12"> - <div class="calendar"> - <div class="calendar-nav navbar"> - <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-left"></i></button> - <div class="navbar-primary">March 2017</div> - <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-right"></i></button> - </div> - <div class="calendar-container"> - <div class="calendar-header"> - <div class="calendar-date">Sun</div> - <div class="calendar-date">Mon</div> - <div class="calendar-date">Tue</div> - <div class="calendar-date">Wed</div> - <div class="calendar-date">Thu</div> - <div class="calendar-date">Fri</div> - <div class="calendar-date">Sat</div> - </div> - <div class="calendar-body"> - <div class="calendar-date prev-month"> - <button class="date-item">26</button> - </div> - <div class="calendar-date prev-month"> - <button class="date-item">27</button> - </div> - <div class="calendar-date prev-month"> - <button class="date-item">28</button> - </div> - <div class="calendar-date"> - <button class="date-item">1</button> - </div> - <div class="calendar-date"> - <button class="date-item">2</button> - </div> - <div class="calendar-date"> - <button class="date-item">3</button> - </div> - <div class="calendar-date tooltip" data-tooltip="Today"> - <button class="date-item date-today">4</button> - </div> - <div class="calendar-date tooltip" data-tooltip="Not available"> - <button class="date-item" disabled="">5</button> - </div> - <div class="calendar-date"> - <button class="date-item">6</button> - </div> - <div class="calendar-date"> - <button class="date-item">7</button> - </div> - <div class="calendar-date tooltip" data-tooltip="You have appointments"> - <button class="date-item badge">8</button> - </div> - <div class="calendar-date"> - <button class="date-item">9</button> - </div> - <div class="calendar-date"> - <button class="date-item">10</button> - </div> - <div class="calendar-date"> - <button class="date-item">11</button> - </div> - <div class="calendar-date"> - <button class="date-item">12</button> - </div> - <div class="calendar-date"> - <button class="date-item">13</button> - </div> - <div class="calendar-date"> - <button class="date-item">14</button> - </div> - <div class="calendar-date"> - <button class="date-item">15</button> - </div> - <div class="calendar-date calendar-range range-start"> - <button class="date-item">16</button> - </div> - <div class="calendar-date calendar-range"> - <button class="date-item">17</button> - </div> - <div class="calendar-date calendar-range"> - <button class="date-item">18</button> - </div> - <div class="calendar-date calendar-range"> - <button class="date-item">19</button> - </div> - <div class="calendar-date calendar-range range-end"> - <button class="date-item">20</button> - </div> - <div class="calendar-date"> - <button class="date-item">21</button> - </div> - <div class="calendar-date"> - <button class="date-item">22</button> - </div> - <div class="calendar-date"> - <button class="date-item">23</button> - </div> - <div class="calendar-date"> - <button class="date-item">24</button> - </div> - <div class="calendar-date"> - <button class="date-item">25</button> - </div> - <div class="calendar-date"> - <button class="date-item">26</button> - </div> - <div class="calendar-date"> - <button class="date-item">27</button> - </div> - <div class="calendar-date"> - <button class="date-item">28</button> - </div> - <div class="calendar-date"> - <button class="date-item">29</button> - </div> - <div class="calendar-date"> - <button class="date-item">30</button> - </div> - <div class="calendar-date"> - <button class="date-item">31</button> - </div> - <div class="calendar-date next-month"> - <button class="date-item">1</button> - </div> - </div> - </div> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar"</span>></span> - <span class="hljs-comment"><!-- calendar navbar --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-nav navbar"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</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-left"</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 class="hljs-attr">class</span>=<span class="hljs-string">"navbar-primary"</span>></span>March 2017<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</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"</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 class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-header"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span>Sun<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">"calendar-date"</span>></span>Mon<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">"calendar-date"</span>></span>Tue<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">"calendar-date"</span>></span>Wed<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">"calendar-date"</span>></span>Thu<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">"calendar-date"</span>></span>Fri<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">"calendar-date"</span>></span>Sat<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">"calendar-body"</span>></span> - <span class="hljs-comment"><!-- calendar previous month --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>26<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">"calendar-date prev-month"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>28<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-comment"><!-- calendar current month --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>1<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">"calendar-date"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>2<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">"calendar-date"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>3<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-comment"><!-- calendar date: today --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item date-today"</span>></span>4<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-comment"><!-- calendar date: tooltip --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"You have appointments"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>5<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-comment"><!-- calendar date: not available --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Not available"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">""</span>></span>6<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-comment"><!-- calendar range --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-start"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>7<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">"calendar-date calendar-range"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>8<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">"calendar-date calendar-range range-end"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>9<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">"calendar-date"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>31<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-comment"><!-- calendar next month --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date next-month"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>></span>1<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-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="calendars-sizes">Calendars sizes<a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a></h4> - <div class="docs-demo columns"> - <div class="column col-12"> - <div class="calendar calendar-lg"> - <div class="calendar-nav navbar"> - <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-left"></i></button> - <div class="navbar-primary">March 2017</div> - <button class="btn btn-action btn-link btn-lg"><i class="icon icon-arrow-right"></i></button> - </div> - <div class="calendar-container"> - <div class="calendar-header"> - <div class="calendar-date">Sun</div> - <div class="calendar-date">Mon</div> - <div class="calendar-date">Tue</div> - <div class="calendar-date">Wed</div> - <div class="calendar-date">Thu</div> - <div class="calendar-date">Fri</div> - <div class="calendar-date">Sat</div> - </div> - <div class="calendar-body"> - <div class="calendar-date prev-month"> - <button class="date-item">26</button> - </div> - <div class="calendar-date prev-month"> - <button class="date-item">27</button> - <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Zhonghe Festival</a></div> - </div> - <div class="calendar-date prev-month"> - <button class="date-item">28</button> - </div> - <div class="calendar-date"> - <button class="date-item">1</button> - </div> - <div class="calendar-date"> - <button class="date-item">2</button> - </div> - <div class="calendar-date"> - <button class="date-item">3</button> - </div> - <div class="calendar-date tooltip" data-tooltip="Today"> - <button class="date-item date-today">4</button> - </div> - <div class="calendar-date"> - <button class="date-item" disabled="">5</button> - </div> - <div class="calendar-date"> - <button class="date-item">6</button> - </div> - <div class="calendar-date"> - <button class="date-item">7</button> - </div> - <div class="calendar-date tooltip" data-tooltip="You have appointments"> - <button class="date-item badge">8</button> - <div class="calendar-events"><a class="calendar-event bg-primary text-light" href="#calendars">Product launch event</a><a class="calendar-event bg-error text-light" href="#calendars">International Women's Day</a></div> - </div> - <div class="calendar-date"> - <button class="date-item">9</button> - </div> - <div class="calendar-date"> - <button class="date-item">10</button> - </div> - <div class="calendar-date"> - <button class="date-item">11</button> - </div> - <div class="calendar-date"> - <button class="date-item">12</button> - <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a></div> - </div> - <div class="calendar-date"> - <button class="date-item">13</button> - </div> - <div class="calendar-date"> - <button class="date-item">14</button> - </div> - <div class="calendar-date"> - <button class="date-item">15</button> - </div> - <div class="calendar-date calendar-range range-start"> - <button class="date-item">16</button> - </div> - <div class="calendar-date calendar-range"> - <button class="date-item">17</button> - </div> - <div class="calendar-date calendar-range"> - <button class="date-item">18</button> - </div> - <div class="calendar-date calendar-range"> - <button class="date-item">19</button> - </div> - <div class="calendar-date calendar-range range-end"> - <button class="date-item">20</button> - <div class="calendar-events"><a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a></div> - </div> - <div class="calendar-date"> - <button class="date-item">21</button> - </div> - <div class="calendar-date"> - <button class="date-item">22</button> - </div> - <div class="calendar-date"> - <button class="date-item">23</button> - </div> - <div class="calendar-date"> - <button class="date-item">24</button> - </div> - <div class="calendar-date"> - <button class="date-item">25</button> - </div> - <div class="calendar-date"> - <button class="date-item">26</button> - </div> - <div class="calendar-date"> - <button class="date-item">27</button> - </div> - <div class="calendar-date"> - <button class="date-item">28</button> - </div> - <div class="calendar-date"> - <button class="date-item">29</button> - </div> - <div class="calendar-date"> - <button class="date-item">30</button> - </div> - <div class="calendar-date"> - <button class="date-item">31</button> - </div> - <div class="calendar-date next-month disabled"> - <button class="date-item">1</button> - <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">April Fools' Day</a></div> - </div> - </div> - </div> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar calendar-lg"</span>></span> - <span class="hljs-comment"><!-- calendar navbar structure --></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>></span> - <span class="hljs-comment"><!-- calendar header structure --></span> - - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>></span> - <span class="hljs-comment"><!-- calendar date with events --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item active"</span>></span>20<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">"calendar-events"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-event bg-success text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#calendars"</span>></span>Spring Equinox<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> - <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="carousels"> - <h3 class="s-title">Carousels<a class="anchor" href="#carousels" aria-hidden="true">#</a></h3> - <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p> - <div class="docs-demo columns"> - <div class="column col-12"> - <div class="carousel"> - <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked=""> - <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden=""> - <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden=""> - <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden=""> - <div class="carousel-container"> - <figure class="carousel-item"> - <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label> - <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper"> - </figure> - <figure class="carousel-item"> - <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label> - <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper"> - </figure> - <figure class="carousel-item"> - <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label> - <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper"> - </figure> - <figure class="carousel-item"> - <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label> - <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper"> - </figure> - </div> - <div class="carousel-nav"> - <label class="nav-item text-hide c-hand" for="slide-1">1</label> - <label class="nav-item text-hide c-hand" for="slide-2">2</label> - <label class="nav-item text-hide c-hand" for="slide-3">3</label> - <label class="nav-item text-hide c-hand" for="slide-4">4</label> - </div> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel"</span>></span> - <span class="hljs-comment"><!-- carousel locator --></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-1"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-2"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-locator"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slide-4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"carousel-radio"</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">""</span>></span> - - <span class="hljs-comment"><!-- carousel container --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-container"</span>></span> - <span class="hljs-comment"><!-- carousel item --></span> - <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><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">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-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-arrow-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><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">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</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"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><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">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</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"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-prev btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><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">"item-next btn btn-action btn-lg"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</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"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">label</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive rounded"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-comment"><!-- carousel navigation --></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"carousel-nav"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-1"</span>></span>1<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">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-2"</span>></span>2<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">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-3"</span>></span>3<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">"nav-item text-hide c-hand"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"slide-4"</span>></span>4<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">div</span>></span></code></pre> - </div> - <div class="container" id="comparison"> - <h3 class="s-title">Comparison sliders<a class="anchor" href="#comparison" aria-hidden="true">#</a></h3> - <div class="docs-ad"> - <div class="hide-md text-center"> - <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - <div class="show-md text-center"> - <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - </div> - <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p> - <div class="docs-demo columns"> - <div class="column col-12"> - <div class="comparison-slider"> - <figure class="comparison-before"><img class="rounded" src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper"> - <div class="comparison-label">Before</div> - </figure> - <figure class="comparison-after"><img class="filter-grayscale rounded" src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper"> - <div class="comparison-label">After</div> - <textarea class="comparison-resizer" readonly=""></textarea> - </figure> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<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> - - <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">Filters<a class="anchor" href="#filters" aria-hidden="true">#</a></h3> - <p>Filters are CSS only content filters.</p> - <div class="docs-demo columns"> - <div class="column col-12"> - <div class="filter"> - <input class="filter-tag" id="tag-0" type="radio" name="filter-radio" hidden="" checked=""> - <input class="filter-tag" id="tag-1" type="radio" name="filter-radio" hidden=""> - <input class="filter-tag" id="tag-2" type="radio" name="filter-radio" hidden=""> - <input class="filter-tag" id="tag-3" type="radio" name="filter-radio" hidden=""> - <input class="filter-tag" id="tag-4" type="radio" name="filter-radio" hidden=""> - <div class="filter-nav"> - <label class="chip" for="tag-0">All</label> - <label class="chip" for="tag-1">Action</label> - <label class="chip" for="tag-2">Roleplaying</label> - <label class="chip" for="tag-3">Shooter</label> - <label class="chip" for="tag-4">Sports</label> - </div> - <div class="filter-body columns"> - <div class="column col-4 filter-item" data-tag="tag-2"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Fallout 4</div> - <div class="card-subtitle">Roleplaying</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Halo 5</div> - <div class="card-subtitle">Shooter</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-1"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Quantum Break</div> - <div class="card-subtitle">Action</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-4"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Forza Horizon 3</div> - <div class="card-subtitle">Sports</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-2"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Final Fantasy XV</div> - <div class="card-subtitle">Roleplaying</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-4"> - <div class="card"> - <div class="card-header"> - <div class="card-title">NBA 2K17</div> - <div class="card-subtitle">Sports</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Battlefield 1</div> - <div class="card-subtitle">Shooter</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-1"> - <div class="card"> - <div class="card-header"> - <div class="card-title">GTA V</div> - <div class="card-subtitle">Action</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-4"> - <div class="card"> - <div class="card-header"> - <div class="card-title">FIFA 17</div> - <div class="card-subtitle">Sports</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Overwatch</div> - <div class="card-subtitle">Shooter</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Titanfall 2</div> - <div class="card-subtitle">Shooter</div> - </div> - </div> - </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Gears of Wars 4</div> - <div class="card-subtitle">Shooter</div> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags. - <code>tag-0</code> is reserved for clearing filter (or showing all). - You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<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="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> - - <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="container" id="meters"> - <h3 class="s-title">Meters<a class="anchor" href="#meters" aria-hidden="true">#</a></h3> - <p>Meters represent the value within the known range.</p> - <div class="docs-demo columns"> - <div class="column col-3 col-xs-12"> - <meter class="meter" value="20" min="0" max="100"></meter> - </div> - <div class="column col-3 col-xs-12"> - <meter class="meter" value="60" min="0" low="30" optimum="60" high="80" max="100"></meter> - </div> - <div class="column col-3 col-xs-12"> - <meter class="meter" value="85" min="0" low="30" high="80" max="100"></meter> - </div> - <div class="column col-3 col-xs-12"> - <meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- 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 class="container" id="off-canvas"> - <h3 class="s-title">Off-canvas<a class="anchor" href="#off-canvas" aria-hidden="true">#</a></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="docs-demo columns"> - <div class="column"> - <div class="off-canvas off-canvas-sidebar-show"><a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-demo"><i class="icon icon-menu"></i></a> - <div class="off-canvas-sidebar flex-centered" id="sidebar-demo"><span>Sidebar</span></div><a class="off-canvas-overlay" href="#close"></a> - <div class="off-canvas-content"> - <div class="content"> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - </div> - </div> - </div> - </div> - </div> - <p>You can open the sidebar by adding the class <code>active</code> to <code>off-canvas-sidebar</code>. - And remove the <code>active</code> to close it. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<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> - - <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> - - <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> - - <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 class="container" id="parallax"> - <h3 class="s-title">Parallax<a class="anchor" href="#parallax" aria-hidden="true">#</a></h3> - <div class="docs-ad"> - <div class="hide-md text-center"> - <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - <div class="show-md text-center"> - <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - </div> - <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> - <div class="docs-demo columns"> - <div class="column col-sm-12 col-8 col-mx-auto"> - <div class="parallax"> - <div class="parallax-top-left" tabindex="1"></div> - <div class="parallax-top-right" tabindex="2"></div> - <div class="parallax-bottom-left" tabindex="3"></div> - <div class="parallax-bottom-right" tabindex="4"></div> - <div class="parallax-content"> - <div class="parallax-front"> - <h2>tvOS parallax demo</h2> - </div> - <div class="parallax-back"><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper"></div> - </div> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<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">Progress<a class="anchor" href="#progress" aria-hidden="true">#</a></h3> - <p>The Progress indicates the progress completion of a task.</p> - <div class="docs-demo columns"> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="75" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="50" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="25" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" max="100"></progress> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<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">Sliders<a class="anchor" href="#sliders" aria-hidden="true">#</a></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="docs-demo columns"> - <div class="column col-6 col-xs-12"> - <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);"> - </div> - <div class="column col-6 col-xs-12"> - <input class="slider" type="range" min="0" max="100" value="50" disabled=""> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- 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">Timelines<a class="anchor" href="#timelines" aria-hidden="true">#</a></h3> - <p>Timelines are ordered sequences of activities.</p> - <div class="docs-demo columns"> - <div class="column col-9 col-sm-12"> - <div class="timeline"> - <div class="timeline-item" id="timeline-example-1"> - <div class="timeline-left"><a class="timeline-icon tooltip" href="#timeline-example-1" data-tooltip="March 2016"></a></div> - <div class="timeline-content"> - <div class="tile"> - <div class="tile-content"> - <p class="tile-subtitle">March 2016</p> - <p class="tile-title">Initial commit</p> - </div> - </div> - </div> - </div> - <div class="timeline-item" id="timeline-example-2"> - <div class="timeline-left"><a class="timeline-icon icon-lg tooltip" href="#timeline-example-2" data-tooltip="February 2017"><i class="icon icon-check"></i></a></div> - <div class="timeline-content"> - <div class="tile"> - <div class="tile-content"> - <p class="tile-subtitle">February 2017</p> - <p class="tile-title">New Documents experience</p> - <p class="tile-title"><a href="components.html#bars">Bars</a>: represent the progress of a task</p> - <p class="tile-title"><a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps</p> - <p class="tile-title"><a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks</p> - </div> - <div class="tile-action"> - <button class="btn">View</button> - </div> - </div> - </div> - </div> - <div class="timeline-item" id="timeline-example-3"> - <div class="timeline-left"><a class="timeline-icon icon-lg tooltip" href="#timeline-example-3" data-tooltip="March 2017"><i class="icon icon-check"></i></a></div> - <div class="timeline-content"> - <div class="tile"> - <div class="tile-content"> - <p class="tile-subtitle">March 2017</p> - <p class="tile-title"><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</p> - <p class="tile-title"><a href="components.html#popovers">Popovers</a>: small overlay content containers</p> - <p class="tile-title"><a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display</p> - <p class="tile-title"><a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images</p> - </div> - <div class="tile-action"> - <button class="btn">View</button> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<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="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="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> <div class="docs-footer container grid-lg" id="copyright"> <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</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> |