diff options
update doc utilities
1 files changed, 96 insertions, 12 deletions
| -rw-r--r-- | index.html | 108 |
@@ -1631,39 +1631,123 @@ <a href="#position" class="btn btn-primary">position</a> <a href="#display" class="btn btn-primary">display</a> <a href="#text" class="btn btn-primary">text</a> - <a href="#shadow" class="btn btn-primary">shadow</a> <a href="#shapes" class="btn btn-primary">shapes</a> </div> </section> </section> <section id="position" class="grid-960"> - <header class="text-center"><h4>position</h4></header> <section class="notes"> - <p><strong>Position utilities</strong> are used for useful layout and position things.</p> + <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> </section> - <div class="columns"> - <div class="column"> - </div> - </div> + <!-- position utilities example --> +<pre class="code 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>> +</pre> + + </section> + + <section id="display" class="grid-960"> <section class="notes"> + <p><strong>Display utilities</strong> are used for display and hidden things.</p> + </section> + + <!-- display utilities example --> +<pre class="code 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>> +</pre> + + </section> + <section id="text" class="grid-960"> + <section class="notes"> + <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> </section> - <!-- position utilities example --> + <!-- text utilities example --> <pre class="code 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"><!-- Noral 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"><!-- 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>> +</pre> + + </section> + + <section id="shadow" class="grid-960"> + <section class="notes"> + <p><strong>Shape utilities</strong> are used for change element shapes.</p> + </section> + + <!-- shape utilities example --> +<pre class="code 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>> </pre> </section> </section> <footer class="bg-grey"> <section id="copyright" class="grid-footer grid-960"> - <div class="btn-group"> - - </div> - Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the MIT License. + <p> + <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> + </p> + <p>Designed and built with love 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> </body> |