Summary Files Commits Branches @commit @diff @stats
path: root / docs / index.html
diff options
context:
space:
mode:
Commitb15b0cee1110e83a26326dacdbc995364dd07cdb (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-08-13 16:47:13 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2017-08-13 16:47:13 +0800
Files737671735609b8ef796bded3710d2ec837e72b6d /docs/index.html
Spectre-Dark-Gruvbox-b15b0cee1110e83a26326dacdbc995364dd07cdb.tar
Spectre-Dark-Gruvbox-b15b0cee1110e83a26326dacdbc995364dd07cdb.tar.gz
Spectre-Dark-Gruvbox-b15b0cee1110e83a26326dacdbc995364dd07cdb.zip
Parentf4057ff8d3a36350728411de0010fdcf10dfc860 (diff)
Completely rewritten Docs experience
1 files changed, 70 insertions, 513 deletions
-rw-r--r--docs/index.html583
diff --git a/docs/index.html b/docs/index.html
index cc806a2..e5672fd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,27 +12,24 @@
<link rel="stylesheet" href="css/docs.css" />
</head>
<body>
- <div class="section section-header bg-gray">
+ <div class="section section-header hide">
<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="s-brand">
+ <div href="index.html" class="s-logo">
+ <img src="img/spectre-logo.svg" alt="Spectre.css" />
+ <h2>Spectre.css</h2>
</div>
- <div class="navbar-section">
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
- </div>
- </nav>
+ </div>
</div>
</div>
- <div class="section section-hero bg-gray">
+ <div class="section section-hero bg-light">
<div id="overview" class="grid-hero container grid-960 text-center">
<h1>Spectre.css</h1>
<h2>The <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2>
<div class="columns">
<div class="column">
- <a href="index.html#introduction" class="btn btn-primary">Docs</a>
+ <a href="getting-started.html" class="btn btn-primary">Docs</a>
<a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
</div>
</div>
@@ -63,7 +60,7 @@
<span class="card-title">Modern</span>
</div>
<div class="card-body">
- Carefully designed elements and components
+ Elegantly designed and developed elements and components
</div>
</div>
</div>
@@ -71,529 +68,89 @@
</div>
</div>
- <div class="container grid-960">
- <div class="columns">
- <div id="sidebar" class="docs-sidebar column col-sm-12">
- <div class="docs-nav">
- <div class="accordion">
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked />
- <label class="accordion-header hand" for="docs-accordion-1">
- Getting started
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="index.html#introduction">Introduction</a>
- </li>
- <li class="menu-item">
- <a href="index.html#installation">Installation</a>
- </li>
- <li class="menu-item">
- <a href="index.html#compiling">Custom version</a>
- </li>
- <li class="menu-item">
- <a href="index.html#browsers">Browser support</a>
- </li>
- <li class="menu-item">
- <a href="index.html#whatsnew">What's new</a>
- </li>
- </ul>
- </div>
+ <div class="section section-features bg-primary">
+
+ </div>
+
+ <div class="section section-updates bg-gray">
+ <div id="updates" class="container grid-960">
+ <div class="columns">
+ <div class="column col-4 col-xs-12">
+ <div class="card mb-10">
+ <div class="card-header">
+ <div class="card-title h6">Spectre Twitter</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
- <label class="accordion-header hand" for="docs-accordion-2">
- Elements
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="elements.html#typography">Typography</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#tables">Tables</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#buttons">Buttons</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#forms">Forms</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#icons">Icons</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#labels">Labels</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#codes">Codes</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#media">Media</a>
- </li>
- </ul>
- </div>
+ <div class="card-body">
+ For the latest announcements and updates, follow on Twitter: <a href="https://twitter.com/spectrecss" target="_blank">@spectrecss</a>.
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
- <label class="accordion-header hand" for="docs-accordion-3">
- Layout
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="layout.html#grid">Flexbox grid</a>
- </li>
- <li class="menu-item">
- <a href="layout.html#responsive">Responsive</a>
- </li>
- <li class="menu-item">
- <a href="layout.html#navbar">Navbar</a>
- </li>
- <li class="menu-item">
- <a href="layout.html#panels">Panels</a>
- </li>
- <li class="menu-item">
- <a href="layout.html#empty">Empty states</a>
- </li>
- </ul>
- </div>
+ <div class="card-footer">
+ <a href="https://twitter.com/spectrecss" class="btn" target="_blank">Follow</a>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
- <label class="accordion-header hand" for="docs-accordion-4">
- Components
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="components.html#accordions">Accordions</a>
- </li>
- <li class="menu-item">
- <a href="components.html#autocomplete">Autocomplete</a>
- </li>
- <li class="menu-item">
- <a href="components.html#avatars">Avatars</a>
- </li>
- <li class="menu-item">
- <a href="components.html#badges">Badges</a>
- </li>
- <li class="menu-item">
- <a href="components.html#bars">Bars</a>
- </li>
- <li class="menu-item">
- <a href="components.html#breadcrumbs">Breadcrumbs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#cards">Cards</a>
- </li>
- <li class="menu-item">
- <a href="components.html#chips">Chips</a>
- </li>
- <li class="menu-item">
- <a href="components.html#menus">Menus</a>
- </li>
- <li class="menu-item">
- <a href="components.html#modals">Modals</a>
- </li>
- <li class="menu-item">
- <a href="components.html#navs">Navs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#pagination">Pagination</a>
- </li>
- <li class="menu-item">
- <a href="components.html#popovers">Popovers</a>
- </li>
- <li class="menu-item">
- <a href="components.html#steps">Steps</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tabs">Tabs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tiles">Tiles</a>
- </li>
- <li class="menu-item">
- <a href="components.html#toasts">Toasts</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tooltips">Tooltips</a>
- </li>
- </ul>
- </div>
+ </div>
+ <div class="card mb-10">
+ <div class="card-header">
+ <div class="card-title h6">PayPal Donate</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
- <label class="accordion-header hand" for="docs-accordion-5">
- Utilities
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="utilities.html#colors">Colors</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#display">Display</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#divider">Divider</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#loading">Loading</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#position">Position</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#shapes">Shapes</a>
- </li>
- <li class="menu-item">
- <a href="utilities.html#text">Text</a>
- </li>
- </ul>
- </div>
+ <div class="card-body">
+ Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. ♥
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
- <label class="accordion-header hand" for="docs-accordion-6">
- Experimentals
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="experimentals.html#calendars">Calendars</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#carousels">Carousels</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#comparison">Comparison sliders</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#filters">Filters</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#meters">Meters</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#parallax">Parallax</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#progress">Progress</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#sliders">Sliders</a>
- </li>
- <li class="menu-item">
- <a href="experimentals.html#timelines">Timelines</a>
- </li>
- </ul>
- </div>
+ <div class="card-footer">
+ <a href="https://www.paypal.me/picturepan2" class="btn" target="_blank">Donate</a>
</div>
</div>
</div>
- </div>
- <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
-
- <div class="docs-content column col-sm-12">
- <div id="introduction" class="container">
- <h3 class="text-center"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3>
- <div class="notes">
- <p><strong>Spectre.css</strong> is a lightweight and responsive and modern CSS framework for faster and extensible development.</p>
- <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.</p>
- </div>
- </div>
-
- <div id="installation" class="container">
- <h3 class="text-center"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3>
- <div class="notes">
- <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
- </div>
- <div class="notes">
- <h5>Install manually</h5>
- <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/docs/dist" target="_blank">Spectre CSS file</a> (~10KB min+gzip):</p>
- <p><a href="https://github.com/picturepan2/spectre/tree/master/docs/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
- <p>Include <code>spectre.css</code> located in <strong>/docs/dist</strong> in your website or Web app &lt;head&gt;. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p>
- </div>
-
-<!-- install manually example -->
-<pre class="code"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre.min.css&quot;</span> /&gt;
-&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre-exp.min.css&quot;</span> /&gt;
-&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre-icons.min.css&quot;</span> /&gt;
-</code></pre>
-
- <div class="notes">
- <h5>Install from CDN</h5>
- <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> CDN to load compiled Spectre.css.</p>
- </div>
-
-<!-- install from CDN example -->
-<pre class="code"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre.min.css&quot;</span> /&gt;
-</code></pre>
-
- <div class="notes">
- <h5>Install with NPM</h5>
-
-<!-- install with npm example -->
-<pre class="code"><code><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save
-</code></pre>
-
- </div>
- <div class="notes">
- <h5>Install with Yarn</h5>
-
-<!-- install with yarn example -->
-<pre class="code"><code><span class="tag">$</span> yarn add <span class="atv">spectre.css</span>
-</code></pre>
-
- </div>
- <div class="notes">
- <h5>Install with Bower</h5>
-
-<!-- install with bower example -->
-<pre class="code"><code><span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save
-</code></pre>
-
- </div>
-
- </div>
-
- <div id="compiling" class="container">
- <h3 class="text-center"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3>
- <div class="notes">
- <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>, <code>spectre-exp.less</code> and <code>spectre-icons.less</code>.</p>
- <p>Then, you can build the CSS file from the command line:</p>
- <ol>
- <li>Navigate to the root directory of Spectre.</li>
- <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
- <li>When completed, run <code>gulp build</code> to compile LESS to CSS and minify files.</li>
- <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
- </ol>
- <p>You can watch file changes and rebuild CSS files by using <code>gulp watch</code>.</p>
+ <div class="column col-4 col-xs-12">
+ <div class="card mb-10">
+ <div class="card-header">
+ <div class="card-title h6">Spectre Logo</div>
+ </div>
+ <div class="card-body text-center">
+ <img src="img/spectre-logo.svg" alt="Spectre.css" class="update-branding" />
+ </div>
</div>
-
-<!-- file structure -->
-<pre class="code"><code>spectre/
-├── dist/ <span class="com">// Build folder (Git ignored)</span>
-│ ├── spectre-exp.css
-│ ├── spectre-exp.min.css
-│ ├── spectre-icons.css
-│ ├── spectre-icons.min.css
-│ ├── spectre.css
-│ └── spectre.min.css
-│
-├── docs/
-│ ├── dist/ <span class="com">// Pre-built CSS folder</span>
-│ │ ├── spectre-exp.css
-│ │ ├── spectre-exp.min.css
-│ │ ├── spectre-icons.css
-│ │ ├── spectre-icons.min.css
-│ │ ├── spectre.css
-│ │ └── spectre.min.css
-| ├── css/ <span class="com">// Docs CSS file</span>
-│ │ └── docs.css
-| ├── src/
-│ │ └── docs.less
-│ ├── ../
-│ ├── index.html
-│ └── ...
-│
-├── src/ <span class="com">// Source LESS files</span>
-│ ├── mixins.less
-│ ├── variables.less
-│ └── ...
-│
-├── spectre-exp.less
-├── spectre-icons.less
-└── spectre.less
-</code></pre>
-
- <h4 id="variables" class="text-center"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4>
- <div class="notes">
- <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.
- <h5>Colors</h5>
- <div class="columns">
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#5764c6;color:#fff;">
- <div class="color-title">#5764c6</div>
- <div class="color-subtitle">Primary</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#eff1fa;color:#5764c6;">
- <div class="color-title">#eff1fa</div>
- <div class="color-subtitle">Secondary</div>
- </div>
- </div>
+ <div class="card mb-10">
+ <div class="card-header">
+ <div class="card-title h6">Responsive Resizer</div>
</div>
- <div class="columns">
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#454d5d;color:#fff;">
- <div class="color-title">#454d5d</div>
- <div class="color-subtitle">Dark</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#727e96;color:#fff;">
- <div class="color-title">#727e96</div>
- <div class="color-subtitle">Gray dark</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#acb3c2;color:#fff;">
- <div class="color-title">#acb3c2</div>
- <div class="color-subtitle">Gray</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#e7e9ed;color:#727e96;">
- <div class="color-title">#e7e9ed</div>
- <div class="color-subtitle">Gray light</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#f0f1f4;color:#727e96;">
- <div class="color-title">#f0f1f4</div>
- <div class="color-subtitle">Border</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#f8f9fa;color:#727e96;">
- <div class="color-title">#f8f9fa</div>
- <div class="color-subtitle">Background</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#fff;color:#727e96;">
- <div class="color-title">#fff</div>
- <div class="color-subtitle">Light</div>
- </div>
- </div>
+ <div class="card-body">
+ A responsive web test tool Responsive Resizer. You can use it online or clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally.
</div>
- <div class="columns">
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#32b643;color:#fff;">
- <div class="color-title">#32b643</div>
- <div class="color-subtitle">Success</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#ffb700;color:#fff;">
- <div class="color-title">#ffb700</div>
- <div class="color-subtitle">Warning</div>
- </div>
- </div>
- <div class="column col-3 col-md-6">
- <div class="docs-color" style="background:#e85600;color:#fff;">
- <div class="color-title">#e85600</div>
- <div class="color-subtitle">Error</div>
- </div>
- </div>
+ <div class="card-footer">
+ <a href="https://picturepan2.github.io/responsive-resizer/" class="btn" target="_blank">Use online</a>
</div>
</div>
</div>
-
- <div id="accessibility" class="container">
- <h3 class="text-center"><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3>
- </div>
-
- <div id="browsers" class="container">
- <h3 class="text-center"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3>
- <div class="notes">
- <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
- <ul>
- <li>Chrome <span class="label label-success">Last 4</span></li>
- <li>Microsoft Edge <span class="label label-success">Last 4</span></li>
- <li>Firefox <span class="label label-success">Last 4</span></li>
- <li>Safari <span class="label label-success">Last 4</span></li>
- <li>Opera <span class="label label-success">Last 4</span></li>
- <li>Internet Explorer 10+</li>
- </ul>
+ <div class="column col-4 col-xs-12">
+ <div class="card mb-10">
+ <div class="card-header">
+ <div class="card-title h6">Spectre Docs</div>
+ </div>
+ <div class="card-body">
+ Spectre Docs experience has been completely rewritten and improved.
+ </div>
+ <div class="card-footer">
+ <a href="getting-started.html" class="btn">Getting started</a>
+ </div>
</div>
- </div>
-
- <div id="whatsnew" class="container">
- <h3 class="text-center"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3>
- <div class="notes">
- <p><strong>April 2017</strong></p>
- <ul>
- <li>
- <a href="components.html#accordions">Accordions</a>: used to toggle sections of content <small class="label label-primary">NEW</small>
- </li>
- <li>
- <a href="experimentals.html#filters">Filters</a>: CSS only content filters <small class="label label-primary">NEW</small>
- </li>
- <li>
- <a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images <small class="label label-primary">NEW</small>
- </li>
- <li>
- <a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities <small class="label label-primary">NEW</small>
- </li>
- </ul>
- <p><strong>March 2017</strong></p>
- <ul>
- <li>
- <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons <small class="label label-primary">NEW</small>
- </li>
- <li>
- <a href="components.html#popovers">Popovers</a>: small overlay content containers
- </li>
- <li>
- <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section
- </li>
- <li>
- <a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images
- </li>
- <li>
- <a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display
- </li>
- </ul>
- <p><strong>February 2017</strong></p>
- <ul>
- <li>New Documents experience</li>
- <li>
- <a href="components.html#bars">Bars</a>: represent the progress of a task or the value within the known range
- </li>
- <li>
- <a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps
- </li>
- <li>
- <a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks
- </li>
- <li>
- <a href="experimentals.html">Experimentals</a>: experimental elements and features
- </li>
- <li>
- <a href="experimentals.html#meters">Meters</a>, <a href="experimentals.html#parallax">Parallax</a>, <a href="experimentals.html#progress">Progress</a> and <a href="experimentals.html#sliders">Sliders</a>
- </li>
- </ul>
- <p><strong>March 2016</strong></p>
- <ul>
- <li>Initial commit</li>
- </ul>
+ <div class="card mb-10">
+ <div class="card-header">
+ <div class="card-title h6">Accordions</div>
+ </div>
+ <div class="card-body">
+ Accordions are used to toggle sections of content.
+ </div>
+ <div class="card-footer">
+ <a href="components.html#accordions" class="btn">Learn more</a>
+ </div>
</div>
</div>
-
- <div class="container">
- <div class="divider"></div>
- <ul class="pagination">
- <li class="page-item page-next">
- <a href="elements.html">
- <p class="page-item-subtitle">Next</p>
- <h4 class="page-item-title">Elements</h4>
- </a>
- </li>
- </ul>
- </div>
</div>
</div>
</div>
- <footer class="section section-footer bg-gray">
+ <footer class="section section-footer">
<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><a href="getting-started.html" 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>