diff options
1 files changed, 116 insertions, 122 deletions
| -rw-r--r-- | docs/components.html | 238 |
diff --git a/docs/components.html b/docs/components.html index 7089ade..8ea64c9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -12,24 +12,19 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <div class="section section-header bg-gray"> - <div class="grid-header container grid-960"> - <nav class="navbar"> - <div class="navbar-section"> - <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a> - <a href="index.html" class="navbar-brand">Spectre.css Docs</a> + <div class="container"> + <div class="columns"> + <div id="sidebar" class="s-sidebar"> + <div class="s-brand"> + <a href="index.html" class="s-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css" /> + <h2>Spectre.css</h2> + </a> </div> - <div class="navbar-section"> + <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> - </nav> - </div> - </div> - - <div class="docs-container container grid-960"> - <div class="columns"> - <div id="sidebar" class="docs-sidebar column col-sm-12"> - <div class="docs-nav"> + <div class="s-nav"> <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> @@ -39,19 +34,19 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="index.html#introduction">Introduction</a> + <a href="getting-started.html#introduction">Introduction</a> </li> <li class="menu-item"> - <a href="index.html#installation">Installation</a> + <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="index.html#compiling">Custom version</a> + <a href="getting-started.html#compiling">Custom version</a> </li> <li class="menu-item"> - <a href="index.html#browsers">Browser support</a> + <a href="getting-started.html#browsers">Browser support</a> </li> <li class="menu-item"> - <a href="index.html#whatsnew">What's new</a> + <a href="getting-started.html#whatsnew">What's new</a> </li> </ul> </div> @@ -252,11 +247,11 @@ </div> <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="docs-content column col-sm-12"> + <div class="s-content"> <div id="accordions" class="container"> - <h3 class="text-center"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> + <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> <div class="notes"> - <p><strong>Accordions</strong> are used to toggle sections of content.</p> + <p>Accordions are used to toggle sections of content.</p> </div> <div class="columns"> <div class="column col-6 col-md-12"> @@ -405,9 +400,9 @@ </div> <div id="autocomplete" class="container"> - <h3 class="text-center"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> + <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> <div class="notes"> - <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p> + <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p> </div> <div class="columns"> <div class="column col-9 col-xs-12"> @@ -532,9 +527,9 @@ </div> <div id="avatars" class="container"> - <h3 class="text-center"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> + <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> <div class="notes"> - <p><strong>Avatars</strong> are user profile pictures. </p> + <p>Avatars are user profile pictures. </p> </div> <div class="columns"> <div class="column col-6 col-xs-12"> @@ -613,9 +608,9 @@ </div> <div id="badges" class="container"> - <h3 class="text-center"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> + <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> <div class="notes"> - <p><strong>Badges</strong> are often used as unread number indicators.</p> + <p>Badges are often used as unread number indicators.</p> </div> <div class="columns"> <div class="column col-3 col-xs-6"> @@ -689,9 +684,9 @@ </div> <div id="bars" class="container"> - <h3 class="text-center"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> + <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> <div class="notes"> - <p><strong>Bars</strong> represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p> + <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p> </div> <div class="columns"> <div class="column col-8 col-xs-12"> @@ -734,7 +729,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="text-center">Slider bars</h4> + <h4 class="s-subtitle">Slider bars</h4> <div class="columns"> <div class="column col-8 col-xs-12"> <div class="bar bar-slider"> @@ -784,9 +779,26 @@ </div> <div id="breadcrumbs" class="container"> - <h3 class="text-center"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> + <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> + <div class="notes"> + <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> + </div> <div class="columns"> - <div class="column col-6 col-md-12"> + <div class="column col-12"> + <ul class="breadcrumb" role="navigation"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings + </a> + </li> + </ul> + </div> + <div class="column col-12"> <ul class="breadcrumb" role="navigation"> <li class="breadcrumb-item"> <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> @@ -794,27 +806,32 @@ </a> </li> <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Profile"> - Profile + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings </a> </li> <li class="breadcrumb-item"> - <a href="#breadcrumbs"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar"> Change avatar </a> </li> </ul> </div> - <div class="column col-6 col-md-12"> + <div class="column col-12"> <ul class="breadcrumb"> <li class="breadcrumb-item"> - <a href="#breadcrumbs"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> Home </a> </li> <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings + </a> + </li> + <li class="breadcrumb-item"> Search result: - <a href="#breadcrumbs"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre"> Spectre </a> </li> @@ -828,19 +845,13 @@ <!-- breadcrumbs example --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Home - <<span class="tag">/a</span>> + <<span class="tag">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">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Settings<<span class="tag">/a</span>> <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Change avatar - <<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Change avatar<<span class="tag">/a</span>> <<span class="tag">/li</span>> <<span class="tag">/ul</span>> </code></pre> @@ -848,9 +859,9 @@ </div> <div id="cards" class="container"> - <h3 class="text-center"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> + <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> <div class="notes"> - <p><strong>Cards</strong> are flexible content containers.</p> + <p>Cards are flexible content containers.</p> </div> <div class="columns"> <div class="column col-6 col-xs-12"> @@ -859,7 +870,7 @@ <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan" /> </div> <div class="card-header"> - <div class="card-title">Microsoft</div> + <div class="card-title h5">Microsoft</div> <div class="card-subtitle">Software and hardware</div> </div> <div class="card-body"> @@ -873,7 +884,7 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <div class="card-title">Apple</div> + <div class="card-title h5">Apple</div> <div class="card-subtitle">Hardware and software</div> </div> <div class="card-image"> @@ -893,19 +904,16 @@ </div> <div class="column col-6 col-xs-12"> <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra" /> + </div> <div class="card-header"> - <div class="card-title">Google</div> + <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button> + <div class="card-title h5">Google I/O</div> <div class="card-subtitle">Software and hardware</div> </div> <div class="card-body"> - Organize the world’s information and make it universally accessible and useful. - </div> - <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"/> - </div> - <div class="card-footer"> - <a href="#cards" class="btn btn-primary">Search</a> - <a href="#cards" class="btn btn-link">Share</a> + An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. </div> </div> </div> @@ -926,7 +934,7 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-header"> - <div class="card-title">Apple</div> + <div class="card-title h5">Apple</div> <div class="card-subtitle">Hardware and software</div> </div> <div class="card-body"> @@ -939,16 +947,19 @@ </div> <div class="column col-6 col-xs-12"> <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra" /> - </div> <div class="card-header"> - <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button> - <div class="card-title">Google I/O</div> + <div class="card-title h5">Google</div> <div class="card-subtitle">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. + Organize the world’s information and make it universally accessible and useful. + </div> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"/> + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Search</a> + <a href="#cards" class="btn btn-link">Share</a> </div> </div> </div> @@ -963,8 +974,8 @@ <<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-subtitle"</span>>Software and hardware<<span class="tag">/h6</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-title h5"</span>>Microsoft<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-subtitle"</span>>Software and hardware<<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> Empower every person and every organization on the planet to achieve more. @@ -978,9 +989,9 @@ </div> <div id="chips" class="container"> - <h3 class="text-center"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> + <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> <div class="notes"> - <p><strong>Chips</strong> are complex entities in small blocks. </p> + <p>Chips are complex entities in small blocks. </p> </div> <div class="columns"> <div class="column col-12"> @@ -1036,9 +1047,9 @@ </div> <div id="menus" class="container"> - <h3 class="text-center"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> + <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> <div class="notes"> - <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p> + <p>Menus are vertical list of links or buttons for actions and navigation.</p> </div> <div class="columns"> <div class="column col-xs-12"> @@ -1118,9 +1129,9 @@ <<span class="tag">/ul</span>> </code></pre> - <h4 id="dropdowns" class="text-center"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4> + <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4> <div class="notes"> - <p>The <strong>dropdown</strong> is a combination of buttons and menus.</p> + <p>The dropdown is a combination of buttons and menus.</p> </div> <div class="columns"> <div class="column col-xs-12"> @@ -1234,9 +1245,9 @@ </div> <div id="modals" class="container"> - <h3 class="text-center"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> + <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> <div class="notes"> - <p><strong>Modals</strong> are flexible dialog prompts.</p> + <p>Modals are flexible dialog prompts.</p> </div> <div class="columns"> <div class="column"> @@ -1295,7 +1306,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="text-center">Modal sizes</h4> + <h4 class="s-subtitle">Modal sizes</h4> <div class="columns"> <div class="column col-6 col-xs-12"> <div class="modal-temp modal-sm"> @@ -1370,7 +1381,7 @@ </div> <div id="pagination" class="container"> - <h3 class="text-center"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> + <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> <div class="columns"> <div class="column col-xs-12"> <ul class="pagination"> @@ -1501,7 +1512,7 @@ </div> <div id="navs" class="container"> - <h3 class="text-center"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> + <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> <div class="columns"> <div class="column col-6 col-xs-12"> <ul class="nav"> @@ -1572,9 +1583,9 @@ </div> <div id="popovers" class="container"> - <h3 class="text-center"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> + <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> <div class="notes"> - <p><strong>Popovers</strong> are small overlay content containers. Popovers component is built entirely in CSS.</p> + <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> </div> <div class="columns"> <div class="column col-3 col-sm-6"> @@ -1689,9 +1700,9 @@ </div> <div id="steps" class="container"> - <h3 class="text-center"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> + <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> <div class="notes"> - <p><strong>Steps</strong> are progress indicators of a sequence of task steps.</p> + <p>Steps are progress indicators of a sequence of task steps.</p> </div> <div class="columns"> <div class="column col-12"> @@ -1751,9 +1762,9 @@ </div> <div id="tabs" class="container"> - <h3 class="text-center"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> + <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> <div class="notes"> - <p><strong>Tabs</strong> enable quick switch between different views.</p> + <p>Tabs enable quick switch between different views.</p> </div> <div class="columns"> <div class="column col-6 col-sm-12"> @@ -1931,9 +1942,9 @@ </div> <div id="tiles" class="container"> - <h3 class="text-center"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> + <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> <div class="notes"> - <p><strong>Tiles</strong> are repeatable or embeddable information blocks.</p> + <p>Tiles are repeatable or embeddable information blocks.</p> </div> <div class="columns"> <div class="column col-9 col-sm-12"> @@ -1993,7 +2004,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="text-center">Compact tiles</h4> + <h4 class="s-subtitle">Compact tiles</h4> <div class="notes"> <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> @@ -2039,14 +2050,15 @@ </div> <div id="toasts" class="container"> - <h3 class="text-center"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> + <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> <div class="notes"> - <p><strong>Toasts</strong> are used to show alert or information to users.</p> + <p>Toasts are used to show alert or information to users.</p> </div> <div class="columns"> <div class="column col-9 col-sm-12"> <div class="toast"> <button class="btn btn-clear float-right"></button> + <h5>Toast Title</h5> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> @@ -2098,22 +2110,22 @@ </div> <div id="tooltips" class="container"> - <h3 class="text-center"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> + <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> <div class="notes"> - <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p> + <p>Tooltips provide context information labels that appear on hover and focus.</p> </div> <div class="columns text-center"> <div class="column col-xs-12"> - <button class="btn btn-primary tooltip" data-tooltip="Tooltip Text">top tooltip</button> + <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button> </div> <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Tooltip Text">right tooltip</button> + <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button> </div> <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Tooltip Text">bottom tooltip</button> + <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button> </div> <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Tooltip Text">left tooltip</button> + <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button> </div> </div> <div class="notes"> @@ -2128,33 +2140,15 @@ </div> - <div class="container"> - <div class="divider"></div> - <ul class="pagination"> - <li class="page-item page-prev"> - <a href="layout.html"> - <p class="page-item-subtitle">Previous</p> - <h4 class="page-item-title">Layout</h4> - </a> - </li> - <li class="page-item page-next"> - <a href="utilities.html"> - <p class="page-item-subtitle">Next</p> - <h4 class="page-item-title">Utilities</h4> - </a> - </li> - </ul> - </div> + <footer class="s-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</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 ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> + </div> </div> </div> - <footer class="section section-footer bg-gray"> - <div 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> | <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 ♥ 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> - </div> - </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), |