diff options
Completely rewritten Docs experience
1 files changed, 69 insertions, 91 deletions
| -rw-r--r-- | docs/utilities.html | 160 |
diff --git a/docs/utilities.html b/docs/utilities.html index 943f4bc..f99ece9 100644 --- a/docs/utilities.html +++ b/docs/utilities.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="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,28 +247,24 @@ </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="colors" class="container"> - <h3 class="text-center"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3> + <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3> <div class="notes"> - <p><strong>Color utilities</strong> are used for changing colors for text, link and background.</p> + <p>Color utilities are used for changing colors for text, link and background.</p> </div> - <h4 class="text-center">Text colors</h4> + <h4 class="s-subtitle">Text colors</h4> <div class="notes"> - <p> - <span class="text-primary p-5">primary color</span> - <span class="text-secondary bg-primary p-5 rounded">secondary color</span> - <span class="text-gray p-5">gray color</span> - <span class="text-light bg-dark p-5 rounded">light color</span> - <span class="text-success p-5">success color</span> - <span class="text-warning p-5">warning color</span> - <span class="text-error p-5">error color</span> - </p> + <p><span class="text-primary">primary color</span></p> + <p><span class="text-gray">gray color</span></p> + <p><span class="text-light bg-primary p-5 rounded">light color</span></p> + <p><span class="text-success">success color</span></p> + <p><span class="text-warning">warning color</span></p> + <p><span class="text-error">error color</span></p> </div> <!-- colors example --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span>>primary color<<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span>>secondary color<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span>>gray color<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-light"</span>>light color<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-success"</span>>success color<<span class="tag">/span</span>> @@ -282,15 +273,12 @@ </code></pre> <div class="notes"> - <p> - <a class="text-primary p-5" href="#colors">primary link</a> - <a class="text-secondary bg-primary p-5 rounded" href="#colors">secondary link</a> - <a class="text-gray p-5" href="#colors">gray link</a> - <a class="text-light bg-dark p-5 rounded" href="#colors">light link</a> - <a class="text-success p-5" href="#colors">success link</a> - <a class="text-warning p-5" href="#colors">warning link</a> - <a class="text-error p-5" href="#colors">error link</a> - </p> + <p><a class="text-primary p-5" href="#colors">primary link</a></p> + <p><a class="text-gray p-5" href="#colors">gray link</a></p> + <p><a class="text-light bg-dark p-5 rounded" href="#colors">light link</a></p> + <p><a class="text-success p-5" href="#colors">success link</a></p> + <p><a class="text-warning p-5" href="#colors">warning link</a></p> + <p><a class="text-error p-5" href="#colors">error link</a></p> </div> <!-- colors example --> @@ -303,17 +291,15 @@ <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-error"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>error color<<span class="tag">/a</span>> </code></pre> - <h4 class="text-center">Background colors</h4> + <h4 class="s-subtitle">Background colors</h4> <div class="notes"> - <p> - <span class="bg-primary text-light p-5 rounded">primary bg</span> - <span class="bg-secondary text-primary p-5 rounded">secondary bg</span> - <span class="bg-dark text-light p-5 rounded">dark bg</span> - <span class="bg-gray p-5 rounded">gray bg</span> - <span class="bg-success text-light p-5 rounded">success bg</span> - <span class="bg-warning text-light p-5 rounded">warning bg</span> - <span class="bg-error text-light p-5 rounded">error bg</span> - </p> + <p><span class="bg-primary text-light p-5 rounded">primary bg</span></p> + <p><span class="bg-secondary text-primary p-5 rounded">secondary bg</span></p> + <p><span class="bg-dark text-light p-5 rounded">dark bg</span></p> + <p><span class="bg-gray p-5 rounded">gray bg</span></p> + <p><span class="bg-success text-light p-5 rounded">success bg</span></p> + <p><span class="bg-warning text-light p-5 rounded">warning bg</span></p> + <p><span class="bg-error text-light p-5 rounded">error bg</span></p> </div> <!-- colors example --> @@ -329,9 +315,9 @@ </div> <div id="display" class="container"> - <h3 class="text-center"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3> + <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3> <div class="notes"> - <p><strong>Display utilities</strong> are used for display and hidden things.</p> + <p>Display utilities are used for display and hidden things.</p> </div> <!-- display utilities example --> @@ -360,9 +346,9 @@ </div> <div id="divider" class="container"> - <h3 class="text-center"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3> + <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3> <div class="notes"> - <p>A <strong>Divider</strong> is used for separating elements.</p> + <p>A Divider is used for separating elements.</p> </div> <div class="columns"> <div class="column"> @@ -432,27 +418,37 @@ </div> <div id="loading" class="container"> - <h3 class="text-center"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> + <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> <div class="notes"> - <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p> + <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status. Add the <code>btn-lg</code> class for large size. </p> </div> <div class="columns"> - <div class="column"> + <div class="column col-6 text-center"> <div class="loading"></div> </div> </div> + <div class="notes"> + <p>Add the <code>btn-lg</code> class for large size. </p> + </div> + <div class="columns"> + <div class="column col-6 text-center"> + <div class="loading loading-lg"></div> + <p class="text-gray">Loading</p> + </div> + </div> <!-- loading example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- loading element --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading loading-lg"</span>><<span class="tag">/div</span>> </code></pre> </div> <div id="position" class="container"> - <h3 class="text-center"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3> + <h3 class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3> <div class="notes"> - <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> + <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> </div> <!-- position utilities example --> @@ -462,8 +458,8 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> <span class="com"><!-- position: relative, absolute and fixed --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rel"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"abs"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"relative"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"absolute"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> <span class="com"><!-- centered block --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> @@ -484,9 +480,9 @@ </div> <div id="shapes" class="container"> - <h3 class="text-center"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3> + <h3 class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3> <div class="notes"> - <p><strong>Shape utilities</strong> are used for change element shapes.</p> + <p>Shape utilities are used for change element shapes.</p> </div> <!-- shape utilities example --> @@ -499,9 +495,9 @@ </div> <div id="text" class="container"> - <h3 class="text-center"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3> + <h3 class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3> <div class="notes"> - <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> + <p>Text utilities are used for text alignment, styles and overflow things.</p> </div> <!-- text utilities example --> @@ -540,33 +536,15 @@ </div> - <div class="container"> - <div class="divider"></div> - <ul class="pagination"> - <li class="page-item page-prev"> - <a href="components.html"> - <p class="page-item-subtitle">Previous</p> - <h4 class="page-item-title">Components</h4> - </a> - </li> - <li class="page-item page-next"> - <a href="experimentals.html"> - <p class="page-item-subtitle">Next</p> - <h4 class="page-item-title">Experimentals</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), |