Merge pull request #143 from tobiasahlin/v2-lean

v2
tobiasahlin · Oct 28, 2019 · da085fc · da085fc
2 parents d49d7d5 + 2c0381d
commit da085fc
Show file tree

Hide file tree

Showing 46 changed files with 879 additions and 3,298 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/.jshintrc b/.jshintrc
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+# 2.0.0
+
+* New: Added examples.html, with an overview of all spinners
+* New: Added a brand new chase spinner
+* New: Added spinkit.min.css
+* Fixed: `inline-block` is no longed used to position any spinners (decoupling spacing from any potential font effects)
+* Changed: Most spinners now have more distinct and shorter names
+* Changed: No positioning is now applied by default on any of the spinners (center the spinner with the utility class `sk-center`)
+* Changed: All elements now only have one single class
+* Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. There's nothing to build
+* Changed: No more SCSS. All configuration is now done through CSS vars
+* Fixed: All keyframe animations are now named after the elements/classes that are using them
+
 # 1.2.5
 
 * Fixed: Add folding cube spinner (11) to combined CSS file

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
diff --git a/README.md b/README.md
@@ -1,12 +1,16 @@
 # [SpinKit](http://tobiasahlin.com/spinkit/)
 
-Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spinkit/). SpinKit uses hardware accelerated (`translate` and `opacity`) CSS animations to create smooth and easily customizable animations. 
+Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spinkit/). SpinKit only uses (`transform` and `opacity`) CSS animations to create smooth and easily customizable animations.
 
 ## Usage
 
-### Regular CSS
+- Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)
+- Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html`
+- Add the `sk-center` utility class to the spinner to center it (it sets `margin` to `auto`)
+- By default, the `width` and `height` of all spinners are set to `40px`. `background-color` is set to `#333`.
+- Configure the spinner by overwriting the CSS variables, primarily `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables.
 
-Grab the HTML and CSS for a spinner from the example files, or add SpinKit directly to your project with `bower`:
+You can include SpinKit to your project with `bower`:
 
 ```bash
 $ bower install spinkit
@@ -18,26 +22,162 @@ or npm:
 $ npm install spinkit
 ```
 
-### SCSS
+## Spinners
 
-If you're using SCSS you can include specific spinners (rather than all of them) by importing them one by one:
+Given that you have included `spinkit.min.css` in your project, these snippets will produce the different spinners:
 
-```scss
-@import '../bower_components/spinkit/scss/spinners/1-rotating-plane',
-        '../bower_components/spinkit/scss/spinners/3-wave';
+### Plane
+
+```html
+<div class="sk-plane"></div>
+```
+
+### Chase
+
+```html
+<div class="sk-chase">
+  <div class="sk-chase-dot"></div>
+  <div class="sk-chase-dot"></div>
+  <div class="sk-chase-dot"></div>
+  <div class="sk-chase-dot"></div>
+  <div class="sk-chase-dot"></div>
+  <div class="sk-chase-dot"></div>
+  <div class="sk-chase-dot"></div>
+  <div class="sk-chase-dot"></div>
+</div>
+```
+
+### Bounce
+
+```html
+<div class="sk-bounce">
+  <div class="sk-bounce-dot"></div>
+  <div class="sk-bounce-dot"></div>
+</div>
+```
+
+### Wave
+
+```html
+<div class="sk-wave">
+  <div class="sk-wave-rect"></div>
+  <div class="sk-wave-rect"></div>
+  <div class="sk-wave-rect"></div>
+  <div class="sk-wave-rect"></div>
+  <div class="sk-wave-rect"></div>
+</div>
+ ```
+
+### Pulse
+
+```html
+<div class="sk-pulse"></div>
+```
+
+### Flow
+
+```html
+<div class="sk-flow">
+  <div class="sk-flow-dot"></div>
+  <div class="sk-flow-dot"></div>
+  <div class="sk-flow-dot"></div>
+</div>
+```
+
+### Swing
+
+```html
+<div class="sk-swing">
+  <div class="sk-swing-dot"></div>
+  <div class="sk-swing-dot"></div>
+</div>
+```
+
+### Circle
+
+```html
+<div class="sk-circle">
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+  <div class="sk-circle-dot"></div>
+</div>
 ```
 
-You currently need to use an [autoprefixer](https://github.com/postcss/autoprefixer) if you want to support all browsers. If you're compiling your SCSS with gulp you can use [gulp-autoprefixer](https://github.com/sindresorhus/gulp-autoprefixer), and [grunt-autoprefixer](https://github.com/nDmitry/grunt-autoprefixer) if you use grunt.
+### Circles Fade
+
+```html
+<div class="sk-circle-fade">
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+  <div class="sk-circle-fade-dot"></div>
+</div>
+```
+
+### Grid
+
+```html
+<div class="sk-grid">
+  <div class="sk-grid-cube"></div>
+  <div class="sk-grid-cube"></div>
+  <div class="sk-grid-cube"></div>
+  <div class="sk-grid-cube"></div>
+  <div class="sk-grid-cube"></div>
+  <div class="sk-grid-cube"></div>
+  <div class="sk-grid-cube"></div>
+  <div class="sk-grid-cube"></div>
+  <div class="sk-grid-cube"></div>
+</div>
+```
 
-Variables that can be overridden are listed in [scss/_variables.scss](https://github.com/tobiasahlin/SpinKit/blob/master/scss/_variables.scss).
+### Fold
+
+```html
+<div class="sk-fold">
+  <div class="sk-fold-cube"></div>
+  <div class="sk-fold-cube"></div>
+  <div class="sk-fold-cube"></div>
+  <div class="sk-fold-cube"></div>
+</div>
+```
+
+### Wander
+
+```html
+<div class="sk-wander">
+  <div class="sk-wander-cube"></div>
+  <div class="sk-wander-cube"></div>
+  <div class="sk-wander-cube"></div>
+</div>
+```
 
 ## Web browser compatibility
 
-CSS animations are supported in the latest version of all major browsers, and browsers with `animation` support make up [almost 90% of all usage](http://caniuse.com/#feat=css-animation). If you need to support IE9 and below, however, this section is for you.
+SpinKit uses CSS animations and variables:
+
+- CSS keyframes animations [are at +96.5% global support](http://caniuse.com/#feat=css-animation)
+- CSS variables [are at +91.8% global support](https://caniuse.com/#feat=css-variables)
 
 ### Implementing a fallback spinner
 
-How do you know if you need to provide a fallback? You can easily check for animation support with [Modernizr](http://modernizr.com), or manually check for the `animation` property, and replace the spinner with a GIF if it's not supported:
+How do you know if you need to provide a fallback? You can check for animation support with [Modernizr](http://modernizr.com), or manually check for the `animation` property, and replace the spinner with a GIF if it's not supported:
 
 ```javascript
 function browserSupportsCSSProperty(propertyName) {
@@ -66,7 +206,3 @@ if (!browserSupportsCSSProperty('animation')) {
   // fallback…
 }
 ```
-
-## Contributing
-
-See [CONTRIBUTING.md](https://github.com/tobiasahlin/SpinKit/blob/master/CONTRIBUTING.md) for details.