diff options
Add Changelog to What's New section
1 files changed, 305 insertions, 38 deletions
| -rw-r--r-- | docs/getting-started.html | 343 |
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"> |