diff options
Merge pull request #165 from picturepan2/feature/0.2.9 v0.2.9
Feature/0.2.9
1 files changed, 34 insertions, 31 deletions
| -rw-r--r-- | docs/elements.html | 65 |
diff --git a/docs/elements.html b/docs/elements.html index 0520c4f..81457fa 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -17,7 +17,7 @@ <nav class="navbar"> <section 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</a> + <a href="index.html" class="navbar-brand mr-10">Spectre.css</a> <a href="index.html" class="btn btn-link">Docs</a> </section> <section class="navbar-section"> @@ -80,7 +80,7 @@ <section id="typography" class="container"> <header class="text-center"><h3>Typography</h3></header> <section class="notes"> - <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements. </p> + <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> </section> <header class="text-center"><h4>Headings</h4></header> <section class="notes"> @@ -199,7 +199,7 @@ <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> </section> <section class="notes"> - <p>Use the attribute <code>lang</code> or add the class <code>cjk</code> to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p> + <p>Use the <code>lang</code> attribute or add the <code>cjk</code> class to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p> </section> <!-- east asian example --> @@ -320,8 +320,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. </p> - <p>Use the class <code>active</code> to make <tr> element highlighted. </p> + <p>Add the <code>table</code> class to any <table> element. The class will add padding, border and emphasized table header. Use the <code>table-striped</code> class to <table> to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. </p> + <p>Use the <code>active</code> class to make <tr> element highlighted. </p> </section> <!-- tables example --> @@ -373,7 +373,7 @@ </div> </div> <section class="notes"> - <p>Add the class <code>btn</code> to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the class <code>loading</code> can show loading indicator. </p> + <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the <code>loading</code> class can show loading indicator. </p> </section> <!-- buttons example --> @@ -386,7 +386,7 @@ </code></pre> <section class="notes"> - <p>Add the class <code>disabled</code> or the attribute <code>disabled</code> for a disabled button.</p> + <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for a disabled button.</p> </section> <div class="columns"> <div class="column col-xs-12"> @@ -419,8 +419,8 @@ </div> </div> <section class="notes"> - <p>Add the class <code>btn-sm</code> or <code>btn-lg</code> for small or large button size. Also, you can add the class <code>btn-block</code> for a full-width button. </p> - <p>Please note that you could use the class <code>btn-action</code> for a square button, or add another class <code>circle</code> for a round button, which is often used as a Float Action Button (FAB).</p> + <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p> + <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p> </section> <!-- buttons example --> @@ -441,7 +441,7 @@ </div> </div> <section class="notes"> - <p>Icons with the class <code>icon</code> can be correctly rendered in each button size. </p> + <p>Icons with the <code>icon</code> class can be correctly rendered in each button size. </p> </section> <!-- buttons example --> @@ -484,7 +484,7 @@ </div> </div> <section class="notes"> - <p>If you want to use buttons as a group, add the class <code>btn-group</code> to the container. You can add the class <code>btn-group-block</code> for a full-width button group.</p> + <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. You can add the <code>btn-group-block</code> class for a full-width button group.</p> </section> <!-- button groups example --> @@ -608,7 +608,7 @@ <section class="notes"> <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</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. </p> + <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p> </section> <div class="columns"> <div class="column col-9 col-sm-12"> @@ -787,7 +787,7 @@ <header class="text-center"><h4>Form validation styles</h4></header> <section class="notes"> - <p>To use form validation styles, add <code>is-success</code> and <code>is-danger</code> to the controls or add <code>has-success</code> and <code>has-danger</code> to parent elements. You can use the class <code>form-input-hint</code> to provide form validation success and error messages.</p> + <p>To use form validation styles, add <code>is-success</code> or <code>is-danger</code> class to the controls or add <code>has-success</code> or <code>has-danger</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> </section> <div class="columns"> <div class="column col-6 col-xs-12"> @@ -831,14 +831,14 @@ <span class="com"><!-- form validation class: has-success --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> <<span class="tag">/div</span>> <span class="com"><!-- form validation class: is-success --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> <<span class="tag">/div</span>> <<span class="tag">/form</span>> @@ -922,31 +922,34 @@ </div> </div> <section class="notes"> - <p>If you want to attach text and button along with an input, add the class <code>input-group</code> to the input container. And add the class <code>input-group-addon</code> to the text element and <code>input-group-btn</code> to the button element.</p> + <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.</p> </section> <!-- input groups example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- normal input group --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>...<<span class="tag">/span</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> <<span class="tag">/div</span>> <span class="com"><!-- large input group --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon addon-lg"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon addon-lg"</span>>...<<span class="tag">/span</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> <<span class="tag">/div</span>> <span class="com"><!-- normal input group with button --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>...<<span class="tag">/span</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Submit<<span class="tag">/button</span>> <<span class="tag">/div</span>> </code></pre> <header class="text-center"><h4>Form disabled styles</h4></header> + <section class="notes"> + <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> + </section> <div class="columns"> <div class="column col-9 col-xs-12"> <form action="#forms"> @@ -1011,7 +1014,7 @@ </div> </div> <section class="notes"> - <p>Add the class <code>label</code> to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-danger</code> for a primary colored label.</p> + <p>Add the <code>label</code> class to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-danger</code> for a primary colored label.</p> </section> <!-- labels example --> @@ -1026,7 +1029,7 @@ <section class="notes"> <p><strong>Codes</strong> are inline and multiline code snippets.</p> <p>For inline code, you can use the element <code><code></code>. </p> - <p>For multiline code snippet blocks, you can use <code><pre></code> with the class <code>code</code> as a container, and add <code><code></code> inside it. The attribute <code>data-lang</code> is rendered as the language name in the top right.</p> + <p>For multiline code snippet blocks, you can use <code><pre></code> with the <code>code</code> class as a container, and add <code><code></code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p> </section> <!-- codes example --> @@ -1043,7 +1046,7 @@ <header class="text-center"><h3>Media</h3></header> <section class="notes"> <p><strong>Media</strong> includes responsive images, figures and video classes. </p> - <p>Add the class <code>img-responsive</code> to <img> elements. The images will scale with the parent sizes.</p> + <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> </section> <div class="columns"> <div class="column col-9 col-xs-12"> @@ -1051,11 +1054,11 @@ </div> </div> -<pre class="code" data-lang="HTML"><code><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> <span class="atn">alt</span>=<span class="atv">"macOS El Capitan Wallpaper"</span> /> +<pre class="code" data-lang="HTML"><code><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> </code></pre> <section class="notes"> - <p>You can use the element <code><figure></code> for an image with a caption. Add the class <code>figure</code> to <figure> element. The images with the class <code>img-responsive</code> will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p> + <p>You can use the element <code><figure></code> for an image with a caption. Add the <code>figure</code> class to <figure> element. The images with the <code>img-responsive</code> class will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p> </section> <div class="columns"> <div class="column col-9 col-xs-12"> @@ -1067,13 +1070,13 @@ </div> <pre class="code" data-lang="HTML"><code><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"figure"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-yosemite-2.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> <span class="atn">alt</span>=<span class="atv">"macOS Yosemite Wallpaper"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-yosemite-2.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> <<span class="tag">figcaption</span> <span class="atn">class</span>=<span class="atv">"figure-caption text-center"</span>>macOS Yosemite wallpaper<<span class="tag">/figcaption</span>> <<span class="tag">/figure</span>> </code></pre> <section class="notes"> - <p>For responsive video, add a container with the class <code>video-responsive</code>. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> + <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> </section> <div class="columns"> <div class="column col-9 col-xs-12"> @@ -1084,8 +1087,8 @@ </div> <!-- media example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive"</span>> - <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"https://www.youtube.com/embed/BzMLA8YIgG0"</span> <span class="atn">width</span>=<span class="atv">"560"</span> <span class="atn">height</span>=<span class="atv">"315"</span> <span class="atn">frameborder</span>=<span class="atv">"0"</span> <span class="atn">allowfullscreen</span>><<span class="tag">/iframe</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive video-responsive-4-3"</span>> + <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"..."</span> <span class="atn">width</span>=<span class="atv">"..."</span> <span class="atn">height</span>=<span class="atv">"..."</span> <span class="atn">frameborder</span>=<span class="atv">"0"</span> <span class="atn">allowfullscreen</span>><<span class="tag">/iframe</span>> <<span class="tag">/div</span>> </code></pre> |