diff options
1 files changed, 16 insertions, 5 deletions
| -rw-r--r-- | README.md | 21 |
@@ -14,7 +14,7 @@ Read [the documentation](https://picturepan2.github.io/spectre/) to learn more. There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower. ##### Install manually -Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/dist). +Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/docs/dist). ##### Install with NPM `$ npm install spectre.css --save` @@ -25,15 +25,15 @@ Download the compiled and minified [Spectre CSS file](https://github.com/picture ##### Install with Bower `$ bower install spectre.css --save` -And include it in your website or Web app <head> part. +And include `spectre.css` located in `/docs/dist` in your website or Web app <head> part. -`<link rel="stylesheet" href="dist/spectre.min.css" />` +`<link rel="stylesheet" href="spectre.min.css" />` ### Compiling custom version You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/index.html#compiling). -### Documentation and demos +### Documentation and examples #### Elements @@ -45,7 +45,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Labels](https://picturepan2.github.io/spectre/elements.html#labels) - formatted text tags for highlighted, informative information - [Codes](https://picturepan2.github.io/spectre/elements.html#codes) - inline and multiline code snippets - [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes -- [Experimentals](https://picturepan2.github.io/spectre/experimentals.html) - experimental elements and features, mostly are not yet ready for wide use #### Layout - [Flexbox-grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system @@ -75,6 +74,18 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Utilities](https://picturepan2.github.io/spectre/utilities.html) - layout, positions, display, text, shapes, loading things +#### Experimentals +- [Accordions](https://picturepan2.github.io/spectre/experimentals.html#accordions) - used to toggle sections of content +- [Calendars](https://picturepan2.github.io/spectre/experimentals.html#calendars) - date or date range picker and events display +- [Carousels](https://picturepan2.github.io/spectre/experimentals.html#carousels) - slideshows for cycling images +- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals.html#comparison) - sliders for comparing two images, built entirely in CSS +- [Filters](https://picturepan2.github.io/spectre/experimentals.html#carousels) - CSS only content filters +- [Meters](https://picturepan2.github.io/spectre/experimentals.html#meters) - representing the value within the known range +- [Parallax](https://picturepan2.github.io/spectre/experimentals.html#parallax) - acting like Apple TV/tvOS hover parallax effect, built entirely in CSS +- [Progress](https://picturepan2.github.io/spectre/experimentals.html#progress) - indicators for the progress completion of a task +- [Sliders](https://picturepan2.github.io/spectre/experimentals.html#sliders) - selecting values from ranges +- [Timelines](https://picturepan2.github.io/spectre/experimentals.html#timelines) - ordered sequences of activities + ### Browser support Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended: - Chrome (last 4) |