Summary Files Commits Branches @commit @diff @stats
path: root / docs / getting-started.html
diff options
context:
space:
mode:
Commitbbf135586f990ba8a03dd584919c17ecd4b9138d (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-11-05 14:22:44 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2018-11-05 14:22:44 +0800
Files99cba7b8e5ed47f0230007c030b7fb966dfac974 /docs/getting-started.html
Spectre-Dark-Gruvbox-bbf135586f990ba8a03dd584919c17ecd4b9138d.tar
Spectre-Dark-Gruvbox-bbf135586f990ba8a03dd584919c17ecd4b9138d.tar.gz
Spectre-Dark-Gruvbox-bbf135586f990ba8a03dd584919c17ecd4b9138d.zip
Parent0a6c76429b294c26d318479c05736537f3d95abb (diff)
Add Changelog to What's New section
1 files changed, 305 insertions, 38 deletions
-rw-r--r--docs/getting-started.html343
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 62e1c61..95c1e6e 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -16,7 +16,9 @@
</head>
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
- <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div>
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>SPECTRE</h2></a></div>
@@ -131,6 +133,17 @@
<div class="docs-content" id="content">
<div class="container" id="introduction">
<h3 class="s-title">Introduction<a class="anchor" href="#introduction" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
<p> <strong>Spectre.css </strong>is a lightweight, 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, pure CSS components and utilities with best practice coding and consistent design language.</p>
@@ -380,9 +393,31 @@ gulp.task(<span class="hljs-string">'prefix'</span>, <span class="hljs-function"
</div>
<div class="container" id="accessibility">
<h3 class="s-title">Accessibility<a class="anchor" href="#accessibility" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
</div>
<div class="container" id="browsers">
<h3 class="s-title">Browser support<a class="anchor" href="#browsers" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
<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 <small class="label label-success">LAST 4</small></li>
@@ -396,43 +431,275 @@ gulp.task(<span class="hljs-string">'prefix'</span>, <span class="hljs-function"
</div>
<div class="container" id="whatsnew">
<h3 class="s-title">What's new<a class="anchor" href="#whatsnew" aria-hidden="true">#</a></h3>
- <p><strong>September 2017</strong></p>
- <ul>
- <li><a href="experimentals.html#off-canvas">Off-canvas</a>: navigation layout that the sidebar can slide in and out of the viewport <small class="label label-primary">NEW</small></li>
- </ul>
- <p><strong>August 2017</strong></p>
- <ul>
- <li><a href="getting-started.html">Switch to Sass </a><small class="label label-primary">NEW</small></li>
- <li><a href="getting-started.html">New Docs Experience </a><small class="label label-primary">NEW</small></li>
- </ul>
- <p><strong>April 2017</strong></p>
- <ul>
- <li><a href="components.html#accordions">Accordions</a>: used to toggle sections of content</li>
- <li><a href="experimentals.html#filters">Filters</a>: CSS only content filters</li>
- <li><a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images</li>
- <li><a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities</li>
- </ul>
- <p><strong>March 2017</strong></p>
- <ul>
- <li><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</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="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div><h4>Spectre.css Changelog</h4>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.4">v0.5.4</a></h5>
+<ul>
+<li>IMPORTANT: Change naming of position utilities to avoid conflicts</li>
+<li>Update dark color variable</li>
+<li>Fix sidebar hash link bug #482</li>
+<li>Fix browser support typo #469</li>
+<li>Fix code typo #460</li>
+<li>Fix GitHub button z-index bug #458</li>
+<li>Fix Bar background color issue by adding !important to color utilities</li>
+<li>Fix chip bug when content is too long #506</li>
+<li>Fix multiple select height bug #508</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.3">v0.5.3</a></h5>
+<ul>
+<li>Add dark text color to utilities</li>
+<li>Add error state to the indeterminate checkbox</li>
+<li>Add inline forms</li>
+<li>Add more code examples</li>
+<li>Fix errors in the Docs</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.2">v0.5.2</a></h5>
+<ul>
+<li>IMPORTANT: Move Docs to Pug templates</li>
+<li>Add more Docs examples</li>
+<li>Add visited link style</li>
+<li>Add 100% modal height class #391</li>
+<li>Fix off-canvas-overlay bug #392</li>
+<li>Fix margin and padding values #431</li>
+<li>Fix Accordion example #438</li>
+<li>Fix a bug of input addons width on mobile devices #449</li>
+<li>Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.1">v0.5.1</a></h5>
+<p>IMPORTANT: Move Autocomplete to the Experimentals</p>
+<ul>
+<li>Add form checkbox, radio and switch support to Menus</li>
+<li>Add responsive horizontal form support #375</li>
+<li>Add Favicons in the docs #398</li>
+<li>Fix Off-canvas z-index problem #361</li>
+<li>Fix icons disappearing on group classes on focus</li>
+<li>Fix Deprecation Warning #396 #356</li>
+<li>Initial commit of RTL support (not finished)</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.0">v0.5.0</a></h5>
+<ul>
+<li>IMPORTANT: Restore /dist folder</li>
+<li>Add Grid nesting example #353</li>
+<li>Add Form control sizes support</li>
+<li>Update Off-canvas default behavior and new option available #347</li>
+<li>Split Mixins</li>
+<li>Fix Navbar last-child align right bug #346</li>
+<li>Fix modal doc typo</li>
+<li>Fix docs examples #348</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.7">v0.4.7</a></h5>
+<ul>
+<li>Add new button colors (success and error) #227 #241 #342</li>
+<li>Add overflow-scrolling: touch; CSS for better scrolling</li>
+<li>Add touch support to Parallax image hover effect</li>
+<li>Update the Modal example code</li>
+<li>Fix form horizontal layout spacing</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.6">v0.4.6</a></h5>
+<ul>
+<li>Add new Sliders example #328</li>
+<li>Add Table with horizontal scroll support #333</li>
+<li>Update Calendar event style which makes use of color utilities #326</li>
+<li>Define $parallax-fade-color as default variable #332</li>
+<li>Fix the Docs content mistake</li>
+<li>Fix breadcrumb-item extra spacing #337</li>
+<li>Fix comparison slider image responsive bug #338</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.5">v0.4.5</a></h5>
+<ul>
+<li>Rewrite Off-canvas component</li>
+<li>Add <code>active</code> support to the Off-canvas #308</li>
+<li>Update the Docs pages</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.4">v0.4.4</a></h5>
+<ul>
+<li>IMPORTANT: Increase default font sizes to 16px #271</li>
+<li>Add version number to CSS #288 #289</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.3">v0.4.3</a></h5>
+<ul>
+<li>Add Icon Sizes #284</li>
+<li>Add Large Modals #293</li>
+<li>Update primary color to #5755d9</li>
+<li>Change Tooltips <code>white-space</code> to <code>pre</code> #292</li>
+<li>Encode SVG Data URI (thanks to @mariodev) #297 #298</li>
+<li>Improve Buttons and Forms small and large variables</li>
+<li>Improve Filters code</li>
+<li>Improve gulpfile and package</li>
+<li>Add Importing Sass Docs</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.2">v0.4.2</a></h5>
+<ul>
+<li>Add Off-screen experimental</li>
+<li>Fix Docs rendering bug in Safari</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.1">v0.4.1</a></h5>
+<ul>
+<li>Add default modifier to all variables</li>
+<li>Add <code>address</code> reset which changes font-style to normal</li>
+<li>Add Details and Summary Accordions support</li>
+<li>Fix responsive video</li>
+<li>Update the Docs</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.0">v0.4.0</a></h5>
+<ul>
+<li>Switch from Less to Sass</li>
+<li>Add Cursor utilities</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.3.2">v0.3.2</a></h5>
+<ul>
+<li>Add label-rounded classes</li>
+<li>Add Avatars presence status code</li>
+<li>Add Typography Fonts Docs</li>
+<li>Add Button variant mixins</li>
+<li>Update Autocomplete style</li>
+<li>Update Autoprefixer rules</li>
+<li>Update label mixin and code mono font family</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.3.1">v0.3.1</a></h5>
+<p><em>IMPORTANT</em>: The default root font-size has been changed to <code>20px</code>, please update your <code>rem</code> numbers if you're using the custom sizes. <a href="https://picturepan2.github.io/spectre/getting-started.html#variables-sizes">Learn more</a>.</p>
+<ul>
+<li>Fix margin and padding utilities bug</li>
+<li>Add grid offset</li>
+<li>Rename Display utilities class names</li>
+<li>Move Panels and Empty states to Components from Layout</li>
+<li>Fix Docs bugs and cleanup codes</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.15">v0.2.15</a></h5>
+<ul>
+<li>BIG Update to the Docs experience, completely rewritten and improved #240</li>
+<li>Add Text and Background colors utilities #205 #219</li>
+<li>Add Install from CDN option #191</li>
+<li>Add unit size (4px) and unit size variables</li>
+<li>Add Responsive container (max width container) #222</li>
+<li>Add error and success states to checkbox, radio and switch #246</li>
+<li>Fix Rem unit issue in East Asian Chrome #110</li>
+<li>Fix icon direction bug #218</li>
+<li>Fix Dropdown menu max items/height #226</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.14">v0.2.14</a></h5>
+<ul>
+<li>Add vertical divider</li>
+<li>Add Form icon support</li>
+<li>Add Accordions</li>
+<li>Add anchor links to Docs</li>
+<li>Add new container grid size</li>
+<li>Fix link error and typo</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.13">v0.2.13</a></h5>
+<ul>
+<li>Add Timelines code</li>
+<li>Add input readonly style</li>
+<li>Change Gulp building process and ignore /dist</li>
+<li>Change naming <code>danger</code> to <code>error</code></li>
+<li>Change label-variant mixin</li>
+<li>Fix dropdown-toggle border radius in button groups</li>
+<li>Fix Calendars date item width bug under Firefox</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.12">v0.2.12</a></h5>
+<ul>
+<li>Add pure CSS Comparison Sliders</li>
+<li>Add pure CSS content Filters</li>
+<li>Add Avatars badge support</li>
+<li>Add more icons</li>
+<li>Change :focus support</li>
+<li>Change Docs image sizes and add object-fit support</li>
+<li>Update Navbar code</li>
+<li>Fix typos, Modals bugs</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.11">v0.2.11</a></h5>
+<ul>
+<li>Add pure CSS Popovers</li>
+<li>Add pure CSS Icons</li>
+<li>Add Slider bars</li>
+<li>Add tvOS Parallax effect text layer</li>
+<li>Update shadow mixin</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.10">v0.2.10</a></h5>
+<ul>
+<li>Add Shadows and Z-index variables</li>
+<li>Add Divider text</li>
+<li>Improve color variables</li>
+<li>Cleanup components code</li>
+<li>Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.9">v0.2.9</a></h5>
+<ul>
+<li>Add Panels layout: flexible view container layout with auto-expand content section</li>
+<li>Update Navbar layout</li>
+<li>Update docs and examples</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.8">v0.2.8</a></h5>
+<ul>
+<li>Add Carousels previous and next buttons</li>
+<li>Improve disabled state for forms</li>
+<li>Improve calendar events style</li>
+<li>Improve Sliders disabled style</li>
+<li>Improve Autocomplete menu position</li>
+<li>Merge Menus and Dropdowns</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.7">v0.2.7</a></h5>
+<ul>
+<li>Add Calendars experimental support</li>
+<li>Add tabindex note to the dropdowns docs</li>
+<li>Add shrink-to-fit=no to head meta</li>
+<li>Add Colors docs and update colors</li>
+<li>Fix wrong shadow colors with form-select</li>
+<li>Fix grid-480</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.6">v0.2.6</a></h5>
+<ul>
+<li>Add Carousels initial experimental version</li>
+<li>Add Spectre.css Twitter account (@spectrecss) link</li>
+<li>Improve Docs experience and navbar</li>
+<li>Fix the bug of form input focus colors</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.5">v0.2.5</a></h5>
+<ul>
+<li>Improve color variables completely</li>
+<li>Add Menu badges</li>
+<li>Add Responsive visibility (show-x)</li>
+<li>Add Parallax effect (pure CSS)</li>
+<li>Fix elements and components</li>
+<li>Update empty state layout code</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.4">v0.2.4</a></h5>
+<ul>
+<li>ADD: Meters element experimental support</li>
+<li>ADD: Progress indeterminate animation</li>
+<li>ADD: Text-decoration-skip support</li>
+<li>CHG: Split Codes and improve docs codes</li>
+<li>FIX: Steps with tooltips z-index bug</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.3">v0.2.3</a></h5>
+<ul>
+<li>Bars component</li>
+<li>Badges for buttons</li>
+<li>Experimentals CSS and docs</li>
+<li>Sliders experimental component</li>
+<li>A number of fixes as usual</li>
+</ul>
+<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.1">v0.2.1</a></h5>
+<p>I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:</p>
+<ul>
+<li>New Docs experience with better navigations and better mobile off-canvas menu</li>
+<li>New components: Tiles, Steps and Navs (part of Navigation)</li>
+<li>Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support and better focus style</li>
+<li>Fixes</li>
+</ul>
+<h5>v0.0.1 - March 2016</h5>
+<p>Initial commit</p>
+<p>Thank you. ♥</p>
+
<p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/releases" target="_blank">Releases</a></p>
</div>
<div class="docs-footer container grid-lg" id="copyright">