oscarenas
diff --git a/‎.gitignore‎
Lines changed: 3 additions & 0 deletions b/‎.gitignore‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎Gruntfile.js‎
Lines changed: 58 additions & 0 deletions b/‎Gruntfile.js‎
Lines changed: 58 additions & 0 deletions
diff --git a/‎README.md‎
Lines changed: 30 additions & 87 deletions b/‎README.md‎
Lines changed: 30 additions & 87 deletions
@@ -0,0 +1,3 @@
+.sass-cache
+node_modules/
+.DS_Store
@@ -0,0 +1,58 @@
+module.exports = function(grunt) {
+  pkg: grunt.file.readJSON('package.json'),
+  grunt.initConfig({
+
+    // Concatenate CSS files
+    concat: {
+      dist: {
+        src: [
+          // _base.css required for .animated helper class
+          'source/_base.css',
+          'source/**/*.css'
+        ]
+        dest: 'animate.css'
+      }
+    },
+
+    // Auto-prefix CSS properties using Can I Use?
+    autoprefixer: {
+      options: {
+        browsers: ['last 3 versions', 'bb 10', 'android 3']
+      },
+      no_dest: {
+        // File to output
+        src: 'animate.css'
+      },
+    },
+
+    // Minify CSS
+    csso: {
+      dist: {
+        files: {
+          // Output compressed CSS to style.min.css
+          'animate.min.css': ['animate.css']
+        }
+      }
+    },
+
+    // Watch files for changes
+    watch: {
+      css: {
+        files: [
+          'source/**/*',
+          '!node_modules'
+        ],
+        // Run Sass, autoprefixer, and CSSO
+        tasks: ['concat', 'autoprefixer', 'csso'],
+      }
+    }
+
+  });
+
+  // Register our tasks
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-autoprefixer');
+  grunt.loadNpmTasks('grunt-csso');
+  grunt.registerTask('default', ['watch']);
+};
@@ -6,6 +6,12 @@
 ##Usage
 To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!
 
+```html
+<head>
+	<link rel="stylesheet" href="animate.min.css">
+</head>
+```
+
 You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:
 
 ```javascript
@@ -24,95 +30,32 @@ You can change the duration of your animations, add a delay or change the number
 
 *Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o)*
 
-*Note: Safari in Mountion Lion (OS 10.8) has a display glitch with the Flippers. They may not appear at all until the animation is completed, or the page may have other artifacting. One fix is to add overflow: hidden to the parent div.*
-
-##License
-Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
-
-## Contributing
-Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That last one is important.
-
-##Learn more
-You can learn more about animate.css over at http://daneden.me/animate
-You can also get in touch via email (dan.eden@me.com) or twitter (@_dte) if you need any help or have any issues.
-
-##Cheat Sheet
-
-####Attention seekers:
-flash
-bounce
-shake
-tada
-swing
-wobble
-pulse
-
-####Flippers (currently Webkit, Firefox, &amp; IE10 only):
-flip
-flipInX
-flipOutX
-flipInY
-flipOutY
-
-####Fading entrances:
-fadeIn
-fadeInUp
-fadeInDown
-fadeInLeft
-fadeInRight
-fadeInUpBig
-fadeInDownBig
-fadeInLeftBig
-fadeInRightBig
+## Custom Builds
+Animate.css is powered by Grunt, and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies:
 
-####Fading exits:
-fadeOut
-fadeOutUp
-fadeOutDown
-fadeOutLeft
-fadeOutRight
-fadeOutUpBig
-fadeOutDownBig
-fadeOutLeftBig
-fadeOutRightBig
-
-####Bouncing entrances:
-bounceIn
-bounceInDown
-bounceInUp
-bounceInLeft
-bounceInRight
-
-####Bouncing exits:
-bounceOut
-bounceOutDown
-bounceOutUp
-bounceOutLeft
-bounceOutRight
-
-####Rotating entrances:
-rotateIn
-rotateInDownLeft
-rotateInDownRight
-rotateInUpLeft
-rotateInUpRight
-
-####Rotating exits:
-rotateOut
-rotateOutDownLeft
-rotateOutDownRight
-rotateOutUpLeft
-rotateOutUpRight
+```
+$ cd path/to/animate.css/
+$ sudo npm install
+```
 
-####Lightspeed:
-lightSpeedIn
-lightSpeedOut
+Next, run `grunt watch` to watch for changes and compile your custom builds. For example, if you want only the “attention seekers”, simply delete them from the repository, or change `Gruntfile.js` to only concatenate the files you want:
 
-####Specials:
-hinge
-rollIn
-rollOut
+```javascript
+concat: {
+  dist: {
+    src: [
+    	// _base.css required for .animated helper class
+    	'source/_base.css',
+    	'source/attention_seekers/*.css',
+    	'source/flippers/*.css'
+    ],
+    dest: 'animate.css'
+  }
+}
+```
 
-## Other Resources
+## License
+Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
 
-- There's a [Ruby gem](https://github.com/camelmasa/animate-rails) available for Animate.css
+## Contributing
+Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That last one is important.
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.sass-cache`
	`2`	`+node_modules/`
	`3`	`+.DS_Store`