starting point for scss or sass

[nmccready]

First of all this spinner kit is awesome and I want to thank you very much.

This is a subset of spinners that I have combined into a single scss file which has been tested and is in full use at my company. This is intended as a starting file to work towards so that the css can be compiled down to a dist/spin-kit.css as the end goal.

Therefore, this is not meant to be a finished peace but is intended as a starting point as a discussion on how you want to proceed. I am fully open to adding a build framework to compile this scss down for you so it can be in separate encapsulated files like wave.scss, and three-bounce.scss. Personally I would favor npm/Grunt or Rails but it is up to you.

I'd love to help contribute.

[tobiasahlin]

@nmccready Thanks for starting this discussion 🐝 I'm a bit torn. I see SpinKit more as a sandbox from which you can grab some CSS and customize it for your site, not a framework. I'm not sure how well this aligns with that, and if the added complexity here adds enough value. What are your thoughts?

[nmccready]

Cool, I am not really trying to force a framework here. I am just trying to make it easily importable CSS or SASS.

[nmccready]

Ideally this would be nice if you could import the css via some framework like bower but for css 😄

[jacobsvante]

I love this idea. Would be nice if some of the properties could be changed with SCSS-variables.

[paulrose]

I think it'd be great to drop in via SASS/SCSS.

@tobiasahlin I know what you mean with reference to a Sandbox. But I think people love this a bit too much now :) Maybe having a separate project to the 'sandbox' version?

[tobiasahlin]

Would be nice if some of the properties could be changed with SCSS-variables.

This is true. All ✨ for this part.

@paulrose @nmccready Let's make it happen.

@jmagnusson In that PR ☝️, I'm against deleting all the examples. Even though it's more code to maintain, I want to keep it easy to just copy paste, and previewing the animations. You mentioned that it's more complete than this PR though—is it anything you can help to fix here? Or give any pointers? ←- Ignore all that, I was full of bullshit when I wrote it. Sorry 🙇

[jacobsvante]

@tobiasahlin if you look at my code you'll see that I've added:

1. Variables
2. Separated each spinner into it's own SCSS file. This enables you to easily include just the styles you want, without touching the source code at all.
3. Removed all browser prefixes and let autoprefixer take care of this to decrease the risk of typos (and potentially reduce the file size of the generated CSS as browsers start to drop prefixes)
4. The gulp tasks auto-generate the example HTML whenever the code changes

Sure we can go with this PR instead, but like it says it's a starting point whilst #50 is basically good to merge and put in production.

[nmccready]

As suggested in #57 this may be a candidate for a gulp project. So simply compile templates down to css and scss.

[nmccready]

@tobiasahlin Let me know how you want to proceed .

[thecreation]

Any thought on less. I can contribute the code also.

[tobiasahlin]

@nmccready Closing this since @jmagnusson had already come really far with his PR (I totally missed that before), adding gulp as well (#62). As soon as that lands we can start polishing that implementation ✨