GruntJS to compile LESS

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

Gruntfile.js

@@ -0,0 +1,48 @@
+/*
+*
+* cssplot
+* Simple, css-only plotting
+* https://github.com/asciimoo/cssplot
+* demo: http://asciimoo.github.io/cssplot/
+*
+*/
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    less: {
+      dist: {
+        options: {
+            compress: true
+        },
+        files: {
+            'build/cssplot.base.css': 'src/cssplot.base.less',
+            'build/cssplot.full.css': 'src/cssplot.full.less',
+            'build/cssplot.group.css': 'src/cssplot.group.less',
+            'build/cssplot.animations.css': 'src/cssplot.animations.less'
+        }
+      } 
+    },
+    watch: {
+      options: {
+        livereload: true
+      },
+      css: {
+        files: ['src/*.less'],
+        tasks: ['newer:less'],
+        options: {
+          spawn: false
+        }
+      },
+      html: {
+        files: ['*.html'],
+        options: {
+            livereload: true
+        }
+      }
+    }
+  });
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-newer');
+  grunt.registerTask('default', ['newer:less','watch']);
+};

README.md

@@ -85,11 +85,41 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati
   <img src="docs/images/cssplot_scatter_plot.png"/>
 </div>
 
+### Animated Graphs
+
+For animated charts, add the `data-cp-transition` attribute to the `plot-container`; the values are: `fade` and `grow` and they're the two types of animation availables. Then, each point in the graph must have the `data-cp-delay` attribute with a value that must be a number higher than zero and represents the delay of the animation (in miliseconds).
+
+```html
+<div class="bar-plot">
+    <ul class="plot-container" data-cp-transition="0.3">
+        <li data-cp-delay="1" data-cp-size="1"></li>
+        <li data-cp-delay="2" data-cp-size="2"></li>
+        <li data-cp-delay="3" data-cp-size="4"></li>
+        <li data-cp-delay="4" data-cp-size="8"></li>
+        <li data-cp-delay="5" data-cp-size="16"></li>
+    </ul>
+</div>
+```
+
+## Build
+Using **GruntJS**.
+
+Clone this repo and install dependencies:
+
+	$ npm install
+
+Then run: 
+
+	$ grunt
+
+It will keep *watching* your changes while you save them and if you have [Livereload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) extension your browser will refresh each time you save your .less file.
+
 ## Conceptions
 
 - [ ] Pie chart
 - [ ] Stacked bar chart
 - [ ] Line chart
 - [ ] Axis/scale support
-- [ ] Live demo
-- [ ] Better build script
+- [X] Live demo
+- [X] Better build script
+- [X] Animated charts