diff options
Improve Docs homepage
1 files changed, 36 insertions, 36 deletions
| -rw-r--r-- | docs/elements.html | 72 |
diff --git a/docs/elements.html b/docs/elements.html index a72fe82..836cfc6 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -6,7 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="author" content="https://github.com/picturepan2/" /> - <title>Elements - Spectre.css</title> + <title>Elements - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css" /> <link rel="stylesheet" href="dist/spectre-icons.css" /> <link rel="stylesheet" href="css/docs.css" /> @@ -15,8 +15,8 @@ <div class="s-container container"> <div class="columns"> <div class="s-brand"> - <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css" > - <img src="img/spectre-logo.svg" alt="Spectre.css"/> + <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" /> <h2>Spectre.css</h2> </a> <div class="menu-btn"> @@ -253,7 +253,7 @@ <div id="content" class="s-content"> <div id="typography" class="container"> <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> - <div class="notes"> + <div class="docs-note"> <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> </div> <h4 class="s-subtitle">Headings</h4> @@ -285,7 +285,7 @@ </code></pre> <h4 class="s-subtitle">Paragraphs</h4> - <div class="notes"> + <div class="docs-note"> <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> </div> @@ -376,7 +376,7 @@ <h4 class="s-subtitle">Optimized for east asian fonts</h4> <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5> - <div class="notes"> + <div class="docs-note"> <h6>Chinese (Simplified)</h6> <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p> <h6>Chinese (Tranditional)</h6> @@ -386,7 +386,7 @@ <h6>Korean</h6> <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> </div> - <div class="notes"> + <div class="docs-note"> <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p> </div> @@ -396,10 +396,10 @@ <<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ko"</span>>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<<span class="tag">/p</span>> </code></pre> - <div class="notes"> + <div class="docs-note"> <p>And you can use the <code>cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. </p> </div> - <div class="notes"> + <div class="docs-note"> <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p> <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p> </div> @@ -487,7 +487,7 @@ <div id="tables" class="container"> <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> - <div class="notes"> + <div class="docs-note"> <p>Tables include default styles for tables and data sets.</p> </div> <table class="table table-striped"> @@ -521,7 +521,7 @@ </tr> </tbody> </table> - <div class="notes"> + <div class="docs-note"> <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> </div> @@ -549,7 +549,7 @@ <div id="buttons" class="container"> <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> - <div class="notes"> + <div class="docs-note"> <p>Buttons include simple button styles for actions in different types and sizes. </p> </div> <div class="columns"> @@ -564,11 +564,11 @@ </div> </div> - <div class="notes"> + <div class="docs-note"> <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. </p> </div> - <div class="notes"> + <div class="docs-note"> <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for a disabled button.</p> </div> @@ -584,7 +584,7 @@ </div> </div> - <div class="notes"> + <div class="docs-note"> <p>A button with the <code>loading</code> class can show loading indicator.</p> </div> @@ -624,7 +624,7 @@ <button class="btn btn-primary btn-sm">small</button> </div> </div> - <div class="notes"> + <div class="docs-note"> <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> </div> @@ -639,7 +639,7 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>> </code></pre> - <div class="notes"> + <div class="docs-note"> <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> </div> @@ -694,7 +694,7 @@ </div> </div> </div> - <div class="notes"> + <div class="docs-note"> <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> </div> @@ -710,7 +710,7 @@ <div id="forms" class="container"> <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> - <div class="notes"> + <div class="docs-note"> <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> </div> <div class="columns"> @@ -817,12 +817,12 @@ <<span class="tag">/form</span>> </code></pre> - <div class="notes"> + <div class="docs-note"> <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> </div> <h4 class="s-subtitle">Horizontal forms</h4> - <div class="notes"> + <div class="docs-note"> <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> </div> <div class="columns"> @@ -921,7 +921,7 @@ </code></pre> <h4 class="s-subtitle">Form sizes</h4> - <div class="notes"> + <div class="docs-note"> <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> </div> <div class="columns"> @@ -958,7 +958,7 @@ </div> <h4 class="s-subtitle">Form icons</h4> - <div class="notes"> + <div class="docs-note"> <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. And add the icon with <code>form-icon</code> class next to the <input>.</p> </div> <div class="columns"> @@ -1010,7 +1010,7 @@ <<span class="tag">/div</span>> </code></pre> - <div class="notes"> + <div class="docs-note"> <p>You can use the <code>loading</code> class for loading or posting state.</p> </div> @@ -1180,7 +1180,7 @@ </div> </div> </div> - <div class="notes"> + <div class="docs-note"> <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> </div> @@ -1206,7 +1206,7 @@ </code></pre> <h4 class="s-subtitle">Form validation styles</h4> - <div class="notes"> + <div class="docs-note"> <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> </div> <div class="columns"> @@ -1305,7 +1305,7 @@ </code></pre> <h4 class="s-subtitle">Form disabled styles</h4> - <div class="notes"> + <div class="docs-note"> <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> </div> <div class="columns"> @@ -1359,7 +1359,7 @@ <div id="icons" class="container"> <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> - <div class="notes"> + <div class="docs-note"> <p>Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons.</p> </div> <h4 class="s-subtitle">Navigation icons</h4> @@ -1608,7 +1608,7 @@ <div id="labels" class="container"> <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> - <div class="notes"> + <div class="docs-note"> <p>Labels are formatted text tags for highlighted, informative information.</p> </div> <div class="columns"> @@ -1620,7 +1620,7 @@ <span class="label label-error">error label</span> </div> </div> - <div class="notes"> + <div class="docs-note"> <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-error</code> for colored labels.</p> </div> @@ -1633,7 +1633,7 @@ <div id="codes" class="container"> <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> - <div class="notes"> + <div class="docs-note"> <p>Codes are inline and multiline code snippets.</p> <p>For inline code, you can use the element <code><code></code>. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p> </div> @@ -1656,11 +1656,11 @@ <div id="media" class="container"> <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> - <div class="notes"> + <div class="docs-note"> <p>Media includes responsive images, figures and video classes. </p> </div> <h4 class="s-subtitle">Images</h4> - <div class="notes"> + <div class="docs-note"> <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> </div> <div class="columns"> @@ -1669,7 +1669,7 @@ </div> </div> - <div class="notes"> + <div class="docs-note"> <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">in preview</a>.</p> </div> <div class="columns"> @@ -1692,7 +1692,7 @@ <<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-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> </code></pre> - <div class="notes"> + <div class="docs-note"> <p>You can use the element <figure> 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> </div> <div class="columns"> @@ -1711,7 +1711,7 @@ </code></pre> <h4 class="s-subtitle">Video</h4> - <div class="notes"> + <div class="docs-note"> <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> </div> <div class="columns"> |