Skip to content

Commit

Permalink
Minor update to the Docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Aug 3, 2017
1 parent a2f1864 commit f4057ff
Show file tree
Hide file tree
Showing 8 changed files with 78 additions and 84 deletions.
6 changes: 2 additions & 4 deletions docs/components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1430,7 +1430,7 @@ <h3 class="text-center"><a href="#pagination" class="anchor" aria-hidden="true">
</div>
</div>
<div class="notes">
<p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted.</p>
<p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p>
</div>

<!-- pagination example -->
Expand Down Expand Up @@ -2151,9 +2151,7 @@ <h4 class="page-item-title">Utilities</h4>

<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> | Version <span class="version"></span>
</p>
<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>
Expand Down
11 changes: 7 additions & 4 deletions docs/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}
.section-footer {
color: #acb3c2;
padding: 25px 15px 10px 15px;
padding: 26px 15px 10px 15px;
position: relative;
z-index: 200;
}
Expand Down Expand Up @@ -86,15 +86,18 @@
overflow: auto;
}
.docs-content {
padding-bottom: 50px;
padding-top: 0;
}
.docs-content .container {
padding: 10px;
}
.docs-content header {
.docs-content .container > h3,
.docs-content .container > h4 {
padding-top: 55px;
}
.docs-content .anchor {
color: #626fca;
height: 0;
margin-left: -1em;
overflow: hidden;
Expand Down Expand Up @@ -218,12 +221,12 @@
padding: 0 5px;
}
.docs-sidebar {
padding: 70px 10px 50px 10px;
padding: 70px 10px 70px 10px;
position: relative;
}
.docs-sidebar .docs-nav {
bottom: 50px;
height: calc(100vh - 120px);
height: calc(100vh - 140px);
overflow-y: auto;
position: fixed;
top: 90px;
Expand Down
60 changes: 29 additions & 31 deletions docs/elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,11 +254,11 @@

<div class="docs-content column col-sm-12">
<div id="typography" class="container">
<header class="text-center"><h3><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3></header>
<h3 class="text-center"><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>
</div>
<header class="text-center"><h4>Headings</h4></header>
<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>
Expand All @@ -273,7 +273,7 @@ <h6>H6 Title <small class="label">1.6rem</small></h6>
&lt;<span class="tag">h2</span>&gt;H2 Title &lt;<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;4rem&lt;<span class="tag">/small</span>&gt;&lt;<span class="tag">/h2</span>&gt;
</code></pre>

<header class="text-center"><h4>Paragraphs</h4></header>
<h4 class="text-center">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>
Expand All @@ -283,7 +283,7 @@ <h6>H6 Title <small class="label">1.6rem</small></h6>
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;dictum in vehicula sit amet&lt;<span class="tag">/a</span>&gt;, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.&lt;<span class="tag">/p</span>&gt;
</code></pre>

<header class="text-center"><h4>Semantic text elements</h4></header>
<h4 class="text-center">Semantic text elements</h4>
<div class="columns">
<div class="column col-4 col-xs-12">
<abbr title="Internationalization">I18N</abbr>
Expand Down Expand Up @@ -362,7 +362,7 @@ <h6>H6 Title <small class="label">1.6rem</small></h6>
</div>
</div>

<header class="text-center"><h4>Optimized for east asian fonts</h4></header>
<h4 class="text-center">Optimized for east asian fonts</h4>
<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>
Expand Down Expand Up @@ -397,7 +397,7 @@ <h5>Korean</h5>
&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">del</span>&gt;祇園&lt;<span class="tag">/del</span>&gt;&lt;<span class="tag">del</span>&gt;精舎&lt;<span class="tag">/del</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
</code></pre>

<header class="text-center"><h4>Blockquote</h4></header>
<h4 class="text-center">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>
Expand All @@ -410,7 +410,7 @@ <h5>Korean</h5>
&lt;<span class="tag">/blockquote</span>&gt;
</code></pre>

<header class="text-center"><h4>Lists</h4></header>
<h4 class="text-center">Lists</h4>
<div class="columns">
<div class="column col-4 col-xs-12">
<ul class="list">
Expand Down Expand Up @@ -474,7 +474,7 @@ <h5>Korean</h5>
</div>

<div id="tables" class="container">
<header class="text-center"><h3><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3></header>
<h3 class="text-center"><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>
</div>
Expand Down Expand Up @@ -536,7 +536,7 @@ <h5>Korean</h5>
</div>

<div id="buttons" class="container">
<header class="text-center"><h3><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3></header>
<h3 class="text-center"><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>
</div>
Expand Down Expand Up @@ -601,7 +601,7 @@ <h5>Korean</h5>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn loading&quot;</span>&gt;button&lt;<span class="tag">/button</span>&gt;
</code></pre>

<header class="text-center"><h4>Button sizes</h4></header>
<h4 class="text-center">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>
Expand Down Expand Up @@ -649,7 +649,7 @@ <h5>Korean</h5>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
</code></pre>

<header class="text-center"><h4>Button groups</h4></header>
<h4 class="text-center">Button groups</h4>
<div class="columns">
<div class="column col-xs-12">
<div class="btn-group">
Expand Down Expand Up @@ -697,7 +697,7 @@ <h5>Korean</h5>
</div>

<div id="forms" class="container">
<header class="text-center"><h3><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3></header>
<h3 class="text-center"><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>
</div>
Expand Down Expand Up @@ -809,7 +809,7 @@ <h5>Korean</h5>
<p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p>
</div>

<header class="text-center"><h4>Horizontal forms</h4></header>
<h4 class="text-center">Horizontal forms</h4>
<div class="notes">
<p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p>
</div>
Expand Down Expand Up @@ -908,7 +908,7 @@ <h5>Korean</h5>
&lt;<span class="tag">/form</span>&gt;
</code></pre>

<header class="text-center"><h4>Form sizes</h4></header>
<h4 class="text-center">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>
Expand Down Expand Up @@ -945,7 +945,7 @@ <h5>Korean</h5>
</div>
</div>

<header class="text-center"><h4>Form icons</h4></header>
<h4 class="text-center">Form icons</h4>
<div class="notes">
<p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element. And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.</p>
</div>
Expand Down Expand Up @@ -1030,7 +1030,7 @@ <h5>Korean</h5>
&lt;<span class="tag">/div</span>&gt;
</code></pre>

<header class="text-center"><h4>Input types</h4></header>
<h4 class="text-center">Input types</h4>
<div class="columns">
<div class="column col-9 col-sm-12">
<form class="form-horizontal" action="#forms">
Expand Down Expand Up @@ -1110,7 +1110,7 @@ <h5>Korean</h5>
</div>
</div>

<header class="text-center"><h4>Input groups</h4></header>
<h4 class="text-center">Input groups</h4>
<div class="columns">
<div class="column col-xs-12">
<div class="input-group">
Expand Down Expand Up @@ -1193,7 +1193,7 @@ <h5>Korean</h5>
&lt;<span class="tag">/div</span>&gt;
</code></pre>

<header class="text-center"><h4>Form validation styles</h4></header>
<h4 class="text-center">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>
Expand Down Expand Up @@ -1292,7 +1292,7 @@ <h5>Korean</h5>
&lt;<span class="tag">/form</span>&gt;
</code></pre>

<header class="text-center"><h4>Form disabled styles</h4></header>
<h4 class="text-center">Form disabled styles</h4>
<div class="notes">
<p>Add the <code>disabled</code> attribute to the element or &lt;fieldset&gt; for a disabled form components style.</p>
</div>
Expand Down Expand Up @@ -1346,11 +1346,11 @@ <h5>Korean</h5>
</div>

<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>
<h3 class="text-center"><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 &lt;head&gt; to have these CSS icons.</p>
</div>
<header class="text-center"><h4>Navigation</h4></header>
<h4 class="text-center">Navigation</h4>
<div class="columns">
<div class="column col-3 col-md-6">
<button class="btn btn-primary btn-action btn-lg">
Expand Down Expand Up @@ -1431,7 +1431,7 @@ <h5>Korean</h5>
<p>icon-more-vert</p>
</div>
</div>
<header class="text-center"><h4>Action</h4></header>
<h4 class="text-center">Action</h4>
<div class="columns">
<div class="column col-3 col-md-6">
<button class="btn btn-primary btn-action btn-lg">
Expand Down Expand Up @@ -1536,7 +1536,7 @@ <h5>Korean</h5>
<p>icon-upload</p>
</div>
</div>
<header class="text-center"><h4>Object</h4></header>
<h4 class="text-center">Object</h4>
<div class="columns">
<div class="column col-3 col-md-6">
<button class="btn btn-primary btn-action btn-lg">
Expand Down Expand Up @@ -1595,7 +1595,7 @@ <h5>Korean</h5>
</div>

<div id="labels" class="container">
<header class="text-center"><h3><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3></header>
<h3 class="text-center"><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>
</div>
Expand All @@ -1620,7 +1620,7 @@ <h5>Korean</h5>
</div>

<div id="codes" class="container">
<header class="text-center"><h3><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3></header>
<h3 class="text-center"><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>For inline code, you can use the element <code>&lt;code&gt;</code>. For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p>
Expand All @@ -1643,11 +1643,11 @@ <h5>Korean</h5>
</div>

<div id="media" class="container">
<header class="text-center"><h3><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3></header>
<h3 class="text-center"><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>
</div>
<header class="text-center"><h4>Images</h4></header>
<h4 class="text-center">Images</h4>
<div class="notes">
<p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
</div>
Expand Down Expand Up @@ -1698,7 +1698,7 @@ <h5>Korean</h5>
&lt;<span class="tag">/figure</span>&gt;
</code></pre>

<header class="text-center"><h4>Video</h4></header>
<h4 class="text-center">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>
Expand Down Expand Up @@ -1741,9 +1741,7 @@ <h4 class="page-item-title">Layout</h4>

<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> | Version <span class="version"></span>
</p>
<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>
Expand Down
Loading

0 comments on commit f4057ff

Please sign in to comment.