diff options
ADD: New Documents experience
1 files changed, 231 insertions, 0 deletions
| -rw-r--r-- | docs/utilities.html | 231 |
diff --git a/docs/utilities.html b/docs/utilities.html new file mode 100644 index 0000000..183151e --- /dev/null +++ b/docs/utilities.html @@ -0,0 +1,231 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <meta name="robots" content="index, follow" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="author" content="https://github.com/picturepan2/" /> + <title>Utilities - Spectre.css </title> + <link rel="stylesheet" href="../dist/spectre.css" /> + <link rel="stylesheet" href="css/docs.min.css" /> + <link rel="stylesheet" href="font/style.css" /> +</head> +<body> + <section class="section bg-grey"> + <section class="grid-header container grid-960"> + <nav class="navbar"> + <section class="navbar-section"> + <a href="index.html" class="navbar-brand">Spectre.css</a> + <a href="index.html#introduction" class="btn btn-link">Documents</a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-link">GitHub Repo</a> + </section> + </nav> + </section> + </section> + + <section class="container grid-960"> + <section class="columns"> + <div class="docs-sidebar column col-3 col-sm-12"> + <ul class="docs-nav nav"> + <li class="nav-item"> + <a href="index.html">Getting started</a> + </li> + <li class="nav-item"> + <a href="elements.html">Elements</a> + </li> + <li class="nav-item"> + <a href="layout.html">Layout</a> + </li> + <li class="nav-item"> + <a href="components.html">Components</a> + </li> + <li class="nav-item active"> + <a href="utilities.html">Utilities</a> + <ul class="nav"> + <li class="nav-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="nav-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="nav-item"> + <a href="utilities.html#text">Text</a> + </li> + <li class="nav-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="nav-item"> + <a href="utilities.html#loading">Loading</a> + </li> + </ul> + </li> + </ul> + </div> + <div class="docs-content column col-9 col-sm-12"> + <section id="position" class="container"> + <header class="text-center"><h3>Position utilities</h3></header> + <section 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> +<!-- position utilities example --> +<pre> +<code class="code lang-html" data-lang="HTML"><span class="com"><!-- clear float --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> +<span class="com"><!-- float: left and right --></span> +<<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">"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>> +<span class="com"><!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-10"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-5"</span>><<span class="tag">/div</span>> +<span class="com"><!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-10"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-5"</span>><<span class="tag">/div</span>></code> +</pre> + </section> + + <section id="display" class="container"> + <header class="text-center"><h3>Display utilities</h3></header> + <section class="notes"> + <p><strong>Display utilities</strong> are used for display and hidden things.</p> + </section> +<!-- display utilities example --> +<pre> +<code class="code lang-html" data-lang="HTML"><span class="com"><!-- display: block; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"block"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: inline; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: inline-block; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-block"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: flex; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"flex"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: inline-flex; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-flex"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: none; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"hide"</span>><<span class="tag">/div</span>> +<span class="com"><!-- visibility: visible; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"visible"</span>><<span class="tag">/div</span>> +<span class="com"><!-- visibility: hidden; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"invisible"</span>><<span class="tag">/div</span>> +<span class="com"><!-- hide text contents --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-hide"</span>><<span class="tag">/div</span>></code> +</pre> + </section> + + <section id="text" class="container"> + <header class="text-center"><h3>Text utilities</h3></header> + <section class="notes"> + <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> + </section> +<!-- text utilities example --> +<pre> +<code class="code lang-html" data-lang="HTML"><span class="com"><!-- left-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> +<span class="com"><!-- center-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> +<span class="com"><!-- right-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> +<span class="com"><!-- justified text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Lowercased text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Uppercased text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Capitalized text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Normal weight text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Bold text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Italicized text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Larger text (120%) --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-large"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Overflow behavior: truncate the text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Text may be broken at arbitrary points --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>></code> +</pre> + </section> + + <section id="shapes" class="container"> + <section class="notes"> + <p><strong>Shape utilities</strong> are used for change element shapes.</p> + </section> +<!-- shape utilities example --> +<pre> +<code class="code lang-html" data-lang="HTML"><span class="com"><!-- rounded element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> +<span class="com"><!-- circle element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>></code> +</pre> + </section> + + <section id="divider" class="container"> + <header class="text-center"><h3>Divider</h3></header> + <section class="notes"> + <p>A <strong>Divider</strong> is used for separating elements.</p> + </section> + <div class="columns"> + <div class="column"> + <div class="divider mt-10"></div> + </div> + </div> +<!-- shape utilities example --> +<pre> +<code class="code lang-html" data-lang="HTML"><span class="com"><!-- divider element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/div</span>></code> +</pre> + </section> + + <section id="loading" class="container"> + <header class="text-center"><h3>Loading</h3></header> + <section class="notes"> + <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the class <code>loading</code> to buttons for loading status.</p> + </section> + <div class="columns"> + <div class="column"> + <div class="loading"></div> + </div> + </div> +<!-- loading example --> +<pre> +<code class="code lang-html" data-lang="HTML"><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>></code> +</pre> + </section> + + </div> + </section> + </section> + + <footer class="bg-grey"> + <section id="copyright" class="grid-footer container grid-960"> + <p> + <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | Version <span class="version"></span> + </p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </section> + </footer> + <script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-2702768-8', 'auto'); + ga('send', 'pageview'); + </script> +</body> +</html> |