diff options
1 files changed, 88 insertions, 97 deletions
| -rw-r--r-- | docs/elements.html | 185 |
diff --git a/docs/elements.html b/docs/elements.html index a196a4c..108b244 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -12,24 +12,19 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <div class="section section-header bg-gray"> - <div class="grid-header container grid-960"> - <nav class="navbar"> - <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> + <div class="container"> + <div class="columns"> + <div id="sidebar" class="s-sidebar"> + <div class="s-brand"> + <a href="index.html" class="s-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css" /> + <h2>Spectre.css</h2> + </a> </div> - <div class="navbar-section"> + <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> - </nav> - </div> - </div> - - <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="s-nav"> <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> @@ -39,19 +34,19 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="index.html#introduction">Introduction</a> + <a href="getting-started.html#introduction">Introduction</a> </li> <li class="menu-item"> - <a href="index.html#installation">Installation</a> + <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="index.html#compiling">Custom version</a> + <a href="getting-started.html#compiling">Custom version</a> </li> <li class="menu-item"> - <a href="index.html#browsers">Browser support</a> + <a href="getting-started.html#browsers">Browser support</a> </li> <li class="menu-item"> - <a href="index.html#whatsnew">What's new</a> + <a href="getting-started.html#whatsnew">What's new</a> </li> </ul> </div> @@ -252,38 +247,52 @@ </div> <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="docs-content column col-sm-12"> + <div class="s-content"> <div id="typography" class="container"> - <h3 class="text-center"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> + <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> <div class="notes"> - <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> + <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> </div> - <h4 class="text-center">Headings</h4> - <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> + <h4 class="s-subtitle">Headings</h4> + <div class="columns"> + <div class="column col-12"> + <h1>H1 Heading <small class="label">40px</small></h1> + </div> + <div class="column col-12"> + <h2>H2 Heading <small class="label">32px</small></h2> + </div> + <div class="column col-12"> + <h3>H3 Heading <small class="label">28px</small></h3> + </div> + <div class="column col-12"> + <h4>H4 Heading <small class="label">24px</small></h4> + </div> + <div class="column col-12"> + <h5>H5 Heading <small class="label">20px</small></h5> + </div> + <div class="column col-12"> + <h6>H6 Heading <small class="label">16px</small></h6> + </div> </div> <!-- headings example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">h1</span>>H1 Title<<span class="tag">/h1</span>> -<<span class="tag">h2</span>>H2 Title <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>4rem<<span class="tag">/small</span>><<span class="tag">/h2</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">h1</span>>H1 Heading<<span class="tag">/h1</span>> +<<span class="tag">h1</span>>H1 Heading <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>40px<<span class="tag">/small</span>><<span class="tag">/h1</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"h1"</span>>H1 Heading<<span class="tag">/span</span>> </code></pre> - <h4 class="text-center">Paragraphs</h4> + <h4 class="s-subtitle">Paragraphs</h4> <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> </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>> +<pre class="code" data-lang="HTML"><code><<span class="tag">p</span>>Lorem ipsum dolor sit amet, ...<<span class="tag">/p</span>> +<<span class="tag">p</span>>...<<span class="tag">/p</span>> </code></pre> - <h4 class="text-center">Semantic text elements</h4> + <h4 class="s-subtitle">Semantic text elements</h4> <div class="columns"> <div class="column col-4 col-xs-12"> <abbr title="Internationalization">I18N</abbr> @@ -362,16 +371,16 @@ </div> </div> - <h4 class="text-center">Optimized for east asian fonts</h4> + <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"> - <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p> - <h5>Chinese (Simplified)</h5> + <h6>Chinese (Simplified)</h6> <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p> - <h5>Chinese (Tranditional)</h5> + <h6>Chinese (Tranditional)</h6> <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p> - <h5>Japanese</h5> + <h6>Japanese</h6> <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> - <h5>Korean</h5> + <h6>Korean</h6> <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> </div> <div class="notes"> @@ -397,7 +406,7 @@ <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">del</span>>祇園<<span class="tag">/del</span>><<span class="tag">del</span>>精舎<<span class="tag">/del</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> </code></pre> - <h4 class="text-center">Blockquote</h4> + <h4 class="s-subtitle">Blockquote</h4> <blockquote> <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p> <cite>- Bill Gates</cite> @@ -410,7 +419,7 @@ <<span class="tag">/blockquote</span>> </code></pre> - <h4 class="text-center">Lists</h4> + <h4 class="s-subtitle">Lists</h4> <div class="columns"> <div class="column col-4 col-xs-12"> <ul class="list"> @@ -474,9 +483,9 @@ </div> <div id="tables" class="container"> - <h3 class="text-center"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> + <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> <div class="notes"> - <p><strong>Tables</strong> include default styles for tables and data sets.</p> + <p>Tables include default styles for tables and data sets.</p> </div> <table class="table table-striped"> <thead> @@ -536,13 +545,13 @@ </div> <div id="buttons" class="container"> - <h3 class="text-center"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> + <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> <div class="notes"> - <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p> + <p>Buttons include simple button styles for actions in different types and sizes. </p> </div> <div class="columns"> <div class="column col-xs-12"> - <button class="btn">default button</button> + <button class="btn loading-inline">default button</button> </div> <div class="column col-xs-12"> <button class="btn btn-primary">primary button</button> @@ -601,7 +610,7 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </code></pre> - <h4 class="text-center">Button sizes</h4> + <h4 class="s-subtitle">Button sizes</h4> <div class="columns"> <div class="column"> <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button> @@ -649,7 +658,7 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> </code></pre> - <h4 class="text-center">Button groups</h4> + <h4 class="s-subtitle">Button groups</h4> <div class="columns"> <div class="column col-xs-12"> <div class="btn-group"> @@ -697,9 +706,9 @@ </div> <div id="forms" class="container"> - <h3 class="text-center"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> + <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> <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> + <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> </div> <div class="columns"> <div class="column col-9 col-xs-12"> @@ -809,7 +818,7 @@ <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> </div> - <h4 class="text-center">Horizontal forms</h4> + <h4 class="s-subtitle">Horizontal forms</h4> <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> </div> @@ -908,7 +917,7 @@ <<span class="tag">/form</span>> </code></pre> - <h4 class="text-center">Form sizes</h4> + <h4 class="s-subtitle">Form sizes</h4> <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> </div> @@ -945,7 +954,7 @@ </div> </div> - <h4 class="text-center">Form icons</h4> + <h4 class="s-subtitle">Form icons</h4> <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> </div> @@ -1030,7 +1039,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="text-center">Input types</h4> + <h4 class="s-subtitle">Input types</h4> <div class="columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -1110,7 +1119,7 @@ </div> </div> - <h4 class="text-center">Input groups</h4> + <h4 class="s-subtitle">Input groups</h4> <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> @@ -1193,7 +1202,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="text-center">Form validation styles</h4> + <h4 class="s-subtitle">Form validation styles</h4> <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> </div> @@ -1292,7 +1301,7 @@ <<span class="tag">/form</span>> </code></pre> - <h4 class="text-center">Form disabled styles</h4> + <h4 class="s-subtitle">Form disabled styles</h4> <div class="notes"> <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> </div> @@ -1346,11 +1355,11 @@ </div> <div id="icons" class="container"> - <h3 class="text-center"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> + <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> <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> + <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="text-center">Navigation</h4> + <h4 class="s-subtitle">Navigation icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1431,7 +1440,7 @@ <p>icon-more-vert</p> </div> </div> - <h4 class="text-center">Action</h4> + <h4 class="s-subtitle">Action icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1536,7 +1545,7 @@ <p>icon-upload</p> </div> </div> - <h4 class="text-center">Object</h4> + <h4 class="s-subtitle">Object icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1595,9 +1604,9 @@ </div> <div id="labels" class="container"> - <h3 class="text-center"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> + <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> <div class="notes"> - <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p> + <p>Labels are formatted text tags for highlighted, informative information.</p> </div> <div class="columns"> <div class="column"> @@ -1609,7 +1618,7 @@ </div> </div> <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> + <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> <!-- labels example --> @@ -1620,9 +1629,9 @@ </div> <div id="codes" class="container"> - <h3 class="text-center"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> + <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> <div class="notes"> - <p><strong>Codes</strong> are inline and multiline code snippets.</p> + <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> @@ -1643,11 +1652,11 @@ </div> <div id="media" class="container"> - <h3 class="text-center"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> + <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> <div class="notes"> - <p><strong>Media</strong> includes responsive images, figures and video classes. </p> + <p>Media includes responsive images, figures and video classes. </p> </div> - <h4 class="text-center">Images</h4> + <h4 class="s-subtitle">Images</h4> <div class="notes"> <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> </div> @@ -1698,7 +1707,7 @@ <<span class="tag">/figure</span>> </code></pre> - <h4 class="text-center">Video</h4> + <h4 class="s-subtitle">Video</h4> <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> </div> @@ -1718,33 +1727,15 @@ </div> - <div class="container"> - <div class="divider"></div> - <ul class="pagination"> - <li class="page-item page-prev"> - <a href="index.html"> - <p class="page-item-subtitle">Previous</p> - <h4 class="page-item-title">Getting started</h4> - </a> - </li> - <li class="page-item page-next"> - <a href="layout.html"> - <p class="page-item-subtitle">Next</p> - <h4 class="page-item-title">Layout</h4> - </a> - </li> - </ul> - </div> + <footer class="s-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</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> + </footer> + </div> </div> </div> - <footer class="section section-footer bg-gray"> - <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> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</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> - </div> - </footer> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |