Summary Files Commits Branches @commit @diff @stats
path: root / docs / components.html
diff options
context:
space:
mode:
1 files changed, 116 insertions, 122 deletions
-rw-r--r--docs/components.html238
diff --git a/docs/components.html b/docs/components.html
index 7089ade..8ea64c9 100644
--- a/docs/components.html
+++ b/docs/components.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,11 +247,11 @@
</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="accordions" class="container">
- <h3 class="text-center"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
+ <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
<div class="notes">
- <p><strong>Accordions</strong> are used to toggle sections of content.</p>
+ <p>Accordions are used to toggle sections of content.</p>
</div>
<div class="columns">
<div class="column col-6 col-md-12">
@@ -405,9 +400,9 @@
</div>
<div id="autocomplete" class="container">
- <h3 class="text-center"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
+ <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
<div class="notes">
- <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p>
+ <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p>
</div>
<div class="columns">
<div class="column col-9 col-xs-12">
@@ -532,9 +527,9 @@
</div>
<div id="avatars" class="container">
- <h3 class="text-center"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
+ <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
<div class="notes">
- <p><strong>Avatars</strong> are user profile pictures. </p>
+ <p>Avatars are user profile pictures. </p>
</div>
<div class="columns">
<div class="column col-6 col-xs-12">
@@ -613,9 +608,9 @@
</div>
<div id="badges" class="container">
- <h3 class="text-center"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3>
+ <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3>
<div class="notes">
- <p><strong>Badges</strong> are often used as unread number indicators.</p>
+ <p>Badges are often used as unread number indicators.</p>
</div>
<div class="columns">
<div class="column col-3 col-xs-6">
@@ -689,9 +684,9 @@
</div>
<div id="bars" class="container">
- <h3 class="text-center"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3>
+ <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3>
<div class="notes">
- <p><strong>Bars</strong> represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
+ <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
</div>
<div class="columns">
<div class="column col-8 col-xs-12">
@@ -734,7 +729,7 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- <h4 class="text-center">Slider bars</h4>
+ <h4 class="s-subtitle">Slider bars</h4>
<div class="columns">
<div class="column col-8 col-xs-12">
<div class="bar bar-slider">
@@ -784,9 +779,26 @@
</div>
<div id="breadcrumbs" class="container">
- <h3 class="text-center"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3>
+ <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3>
+ <div class="notes">
+ <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
+ </div>
<div class="columns">
- <div class="column col-6 col-md-12">
+ <div class="column col-12">
+ <ul class="breadcrumb" role="navigation">
+ <li class="breadcrumb-item">
+ <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
+ Home
+ </a>
+ </li>
+ <li class="breadcrumb-item">
+ <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
+ Settings
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div class="column col-12">
<ul class="breadcrumb" role="navigation">
<li class="breadcrumb-item">
<a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
@@ -794,27 +806,32 @@
</a>
</li>
<li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Profile">
- Profile
+ <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
+ Settings
</a>
</li>
<li class="breadcrumb-item">
- <a href="#breadcrumbs">
+ <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar">
Change avatar
</a>
</li>
</ul>
</div>
- <div class="column col-6 col-md-12">
+ <div class="column col-12">
<ul class="breadcrumb">
<li class="breadcrumb-item">
- <a href="#breadcrumbs">
+ <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
Home
</a>
</li>
<li class="breadcrumb-item">
+ <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
+ Settings
+ </a>
+ </li>
+ <li class="breadcrumb-item">
Search result:
- <a href="#breadcrumbs">
+ <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre">
Spectre
</a>
</li>
@@ -828,19 +845,13 @@
<!-- breadcrumbs example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb&quot;</span>&gt;
&lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- Home
- &lt;<span class="tag">/a</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Home&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- Profile
- &lt;<span class="tag">/a</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Settings&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- Change avatar
- &lt;<span class="tag">/a</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Change avatar&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>
@@ -848,9 +859,9 @@
</div>
<div id="cards" class="container">
- <h3 class="text-center"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
+ <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
<div class="notes">
- <p><strong>Cards</strong> are flexible content containers.</p>
+ <p>Cards are flexible content containers.</p>
</div>
<div class="columns">
<div class="column col-6 col-xs-12">
@@ -859,7 +870,7 @@
<img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan" />
</div>
<div class="card-header">
- <div class="card-title">Microsoft</div>
+ <div class="card-title h5">Microsoft</div>
<div class="card-subtitle">Software and hardware</div>
</div>
<div class="card-body">
@@ -873,7 +884,7 @@
<div class="column col-6 col-xs-12">
<div class="card">
<div class="card-header">
- <div class="card-title">Apple</div>
+ <div class="card-title h5">Apple</div>
<div class="card-subtitle">Hardware and software</div>
</div>
<div class="card-image">
@@ -893,19 +904,16 @@
</div>
<div class="column col-6 col-xs-12">
<div class="card">
+ <div class="card-image">
+ <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra" />
+ </div>
<div class="card-header">
- <div class="card-title">Google</div>
+ <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
+ <div class="card-title h5">Google I/O</div>
<div class="card-subtitle">Software and hardware</div>
</div>
<div class="card-body">
- Organize the world’s information and make it universally accessible and useful.
- </div>
- <div class="card-image">
- <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"/>
- </div>
- <div class="card-footer">
- <a href="#cards" class="btn btn-primary">Search</a>
- <a href="#cards" class="btn btn-link">Share</a>
+ An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
</div>
</div>
</div>
@@ -926,7 +934,7 @@
<div class="column col-6 col-xs-12">
<div class="card">
<div class="card-header">
- <div class="card-title">Apple</div>
+ <div class="card-title h5">Apple</div>
<div class="card-subtitle">Hardware and software</div>
</div>
<div class="card-body">
@@ -939,16 +947,19 @@
</div>
<div class="column col-6 col-xs-12">
<div class="card">
- <div class="card-image">
- <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra" />
- </div>
<div class="card-header">
- <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
- <div class="card-title">Google I/O</div>
+ <div class="card-title h5">Google</div>
<div class="card-subtitle">Software and hardware</div>
</div>
<div class="card-body">
- An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+ Organize the world’s information and make it universally accessible and useful.
+ </div>
+ <div class="card-image">
+ <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"/>
+ </div>
+ <div class="card-footer">
+ <a href="#cards" class="btn btn-primary">Search</a>
+ <a href="#cards" class="btn btn-link">Share</a>
</div>
</div>
</div>
@@ -963,8 +974,8 @@
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive&quot;</span> /&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-header&quot;</span>&gt;
- &lt;<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">&quot;card-title&quot;</span>&gt;Microsoft&lt;<span class="tag">/h4</span>&gt;
- &lt;<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">&quot;card-subtitle&quot;</span>&gt;Software and hardware&lt;<span class="tag">/h6</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-title h5&quot;</span>&gt;Microsoft&lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-subtitle&quot;</span>&gt;Software and hardware&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
Empower every person and every organization on the planet to achieve more.
@@ -978,9 +989,9 @@
</div>
<div id="chips" class="container">
- <h3 class="text-center"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3>
+ <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3>
<div class="notes">
- <p><strong>Chips</strong> are complex entities in small blocks. </p>
+ <p>Chips are complex entities in small blocks. </p>
</div>
<div class="columns">
<div class="column col-12">
@@ -1036,9 +1047,9 @@
</div>
<div id="menus" class="container">
- <h3 class="text-center"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3>
+ <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3>
<div class="notes">
- <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p>
+ <p>Menus are vertical list of links or buttons for actions and navigation.</p>
</div>
<div class="columns">
<div class="column col-xs-12">
@@ -1118,9 +1129,9 @@
&lt;<span class="tag">/ul</span>&gt;
</code></pre>
- <h4 id="dropdowns" class="text-center"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4>
+ <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4>
<div class="notes">
- <p>The <strong>dropdown</strong> is a combination of buttons and menus.</p>
+ <p>The dropdown is a combination of buttons and menus.</p>
</div>
<div class="columns">
<div class="column col-xs-12">
@@ -1234,9 +1245,9 @@
</div>
<div id="modals" class="container">
- <h3 class="text-center"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3>
+ <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3>
<div class="notes">
- <p><strong>Modals</strong> are flexible dialog prompts.</p>
+ <p>Modals are flexible dialog prompts.</p>
</div>
<div class="columns">
<div class="column">
@@ -1295,7 +1306,7 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- <h4 class="text-center">Modal sizes</h4>
+ <h4 class="s-subtitle">Modal sizes</h4>
<div class="columns">
<div class="column col-6 col-xs-12">
<div class="modal-temp modal-sm">
@@ -1370,7 +1381,7 @@
</div>
<div id="pagination" class="container">
- <h3 class="text-center"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3>
+ <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3>
<div class="columns">
<div class="column col-xs-12">
<ul class="pagination">
@@ -1501,7 +1512,7 @@
</div>
<div id="navs" class="container">
- <h3 class="text-center"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3>
+ <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3>
<div class="columns">
<div class="column col-6 col-xs-12">
<ul class="nav">
@@ -1572,9 +1583,9 @@
</div>
<div id="popovers" class="container">
- <h3 class="text-center"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3>
+ <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3>
<div class="notes">
- <p><strong>Popovers</strong> are small overlay content containers. Popovers component is built entirely in CSS.</p>
+ <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
</div>
<div class="columns">
<div class="column col-3 col-sm-6">
@@ -1689,9 +1700,9 @@
</div>
<div id="steps" class="container">
- <h3 class="text-center"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3>
+ <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3>
<div class="notes">
- <p><strong>Steps</strong> are progress indicators of a sequence of task steps.</p>
+ <p>Steps are progress indicators of a sequence of task steps.</p>
</div>
<div class="columns">
<div class="column col-12">
@@ -1751,9 +1762,9 @@
</div>
<div id="tabs" class="container">
- <h3 class="text-center"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3>
+ <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3>
<div class="notes">
- <p><strong>Tabs</strong> enable quick switch between different views.</p>
+ <p>Tabs enable quick switch between different views.</p>
</div>
<div class="columns">
<div class="column col-6 col-sm-12">
@@ -1931,9 +1942,9 @@
</div>
<div id="tiles" class="container">
- <h3 class="text-center"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3>
+ <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3>
<div class="notes">
- <p><strong>Tiles</strong> are repeatable or embeddable information blocks.</p>
+ <p>Tiles are repeatable or embeddable information blocks.</p>
</div>
<div class="columns">
<div class="column col-9 col-sm-12">
@@ -1993,7 +2004,7 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- <h4 class="text-center">Compact tiles</h4>
+ <h4 class="s-subtitle">Compact tiles</h4>
<div class="notes">
<p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
<p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p>
@@ -2039,14 +2050,15 @@
</div>
<div id="toasts" class="container">
- <h3 class="text-center"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3>
+ <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3>
<div class="notes">
- <p><strong>Toasts</strong> are used to show alert or information to users.</p>
+ <p>Toasts are used to show alert or information to users.</p>
</div>
<div class="columns">
<div class="column col-9 col-sm-12">
<div class="toast">
<button class="btn btn-clear float-right"></button>
+ <h5>Toast Title</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
@@ -2098,22 +2110,22 @@
</div>
<div id="tooltips" class="container">
- <h3 class="text-center"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3>
+ <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3>
<div class="notes">
- <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p>
+ <p>Tooltips provide context information labels that appear on hover and focus.</p>
</div>
<div class="columns text-center">
<div class="column col-xs-12">
- <button class="btn btn-primary tooltip" data-tooltip="Tooltip Text">top tooltip</button>
+ <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button>
</div>
<div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Tooltip Text">right tooltip</button>
+ <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button>
</div>
<div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Tooltip Text">bottom tooltip</button>
+ <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button>
</div>
<div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Tooltip Text">left tooltip</button>
+ <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button>
</div>
</div>
<div class="notes">
@@ -2128,33 +2140,15 @@
</div>
- <div class="container">
- <div class="divider"></div>
- <ul class="pagination">
- <li class="page-item page-prev">
- <a href="layout.html">
- <p class="page-item-subtitle">Previous</p>
- <h4 class="page-item-title">Layout</h4>
- </a>
- </li>
- <li class="page-item page-next">
- <a href="utilities.html">
- <p class="page-item-subtitle">Next</p>
- <h4 class="page-item-title">Utilities</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),