diff options
3 files changed, 13 insertions, 115 deletions
| -rw-r--r-- | README.md | 8 | ||||
| -rw-r--r-- | docs/index.html | 7 | ||||
| -rw-r--r-- | src/fileicons.less | 113 |
@@ -11,11 +11,17 @@ Read [the documentation](http://picturepan2.github.io/spectre/) to learn more. ### Getting started -There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower. +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). + ##### Install with NPM `$ npm install spectre.css --save` + +##### Install with Yarn +`$ yarn add spectre.css` + ##### Install with Bower `$ bower install spectre.css --save` diff --git a/docs/index.html b/docs/index.html index c0b2f07..51c5e2b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -125,7 +125,7 @@ <section id="installation" class="container"> <header class="text-center"><h3>Installation</h3></header> <section class="notes"> - <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p> + <p>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.</p> </section> <section class="notes"> <h5>Install manually</h5> @@ -136,6 +136,11 @@ <pre> <code class="code"><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save</code> </pre> + <h5>Install with Yarn</h5> +<!-- install with yarn example --> +<pre> +<code class="code"><span class="tag">$</span> yarn add <span class="atv">spectre.css</span></code> +</pre> <h5>Install with Bower</h5> <!-- install with bower example --> <pre> diff --git a/src/fileicons.less b/src/fileicons.less deleted file mode 100644 index 0e2c7eb..0000000 --- a/src/fileicons.less +++ /dev/null @@ -1,113 +0,0 @@ -// File icons -.file-icon { - background: transparent; - border-color: @control-color; - border-radius: .2rem; - border-style: solid; - border-width: 0 0 2.2rem 1.4rem; - display: inline-block; - height: 3.2rem; - position: relative; - text-align: left; - width: 2.4rem; - zoom: 1; - - &::before, - &::after { - background: transparent; - border: .5rem solid @control-color; - border-right-color: transparent; - border-top-color: transparent; - content: ""; - height: 1rem; - position: absolute; - right: 0; - top: 0; - width: 1rem; - z-index: 2; - } - &::after { - border-bottom-left-radius: .2rem; - border-color: rgba(255, 255, 255, .5); - color: @core-light-color; - content: attr(data-type); - font-size: 1rem; - line-height: 3.6rem; - text-indent: -1.6rem; - z-index: 3; - } - - &.file-icon-xs { - border-width: 0 0 1.2rem .8rem; - height: 1.6rem; - width: 1.2rem; - - &::before, - &::after { - border-width: .2rem; - height: .4rem; - width: .4rem; - } - &::after { - border-radius: .1rem; - content: "--"; - font-size: .8rem; - line-height: 1.6rem; - text-indent: -.8rem; - } - } - &.file-icon-sm { - border-width: 0 0 1.6rem 1rem; - height: 2.4rem; - width: 1.8rem; - - &::before, - &::after { - border-width: .4rem; - height: .8rem; - width: .8rem; - } - &::after { - font-size: .8rem; - line-height: 2.6rem; - text-indent: -1.2rem; - } - } - &.file-icon-lg { - border-width: 0 0 3.4rem 2.2rem; - height: 4.8rem; - width: 3.6rem; - - &::before, - &::after { - border-width: .7rem; - height: 1.4rem; - width: 1.4rem; - } - &::after { - font-size: 1.2rem; - line-height: 6.2rem; - text-indent: -2.6rem; - } - } - &.file-icon-xl { - border-radius: .3rem; - border-width: 0 0 4.6rem 3rem; - height: 6.4rem; - width: 4.8rem; - - &::before, - &::after { - border-width: .9rem; - height: 1.8rem; - width: 1.8rem; - } - &::after { - font-size: 1.4rem; - line-height: 8.8rem; - text-indent: -3.4rem; - } - } -} - -// TODO: File types |