diff options
1 files changed, 103 insertions, 103 deletions
| -rw-r--r-- | docs/elements.html | 206 |
diff --git a/docs/elements.html b/docs/elements.html index 9ee3cef..41b612e 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -12,22 +12,22 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <section class="section section-header bg-gray"> - <section class="grid-header container grid-960"> + <div class="section section-header bg-gray"> + <div class="grid-header container grid-960"> <nav class="navbar"> - <section class="navbar-section"> + <div 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 Docs</a> - </section> - <section class="navbar-section"> + </div> + <div class="navbar-section"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </section> + </div> </nav> - </section> - </section> + </div> + </div> - <section class="docs-container container grid-960"> - <section class="columns"> + <div class="docs-container container grid-960"> + <div class="columns"> <div id="sidebar" class="docs-sidebar column col-sm-12"> <div class="docs-nav"> <div class="accordion"> @@ -253,20 +253,20 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div class="docs-content column col-sm-12"> - <section id="typography" class="container"> + <div id="typography" class="container"> <header class="text-center"><h3><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> - </section> + </div> <header class="text-center"><h4>Headings</h4></header> - <section class="notes"> + <div class="notes"> <h1>H1 Title <small class="label">5rem</small></h1> <h2>H2 Title <small class="label">4rem</small></h2> <h3>H3 Title <small class="label">3rem</small></h3> <h4>H4 Title <small class="label">2.4rem</small></h4> <h5>H5 Title <small class="label">2rem</small></h5> <h6>H6 Title <small class="label">1.6rem</small></h6> - </section> + </div> <!-- headings example --> <pre class="code" data-lang="HTML"><code><<span class="tag">h1</span>>H1 Title<<span class="tag">/h1</span>> @@ -274,10 +274,10 @@ </code></pre> <header class="text-center"><h4>Paragraphs</h4></header> - <section class="notes"> + <div class="notes"> <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> - </section> + </div> <!-- paragraphs example --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>dictum in vehicula sit amet<<span class="tag">/a</span>>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.<<span class="tag">/p</span>> @@ -363,20 +363,20 @@ </div> <header class="text-center"><h4>Optimized for east asian fonts</h4></header> - <section class="notes"> + <div class="notes"> <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p> <h5>Chinese (Simplified)</h5> <p lang="zh-Hans">革命不是请客吃饭,不是做文章,不是绘画绣花,不能那样雅致,那样从容不迫,“文质彬彬”,那样“温良恭俭让”。革命就是暴动,是一个阶级推翻一个阶级的暴烈的行动。</p> <h5>Chinese (Tranditional)</h5> <p lang="zh-Hant">山不在高,有仙則名;水不在深,有龍則靈。斯是陋室,惟吾德馨。苔痕上階綠,草色入簾青;談笑有鴻儒,往來無白丁。可以調素琴,閱金經。無絲竹之亂耳,無案牘之勞形。南陽諸葛廬,西蜀子雲亭。孔子云:「何陋之有?」</p> <h5>Japanese</h5> - <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> + <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> <h5>Korean</h5> <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> - </section> - <section class="notes"> + </div> + <div class="notes"> <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p> - </section> + </div> <!-- east asian example --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"zh-Hans"</span>>革命不是请客吃饭,不是做文章……<<span class="tag">/p</span>> @@ -384,13 +384,13 @@ <<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ko"</span>>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<<span class="tag">/p</span>> </code></pre> - <section class="notes"> + <div class="notes"> <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> - </section> - <section class="notes"> + </div> + <div class="notes"> <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p> <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p> - </section> + </div> <!-- east asian example --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">u</span>>祇園<<span class="tag">/u</span>><<span class="tag">u</span>>精舎<<span class="tag">/u</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> @@ -471,13 +471,13 @@ <<span class="tag">/dl</span>> </code></pre> - </section> + </div> - <section id="tables" class="container"> + <div id="tables" class="container"> <header class="text-center"><h3><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Tables</strong> include default styles for tables and data sets.</p> - </section> + </div> <table class="table table-striped"> <thead> <tr> @@ -509,10 +509,10 @@ </tr> </tbody> </table> - <section class="notes"> + <div class="notes"> <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> + </div> <!-- tables example --> <pre class="code" data-lang="HTML"><code><<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> @@ -533,13 +533,13 @@ <<span class="tag">/table</span>> </code></pre> - </section> + </div> - <section id="buttons" class="container"> + <div id="buttons" class="container"> <header class="text-center"><h3><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p> - </section> + </div> <div class="columns"> <div class="column col-xs-12"> <button class="btn">default button</button> @@ -552,13 +552,13 @@ </div> </div> - <section class="notes"> + <div class="notes"> <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> - </section> + </div> - <section class="notes"> + <div class="notes"> <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for a disabled button.</p> - </section> + </div> <div class="columns"> <div class="column col-xs-12"> @@ -572,9 +572,9 @@ </div> </div> - <section class="notes"> + <div class="notes"> <p>A button with the <code>loading</code> class can show loading indicator.</p> - </section> + </div> <div class="columns"> <div class="column col-xs-12"> @@ -612,9 +612,9 @@ <button class="btn btn-primary btn-sm">small</button> </div> </div> - <section class="notes"> + <div class="notes"> <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> - </section> + </div> <!-- buttons example --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> @@ -627,9 +627,9 @@ <<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> - <section class="notes"> + <div class="notes"> <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> + </div> <div class="columns"> <div class="column col-xs-12"> @@ -682,9 +682,9 @@ </div> </div> </div> - <section class="notes"> + <div class="notes"> <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> + </div> <!-- button groups example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> @@ -694,13 +694,13 @@ <<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="forms" class="container"> + <div id="forms" class="container"> <header class="text-center"><h3><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Forms</strong> provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> - </section> + </div> <div class="columns"> <div class="column col-9 col-xs-12"> <form action="#forms"> @@ -805,14 +805,14 @@ <<span class="tag">/form</span>> </code></pre> - <section class="notes"> + <div class="notes"> <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> - </section> + </div> <header class="text-center"><h4>Horizontal forms</h4></header> - <section class="notes"> + <div class="notes"> <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> <div class="columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -909,9 +909,9 @@ </code></pre> <header class="text-center"><h4>Form sizes</h4></header> - <section class="notes"> + <div class="notes"> <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> - </section> + </div> <div class="columns"> <div class="column col-4"> <label class="form-label label-sm">Label</label> @@ -946,9 +946,9 @@ </div> <header class="text-center"><h4>Form icons</h4></header> - <section class="notes"> + <div class="notes"> <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> - </section> + </div> <div class="columns"> <div class="column col-4"> <div class="has-icon-left"> @@ -998,9 +998,9 @@ <<span class="tag">/div</span>> </code></pre> - <section class="notes"> + <div class="notes"> <p>You can use the <code>loading</code> class for loading or posting state.</p> - </section> + </div> <div class="columns"> <div class="column col-4"> @@ -1168,9 +1168,9 @@ </div> </div> </div> - <section class="notes"> + <div class="notes"> <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> + </div> <!-- input groups example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- normal input group --></span> @@ -1194,9 +1194,9 @@ </code></pre> <header class="text-center"><h4>Form validation styles</h4></header> - <section class="notes"> + <div class="notes"> <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> - </section> + </div> <div class="columns"> <div class="column col-6 col-xs-12"> <fieldset> @@ -1293,9 +1293,9 @@ </code></pre> <header class="text-center"><h4>Form disabled styles</h4></header> - <section class="notes"> + <div class="notes"> <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> - </section> + </div> <div class="columns"> <div class="column col-9 col-xs-12"> <form action="#forms"> @@ -1343,13 +1343,13 @@ </form> </div> </div> - </section> + </div> - <section id="icons" class="container"> + <div id="icons" class="container"> <header class="text-center"><h3><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Icons</strong> 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> - </section> + </div> <header class="text-center"><h4>Navigation</h4></header> <div class="columns"> <div class="column col-3 col-md-6"> @@ -1592,13 +1592,13 @@ <pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-menu"</span>><<span class="tag">/i</span>> </code></pre> - </section> + </div> - <section id="labels" class="container"> + <div id="labels" class="container"> <header class="text-center"><h3><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p> - </section> + </div> <div class="columns"> <div class="column"> <span class="label">default label</span> @@ -1608,23 +1608,23 @@ <span class="label label-error">error label</span> </div> </div> - <section class="notes"> + <div class="notes"> <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 a primary colored label.</p> - </section> + </div> <!-- labels example --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>primary label<<span class="tag">/span</span>> </code></pre> - </section> + </div> - <section id="codes" class="container"> + <div id="codes" class="container"> <header class="text-center"><h3><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3></header> - <section class="notes"> + <div 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>. 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> - </section> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- code snippets --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>> @@ -1634,32 +1634,32 @@ <!-- codes example --> <pre class="code" data-lang="HTML"><code><<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">"code"</span> <span class="atn">data-lang</span>=<span class="atv">"HTML"</span>><<span class="tag">code</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"com"</span>>&lt;!-- code snippets --&gt;<<span class="tag">/span</span>> -&lt;<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"tag"</span>>button<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atn"</span>>class<<span class="tag">/span</span>>=<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atv"</span>>&quot;btn&quot;</span><<span class="tag">/span</span>>&gt; +&lt;<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"tag"</span>>button<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atn"</span>>class<<span class="tag">/span</span>>=<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atv"</span>>&quot;btn&quot;<<span class="tag">/span</span>>&gt; Submit &lt;<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"tag"</span>>/button<<span class="tag">/span</span>>&gt; <<span class="tag">/code</span>><<span class="tag">/pre</span>> </code></pre> - </section> + </div> - <section id="media" class="container"> + <div id="media" class="container"> <header class="text-center"><h3><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Media</strong> includes responsive images, figures and video classes. </p> - </section> + </div> <header class="text-center"><h4>Images</h4></header> - <section class="notes"> + <div class="notes"> <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> - </section> + </div> <div class="columns"> <div class="column col-12"> <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" /> </div> </div> - <section class="notes"> - <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 development</a>.</p> - </section> + <div class="notes"> + <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"> <div class="column col-6 col-xs-12"> <figure class="figure"> @@ -1680,9 +1680,9 @@ <<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> - <section class="notes"> + <div class="notes"> <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> - </section> + </div> <div class="columns"> <div class="column col-12"> <figure class="figure"> @@ -1699,9 +1699,9 @@ </code></pre> <header class="text-center"><h4>Video</h4></header> - <section class="notes"> + <div class="notes"> <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> <div class="columns"> <div class="column col-12"> <div class="video-responsive"> @@ -1716,9 +1716,9 @@ <<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section class="container"> + <div class="container"> <div class="divider"></div> <ul class="pagination"> <li class="page-item page-prev"> @@ -1734,18 +1734,18 @@ </a> </li> </ul> - </section> + </div> </div> - </section> - </section> + </div> + </div> <footer class="section section-footer bg-gray"> - <section id="copyright" class="grid-footer container grid-960"> + <div 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> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</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> + </div> </footer> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |