diff options
update doc and add dl, dt and dd
1 files changed, 54 insertions, 6 deletions
| -rw-r--r-- | index.html | 60 |
@@ -211,7 +211,7 @@ <header class="text-center"><h5>lists</h5></header> <div class="columns"> - <div class="column col-6"> + <div class="column col-4"> <ul class="list"> <li>list item 1</li> <li>list item 2 @@ -224,7 +224,7 @@ <li>list item 3</li> </ul> </div> - <div class="column col-6"> + <div class="column col-4"> <ol class="list"> <li>list item 1</li> <li>list item 2 @@ -237,11 +237,22 @@ <li>list item 3</li> </ol> </div> + <div class="column col-4"> + <dl class="list"> + <dt>description list term 1</dt> + <dd>description list description 1</dd> + <dt>description list term 2</dt> + <dd>description list description 2</dd> + <dt>description list term 3</dt> + <dd>description list description 3</dd> + </dl> + </div> </div> <!-- lists example --> <pre class="code lang-html"> -<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"list"</span>> +<span class="com"><!-- unordered list --></span> +<<span class="tag">ul</span>> <<span class="tag">li</span>>list item 1<<span class="tag">/li</span>> <<span class="tag">li</span>>list item 2 <<span class="tag">ul</span>> @@ -252,6 +263,12 @@ <<span class="tag">/li</span>> <<span class="tag">li</span>>list item 3<<span class="tag">/li</span>> <<span class="tag">/ul</span>> + +<span class="com"><!-- description list --></span> +<<span class="tag">dl</span>> + <<span class="tag">dt</span>>description list term<<span class="tag">/dt</span>> + <<span class="tag">dd</span>>description list description<<span class="tag">/dd</span>> +<<span class="tag">/dl</span>> </pre> </section> @@ -394,6 +411,17 @@ <<span class="tag">/div</span>> </pre> + <section class="notes"> + <p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p> + <ul> + <li><code>hide-xs</code> hides elements when the viewport is smaller than or equal to <strong>480px</strong>. </li> + <li><code>hide-sm</code> hides elements when the viewport is smaller than or equal to <strong>600px</strong>. </li> + <li><code>hide-md</code> hides elements when the viewport is smaller than or equal to <strong>840px</strong>. </li> + <li><code>hide-lg</code> hides elements when the viewport is smaller than or equal to <strong>960px</strong>. </li> + <li><code>hide-xl</code> hides elements when the viewport is smaller than or equal to <strong>1280px</strong>. </li> + </ul> + </section> + </section> <section id="tables" class="grid-960"> @@ -439,7 +467,8 @@ </tbody> </table> <section class="notes"> - <p>Add the class <code>table</code> to any <table> element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to <table> to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. Then use the class <code>selected</code> to make <tr> element highlighted. </p> + <p>Add the class <code>table</code> to any <table> element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to <table> to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. </p> + <p>Use the class <code>selected</code> to make <tr> element highlighted. </p> </section> <!-- tables example --> @@ -771,6 +800,7 @@ </pre> <section class="notes"> + <p>For smaller input and select controls, you could add <code>input-sm</code> and <code>select-sm</code> to the elements.</p> <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the <form> container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. Please note <code>form-horizontal</code> only works in viewports that are at least 840px wide.</p> </section> @@ -2129,13 +2159,31 @@ </section> + <section id="divider" class="grid-960"> + <section class="notes"> + <p>A <strong>Divider</strong> is used for separating elements.</p> + </section> + <div class="columns"> + <div class="column"> + <div class="divider"></div> + </div> + </div> + + <!-- shape utilities example --> +<pre class="code 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>> +</pre> + + </section> + <section id="loading" class="grid-960"> <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">Loading</div> + <div class="loading"></div> </div> </div> <!-- loading example --> @@ -2149,7 +2197,7 @@ <footer class="bg-grey"> <section id="copyright" class="grid-footer grid-960"> <p> - <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.16 + <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.17 </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> |