diff options
Diffstat (limited to 'docs/utilities.html')
| -rw-r--r-- | docs/utilities.html | 100 |
1 files changed, 50 insertions, 50 deletions
diff --git a/docs/utilities.html b/docs/utilities.html index ce7a38d..d88aea8 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -12,22 +12,22 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <section class="section section-header bg-gray"> - <section class="grid-header container grid-960"> + <div class="section section-header bg-gray"> + <div class="grid-header container grid-960"> <nav class="navbar"> - <section class="navbar-section"> + <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> - </section> - <section class="navbar-section"> + </div> + <div class="navbar-section"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </section> + </div> </nav> - </section> - </section> + </div> + </div> - <section class="container grid-960"> - <section class="columns"> + <div class="container grid-960"> + <div class="columns"> <div id="sidebar" class="docs-sidebar column col-sm-12"> <div class="docs-nav"> <div class="accordion"> @@ -253,13 +253,13 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div class="docs-content column col-sm-12"> - <section id="colors" class="container"> + <div id="colors" class="container"> <header class="text-center"><h3><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Color utilities</strong> are used for changing colors for text, link and background.</p> - </section> + </div> <header class="text-center"><h4>Text colors</h4></header> - <section class="notes"> + <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> @@ -269,7 +269,7 @@ <span class="text-warning p-5">warning color</span> <span class="text-error p-5">error color</span> </p> - </section> + </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>> @@ -281,7 +281,7 @@ <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-error"</span>>error color<<span class="tag">/span</span>> </code></pre> - <section class="notes"> + <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> @@ -291,7 +291,7 @@ <a class="text-warning p-5" href="#colors">warning link</a> <a class="text-error p-5" href="#colors">error link</a> </p> - </section> + </div> <!-- colors example --> <pre class="code" data-lang="HTML"><code><<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>primary color<<span class="tag">/a</span>> @@ -304,7 +304,7 @@ </code></pre> <header class="text-center"><h4>Background colors</h4></header> - <section class="notes"> + <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> @@ -314,7 +314,7 @@ <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> - </section> + </div> <!-- colors example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-primary"</span>>primary bg<<span class="tag">/div</span>> @@ -326,13 +326,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-error"</span>>error bg<<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="display" class="container"> + <div id="display" class="container"> <header class="text-center"><h3><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Display utilities</strong> are used for display and hidden things.</p> - </section> + </div> <!-- display utilities example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- display: block; --></span> @@ -357,13 +357,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-assistive"</span>><<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="divider" class="container"> + <div id="divider" class="container"> <header class="text-center"><h3><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3></header> - <section class="notes"> + <div class="notes"> <p>A <strong>Divider</strong> is used for separating elements.</p> - </section> + </div> <div class="columns"> <div class="column"> <div class="divider"></div> @@ -429,13 +429,13 @@ <<span class="tag">/div</span>> <<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="loading" class="container"> + <div id="loading" class="container"> <header class="text-center"><h3><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3></header> - <section class="notes"> + <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> - </section> + </div> <div class="columns"> <div class="column"> <div class="loading"></div> @@ -447,13 +447,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading"</span>><<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="position" class="container"> + <div id="position" class="container"> <header class="text-center"><h3><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3></header> - <section class="notes"> + <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> - </section> + </div> <!-- position utilities example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- clear float --></span> @@ -481,13 +481,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"p-5"</span>><<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="shapes" class="container"> + <div id="shapes" class="container"> <header class="text-center"><h3><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Shape utilities</strong> are used for change element shapes.</p> - </section> + </div> <!-- shape utilities example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- rounded element --></span> @@ -496,13 +496,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="text" class="container"> + <div id="text" class="container"> <header class="text-center"><h3><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> - </section> + </div> <!-- text utilities example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- left-aligned text --></span> @@ -538,9 +538,9 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section class="container"> + <div class="container"> <div class="divider"></div> <ul class="pagination"> <li class="page-item page-prev"> @@ -556,18 +556,18 @@ </a> </li> </ul> - </section> + </div> </div> - </section> - </section> + </div> + </div> <footer class="section section-footer bg-gray"> - <section id="copyright" class="grid-footer container grid-960"> + <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> | Version <span class="version"></span> </p> <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </section> + </div> </footer> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |