Skip to content

Commit

Permalink
update doc and add dl, dt and dd
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed May 3, 2016
1 parent 3e76e93 commit 85669b2
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 9 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "spectre.css",
"version": "0.1.16",
"version": "0.1.17",
"description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
"homepage": "http://picturepan2.github.io/spectre",
"repository": "picturepan2/spectre",
Expand Down
6 changes: 6 additions & 0 deletions dist/spectre.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,12 @@ ol {
ol ol {
list-style-type: lower-alpha;
}
dl dt {
font-weight: bold;
}
dl dd {
margin: .5rem 0 1.5rem 0;
}
.lead {
font-size: 120%;
}
Expand Down
2 changes: 1 addition & 1 deletion dist/spectre.min.css
View file

Large diffs are not rendered by default.

60 changes: 54 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ <h6>Korean</h6>

<header class="text-center"><h5>lists</h5></header>
<div class="columns">
<div class="column col-6">
<div class="column col-4">
<ul class="list">
<li>list item 1</li>
<li>list item 2
Expand All @@ -224,7 +224,7 @@ <h6>Korean</h6>
<li>list item 3</li>
</ul>
</div>
<div class="column col-6">
<div class="column col-4">
<ol class="list">
<li>list item 1</li>
<li>list item 2
Expand All @@ -237,11 +237,22 @@ <h6>Korean</h6>
<li>list item 3</li>
</ol>
</div>
<div class="column col-4">
<dl class="list">
<dt>description list term 1</dt>
<dd>description list description 1</dd>
<dt>description list term 2</dt>
<dd>description list description 2</dd>
<dt>description list term 3</dt>
<dd>description list description 3</dd>
</dl>
</div>
</div>

<!-- lists example -->
<pre class="code lang-html">
&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;list&quot;</span>&gt;
<span class="com">&lt;!-- unordered list --&gt;</span>
&lt;<span class="tag">ul</span>&gt;
&lt;<span class="tag">li</span>&gt;list item 1&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">li</span>&gt;list item 2
&lt;<span class="tag">ul</span>&gt;
Expand All @@ -252,6 +263,12 @@ <h6>Korean</h6>
&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">li</span>&gt;list item 3&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;

<span class="com">&lt;!-- description list --&gt;</span>
&lt;<span class="tag">dl</span>&gt;
&lt;<span class="tag">dt</span>&gt;description list term&lt;<span class="tag">/dt</span>&gt;
&lt;<span class="tag">dd</span>&gt;description list description&lt;<span class="tag">/dd</span>&gt;
&lt;<span class="tag">/dl</span>&gt;
</pre>

</section>
Expand Down Expand Up @@ -394,6 +411,17 @@ <h6>Korean</h6>
&lt;<span class="tag">/div</span>&gt;
</pre>

<section class="notes">
<p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p>
<ul>
<li><code>hide-xs</code> hides elements when the viewport is smaller than or equal to <strong>480px</strong>. </li>
<li><code>hide-sm</code> hides elements when the viewport is smaller than or equal to <strong>600px</strong>. </li>
<li><code>hide-md</code> hides elements when the viewport is smaller than or equal to <strong>840px</strong>. </li>
<li><code>hide-lg</code> hides elements when the viewport is smaller than or equal to <strong>960px</strong>. </li>
<li><code>hide-xl</code> hides elements when the viewport is smaller than or equal to <strong>1280px</strong>. </li>
</ul>
</section>

</section>

<section id="tables" class="grid-960">
Expand Down Expand Up @@ -439,7 +467,8 @@ <h6>Korean</h6>
</tbody>
</table>
<section class="notes">
<p>Add the class <code>table</code> to any &lt;table&gt; element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to &lt;table&gt; to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. Then use the class <code>selected</code> to make &lt;tr&gt; element highlighted. </p>
<p>Add the class <code>table</code> to any &lt;table&gt; element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to &lt;table&gt; 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>selected</code> to make &lt;tr&gt; element highlighted. </p>
</section>

<!-- tables example -->
Expand Down Expand Up @@ -771,6 +800,7 @@ <h6>Korean</h6>
</pre>

<section class="notes">
<p>For smaller input and select controls, you could add <code>input-sm</code> and <code>select-sm</code> to the elements.</p>
<p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the &lt;form&gt; container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. Please note <code>form-horizontal</code> only works in viewports that are at least 840px wide.</p>
</section>

Expand Down Expand Up @@ -2129,13 +2159,31 @@ <h6 class="card-meta">Software and hardware</h6>

</section>

<section id="divider" class="grid-960">
<section class="notes">
<p>A <strong>Divider</strong> is used for separating elements.</p>
</section>
<div class="columns">
<div class="column">
<div class="divider"></div>
</div>
</div>

<!-- shape utilities example -->
<pre class="code lang-html">
<span class="com">&lt;!-- divider element --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
</pre>

</section>

<section id="loading" class="grid-960">
<section class="notes">
<p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the class <code>loading</code> to buttons for loading status.</p>
</section>
<div class="columns">
<div class="column">
<div class="loading">Loading</div>
<div class="loading"></div>
</div>
</div>
<!-- loading example -->
Expand All @@ -2149,7 +2197,7 @@ <h6 class="card-meta">Software and hardware</h6>
<footer class="bg-grey">
<section id="copyright" class="grid-footer grid-960">
<p>
<a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.16
<a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.17
</p>
<p>Designed and built with love 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>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "spectre.css",
"version": "0.1.16",
"version": "0.1.17",
"homepage": "http://picturepan2.github.io/spectre",
"author": "Yan Zhu <picturepan2@hotmail.com>",
"description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
Expand Down
8 changes: 8 additions & 0 deletions src/typography.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,14 @@ ol {
list-style-type: lower-alpha;
}
}
dl {
dt {
font-weight: bold;
}
dd {
margin: .5rem 0 1.5rem 0;
}
}
.lead {
font-size: 120%;
}
Expand Down

0 comments on commit 85669b2

Please sign in to comment.