diff --git a/.gitignore b/.gitignore
index 3b8db8c..7e5b1c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,9 @@
 /.sass-cache
 /.cache
 
+# Built gh-pages
+/gh-pages
+
 # Ignore .DS_store file
 .DS_Store
 
diff --git a/Gemfile b/Gemfile
deleted file mode 100644
index ad8d771..0000000
--- a/Gemfile
+++ /dev/null
@@ -1,14 +0,0 @@
-# If you have OpenSSL installed, we recommend updating
-# the following line to use "https"
-source 'http://rubygems.org/'
-
-gem "middleman", "~>3.3.2"
-
-# Live-reloading plugin
-gem "middleman-livereload", "~> 3.1.0"
-
-# For faster file watcher updates on Windows:
-gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
-
-# Windows does not come with time zone data
-gem "tzinfo-data", platforms: [:mswin, :mingw]
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index 5517e4c..0000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,120 +0,0 @@
-GEM
-  remote: http://rubygems.org/
-  specs:
-    activesupport (4.0.4)
-      i18n (~> 0.6, >= 0.6.9)
-      minitest (~> 4.2)
-      multi_json (~> 1.3)
-      thread_safe (~> 0.1)
-      tzinfo (~> 0.3.37)
-    chunky_png (1.3.0)
-    coffee-script (2.2.0)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.7.0)
-    compass (0.12.6)
-      chunky_png (~> 1.2)
-      fssm (>= 0.2.7)
-      sass (~> 3.2.19)
-    compass-import-once (1.0.4)
-      sass (>= 3.2, < 3.5)
-    em-websocket (0.5.1)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
-    erubis (2.7.0)
-    eventmachine (1.0.3)
-    execjs (2.0.2)
-    ffi (1.9.3)
-    fssm (0.2.10)
-    haml (4.0.5)
-      tilt
-    hike (1.2.3)
-    hooks (0.4.0)
-      uber (~> 0.0.4)
-    http_parser.rb (0.6.0)
-    i18n (0.6.9)
-    json (1.8.1)
-    kramdown (1.3.3)
-    listen (1.3.1)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      rb-kqueue (>= 0.2)
-    middleman (3.3.2)
-      coffee-script (~> 2.2.0)
-      compass (>= 0.12.4)
-      compass-import-once (~> 1.0.4)
-      execjs (~> 2.0)
-      haml (>= 4.0.5)
-      kramdown (~> 1.2)
-      middleman-core (= 3.3.2)
-      middleman-sprockets (>= 3.1.2)
-      sass (>= 3.2.17, < 4.0)
-      uglifier (~> 2.5)
-    middleman-core (3.3.2)
-      activesupport (~> 4.0.1)
-      bundler (~> 1.1)
-      erubis
-      hooks (~> 0.3)
-      i18n (~> 0.6.9)
-      listen (~> 1.1)
-      padrino-helpers (~> 0.12.1)
-      rack (>= 1.4.5, < 2.0)
-      rack-test (~> 0.6.2)
-      thor (>= 0.15.2, < 2.0)
-      tilt (~> 1.4.1, < 2.0)
-    middleman-livereload (3.1.1)
-      em-websocket (>= 0.2.0)
-      middleman-core (>= 3.0.2)
-      multi_json (~> 1.0)
-      rack-livereload
-    middleman-sprockets (3.3.3)
-      middleman-core (>= 3.2)
-      sprockets (~> 2.2)
-      sprockets-helpers (~> 1.1.0)
-      sprockets-sass (~> 1.1.0)
-    minitest (4.7.5)
-    multi_json (1.9.3)
-    padrino-helpers (0.12.1)
-      i18n (~> 0.6, >= 0.6.7)
-      padrino-support (= 0.12.1)
-      tilt (~> 1.4.1)
-    padrino-support (0.12.1)
-      activesupport (>= 3.1)
-    rack (1.5.2)
-    rack-livereload (0.3.15)
-      rack
-    rack-test (0.6.2)
-      rack (>= 1.0)
-    rb-fsevent (0.9.4)
-    rb-inotify (0.9.4)
-      ffi (>= 0.5.0)
-    rb-kqueue (0.2.2)
-      ffi (>= 0.5.0)
-    sass (3.2.19)
-    sprockets (2.12.1)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
-      rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
-    sprockets-helpers (1.1.0)
-      sprockets (~> 2.0)
-    sprockets-sass (1.1.0)
-      sprockets (~> 2.0)
-      tilt (~> 1.1)
-    thor (0.19.1)
-    thread_safe (0.3.3)
-    tilt (1.4.1)
-    tzinfo (0.3.39)
-    uber (0.0.4)
-    uglifier (2.5.0)
-      execjs (>= 0.3.0)
-      json (>= 1.8.0)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  middleman (~> 3.3.2)
-  middleman-livereload (~> 3.1.0)
-  tzinfo-data
-  wdm (~> 0.1.0)
diff --git a/Gruntfile.js b/Gruntfile.js
index 786fdbf..c8d6d58 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,78 +1,129 @@
 module.exports = function(grunt) {
-  'use strict';
+	'use strict';
 
-  grunt.initConfig({
-    uglify: {
-      options: {
-        mangle: false
-      },
-      my_target: {
-        files: {
-          'dist/timesheet.js': ['source/javascripts/timesheet.bubble.js', 'source/javascripts/timesheet.js']
-        }
-      }
-    },
-    sass: {
-      dist: {
-        options: {
-          style: 'compressed'
-        },
-        files: {
-          'dist/timesheet.css': 'source/stylesheets/timesheet.css.sass'
-        }
-      }
-    },
-    jshint: {
-      all: {
-        src: [
-          'source/javascripts/*.js',
-          'source/javascripts/**/*.js.erb'
-        ],
-        options: {
-          jshintrc: '.jshintrc'
-        }
-      }
-    },
-    simplemocha: {
-      options: {
-        globals: ['should'],
-        timeout: 3000,
-        ignoreLeaks: false,
-        grep: '',
-        ui: 'tdd',
-        reporter: 'spec'
-      },
-      all: { src: ['test/**/*.js'] }
-    },
-    watch: {
-      scripts: {
-        files: [
-          '.jshintrc',
-          'Gruntfile.js',
-          'source/**/*.js',
-          'source/**/*.js.erb',
-          'test/*.js',
-          '.jshint'
-        ],
-        tasks: ['simplemocha', 'jshint'],
-        options: {
-          interrupt: true,
-        },
-      },
-    }
-  });
+	var fs = require('fs');
 
-  // For this to work, you need to have run `npm install grunt-simple-mocha`
-  grunt.loadNpmTasks('grunt-contrib-jshint');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-simple-mocha');
+	grunt.initConfig({
+		uglify: {
+			options: {
+				mangle: false
+			},
+			my_target: {
+				files: {
+					'dist/timesheet.min.js': ['source/javascripts/timesheet.js']
+				}
+			}
+		},
+		sass: {
+			gh: {
+				options: {
+					style: 'compressed'
+				},
+				files: {
+					'gh-pages/styles/style.css': 'source/stylesheets/style.sass'
+				}
+			},
+			dist: {
+				options: {
+					style: 'compressed'
+				},
+				files: {
+					'dist/timesheet.min.css': 'source/stylesheets/timesheet.sass',
+					'dist/timesheet-white.min.css': 'source/stylesheets/timesheet-white.sass'
+				}
+			}
+		},
+		jshint: {
+			all: {
+				src: [
+					'source/javascripts/*.js'
+				],
+				options: {
+					jshintrc: '.jshintrc'
+				}
+			}
+		},
+		simplemocha: {
+			options: {
+				globals: ['should'],
+				timeout: 3000,
+				ignoreLeaks: false,
+				grep: '',
+				ui: 'tdd',
+				reporter: 'spec'
+			},
+			all: { src: ['test/**/*.js'] }
+		},
+		express: {
+			options: {
+				port: 8080
+			},
+			dev: {
+				options: {
+					script: __dirname + '/serve.js'
+				}
+			}
+		},
+		watch: {
+			scripts: {
+				files: 'source/javascripts/*.js',
+				tasks: ['simplemocha', 'jshint', 'uglify'],
+				options: {
+					interrupt: true,
+				}
+			},
+			styles: {
+				files: 'source/stylesheets/*.sass',
+				tasks: ['sass'],
+				options: {
+					interrupt: true,
+				}
+			}
+		},
+		haml: {
+			gh: {
+				files: {
+					'gh-pages/index.html': 'source/index.haml'
+				},
+				options: {
+					context: {
+						code: fs.readFileSync(__dirname + '/source/snippets/example-date.js')
+					}
+				}
+			}
+		},
+		copy: {
+			gh: {
+				files: [
+					{expand: false, src: __dirname + '/source/javascripts/lib.js', 				 dest: __dirname + '/gh-pages/script/lib.js'},
+					{expand: false, src: __dirname + '/source/javascripts/main.js',				dest: __dirname + '/gh-pages/script/main.js'},
+					{expand: false, src: __dirname + '/dist/timesheet.min.js',			      dest: __dirname + '/gh-pages/script/timesheet.min.js'},
+					{expand: false, src: __dirname + '/dist/timesheet.min.css', 					 dest: __dirname + '/gh-pages/styles/timesheet.css'},
+					{expand: false, src: __dirname + '/dist/timesheet-white.min.css',			dest: __dirname + '/gh-pages/styles/timesheet-white.css'},
+					{expand: false, src: __dirname + '/dist/timesheet.min.css.map', 			 dest: __dirname + '/gh-pages/styles/timesheet.css.map'},
+					{expand: false, src: __dirname + '/dist/timesheet-white.min.css.map',	dest: __dirname + '/gh-pages/styles/timesheet-white.css.map'}
+				]
+			}
+		}
+	});
 
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-sass');
+	grunt.loadNpmTasks('grunt-contrib-jshint');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.loadNpmTasks('grunt-simple-mocha');
 
-  // Default task
-  grunt.registerTask('default', ['simplemocha', 'jshint']);
+	grunt.loadNpmTasks('grunt-contrib-copy');
+
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-contrib-sass');
+
+	grunt.loadNpmTasks('grunt-express-server');
+
+	grunt.loadNpmTasks('grunt-haml');
+
+	// Default task
+	grunt.registerTask('default', 	['build']);
+	grunt.registerTask('build', 		['simplemocha', 'jshint', 'uglify', 'sass']);
+	grunt.registerTask('server', 		['express:dev', 'watch' ])
+	grunt.registerTask('gh', 				['build', 'haml:gh', 'sass:gh', 'copy:gh']);
 
-  // Build task
-  grunt.registerTask('build', ['uglify', 'sass']);
 };
diff --git a/LICENSE.md b/LICENSE.md
index 2349446..039bffc 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 # The MIT License (MIT)
 
-Copyright (c) 2014 Sebastian Müller
+Copyright (c) 2014-2015 Sebastian Müller
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 8c428c2..579b4a5 100644
--- a/README.md
+++ b/README.md
@@ -26,4 +26,18 @@ new Timesheet('timesheet', 2002, 2013, [
 ]);
 ```
 
+### Bower
+
+`$ > bower install https://github.com/sbstjn/timesheet.js.git`
+
+## Grunt commands
+
+Use `grunt` to build all JavaScript and StyleSheet files located inside `dist/`. 
+
+Use `grunt server` to start a local web server on [localhost:8080](http://localhost:8080) to customize Timesheet.js, afterwards run `grunt` to compile all needed files.
+
+Use `grunt gh` to generate the site and files available at [sbstjn.github.io/timesheet.js](http://sbstjn.github.io/timesheet.js) into the `gh-pages` folder.
+
+## License
+
 Timesheet.js is licensed under MIT License.
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..2bdc9ee
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,34 @@
+{
+  "name": "timesheet.js",
+  "homepage": "https://sbstjn.github.io/timesheet.js/",
+  "authors": [
+    "sbstjn <mail@sbstjn.com>"
+  ],
+  "description": "With Timesheet.js you can easily create simple time and data sheets or timelines using HTML5, JavaScript and CSS3. Yep, it's a Vanilla JS library!",
+  "main": ["dist/timesheet.min.js", "dist/timesheet.min.css"],
+  "moduleType": [
+    "amd"
+  ],
+  "keywords": [
+    "timeline",
+    "timesheet",
+    "timebar",
+    "line",
+    "bar",
+    "graph",
+    "visualize",
+    "chart"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "screen.png",
+    "source",
+    "Gruntfile.js",
+    "package.json"
+  ]
+}
diff --git a/config.rb b/config.rb
deleted file mode 100644
index 9d8de79..0000000
--- a/config.rb
+++ /dev/null
@@ -1,14 +0,0 @@
-set :haml, { :ugly => false, :format => :html5 }
-
-set :css_dir, 'stylesheets'
-set :js_dir, 'javascripts'
-set :images_dir, 'images'
-
-activate :livereload
-
-configure :build do
-  activate :minify_css
-  activate :minify_javascript
-  activate :asset_hash, :ignore => []
-  activate :relative_assets
-end
diff --git a/dist/timesheet-white.min.css b/dist/timesheet-white.min.css
new file mode 100644
index 0000000..ffeb63f
--- /dev/null
+++ b/dist/timesheet-white.min.css
@@ -0,0 +1,2 @@
+.white .timesheet{width:720px;height:292px;margin:0 auto}.white .timesheet{border-top:1px solid rgba(60,60,60,0.3);background-color:#fbfbfb;position:relative}.white .timesheet.color-scheme-default .bubble-default{background-color:RGBA(252, 70, 74, 1)}.white .timesheet.color-scheme-default .bubble-lorem{background-color:RGBA(154, 202, 39, 1)}.white .timesheet.color-scheme-default .bubble-ipsum{background-color:RGBA(60, 182, 227, 1)}.white .timesheet.color-scheme-default .bubble-dolor{background-color:RGBA(244, 207, 48, 1)}.white .timesheet.color-scheme-default .bubble-sit{background-color:RGBA(169, 105, 202, 1)}.white .timesheet.color-scheme-alternative .bubble-default{background-color:#f3552e}.white .timesheet.color-scheme-alternative .bubble-lorem{background-color:#88c33a}.white .timesheet.color-scheme-alternative .bubble-ipsum{background-color:#436ae0}.white .timesheet.color-scheme-alternative .bubble-dolor{background-color:#f4d234}.white .timesheet.color-scheme-alternative .bubble-sit{background-color:#707d86}.white .timesheet .scale{height:100%;position:absolute;top:0;left:0;float:left}.white .timesheet .scale section{float:left;width:59px;color:rgba(50,50,50,0.8);font-family:"Signika Negative";font-size:13px;line-height:24px;font-weight:300;border-left:1px dashed rgba(50,50,50,0.1);height:100%}.white .timesheet .data{margin:28px 0 0 0;padding:0;text-align:left;list-style-type:none;color:rgba(250,250,250,0.8);font-family:"Signika Negative";font-size:13px;overflow:hidden}.white .timesheet .data li{margin:0 0 3px 0;line-height:22px;height:21px;display:block;cursor:pointer;clear:both;position:relative;white-space:nowrap}.white .timesheet .data li:hover .bubble{opacity:1}.white .timesheet .data li .date{color:#797979;font-size:14px}.white .timesheet .data li .label{font-weight:lighter;font-size:14px;padding-left:5px;line-height:21px;color:#333332;white-space:nowrap}.white .timesheet .data li .bubble{width:24px;height:7px;display:block;float:left;position:relative;top:7px;border-radius:4px;margin:0 10px 0 0;opacity:0.7}
+/*# sourceMappingURL=timesheet-white.min.css.map */
diff --git a/dist/timesheet-white.min.css.map b/dist/timesheet-white.min.css.map
new file mode 100644
index 0000000..4698b1e
--- /dev/null
+++ b/dist/timesheet-white.min.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEE,iBAAU,CACR,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,MAAM,CAEhB,iBAAU,CACR,UAAU,CAAE,4BAA+B,CAC3C,gBAAgB,CAAE,OAAsB,CACxC,QAAQ,CAAE,QAAQ,CAGhB,sDAAe,CACb,gBAAgB,CAAE,oBAAoB,CACxC,oDAAa,CACX,gBAAgB,CAAE,qBAAqB,CACzC,oDAAa,CACX,gBAAgB,CAAE,qBAAqB,CACzC,oDAAa,CACX,gBAAgB,CAAE,qBAAqB,CACzC,kDAAW,CACT,gBAAgB,CAAE,sBAAsB,CAG1C,0DAAe,CACb,gBAAgB,CAAE,OAAoB,CACxC,wDAAa,CACX,gBAAgB,CAAE,OAAqB,CACzC,wDAAa,CACX,gBAAgB,CAAE,OAAqB,CACzC,wDAAa,CACX,gBAAgB,CAAE,OAAqB,CACzC,sDAAW,CACT,gBAAgB,CAAE,OAAsB,CAG5C,wBAAM,CACJ,MAAM,CAAE,IAAI,CACZ,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CAEX,gCAAO,CACL,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,kBAAqB,CAC5B,WAAW,CAAE,kBAAkB,CAC/B,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,IAAI,CACjB,WAAW,CAAE,GAAG,CAChB,WAAW,CAAE,6BAAgC,CAC7C,MAAM,CAAE,IAAI,CAEhB,uBAAK,CACH,MAAM,CAAE,UAAU,CAClB,OAAO,CAAE,CAAC,CACV,UAAU,CAAE,IAAI,CAChB,eAAe,CAAE,IAAI,CACrB,KAAK,CAAE,qBAAwB,CAC/B,WAAW,CAAE,kBAAkB,CAC/B,SAAS,CAAE,IAAI,CACf,QAAQ,CAAE,MAAM,CAEhB,0BAAE,CACA,MAAM,CAAE,SAAS,CACjB,WAAW,CAAE,IAAI,CACjB,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,OAAO,CACf,KAAK,CAAE,IAAI,CACX,QAAQ,CAAE,QAAQ,CAClB,WAAW,CAAE,MAAM,CAGjB,wCAAO,CACL,OAAO,CAAE,CAAC,CAEd,gCAAK,CACH,KAAK,CAAE,OAAsB,CAC7B,SAAS,CAAE,IAAI,CAEjB,iCAAM,CACJ,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,IAAI,CACf,YAAY,CAAE,GAAG,CACjB,WAAW,CAAE,IAAI,CACjB,KAAK,CAAE,OAAmB,CAC1B,WAAW,CAAE,MAAM,CAErB,kCAAO,CACL,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,GAAG,CACX,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CACX,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,GAAG,CACR,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,UAAU,CAClB,OAAO,CAAE,GAAG",
+"sources": ["../source/stylesheets/timesheet-white.sass"],
+"names": [],
+"file": "timesheet-white.min.css"
+}
diff --git a/dist/timesheet.js b/dist/timesheet.js
deleted file mode 100644
index 17b13b2..0000000
--- a/dist/timesheet.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){"use strict";var Bubble=function(wMonth,min,start,end){this.min=min,this.start=start,this.end=end,this.widthMonth=wMonth};Bubble.prototype.formatMonth=function(num){return num=parseInt(num,10),num>=10?num:"0"+num},Bubble.prototype.getStartOffset=function(){return this.widthMonth/12*(12*(this.start.getFullYear()-this.min)+this.start.getMonth())},Bubble.prototype.getFullYears=function(){return(this.end&&this.end.getFullYear()||this.start.getFullYear())-this.start.getFullYear()},Bubble.prototype.getMonths=function(){var fullYears=this.getFullYears(),months=0;return this.end?this.end.hasMonth?(months+=this.end.getMonth()+1,months+=12-(this.start.hasMonth?this.start.getMonth():0),months+=12*(fullYears-1)):(months+=12-(this.start.hasMonth?this.start.getMonth():0),months+=12*(fullYears-1>0?fullYears-1:0)):months+=this.start.hasMonth?1:12,months},Bubble.prototype.getWidth=function(){return this.widthMonth/12*this.getMonths()},Bubble.prototype.getDateLabel=function(){return[(this.start.hasMonth?this.formatMonth(this.start.getMonth()+1)+"/":"")+this.start.getFullYear(),this.end?"-"+((this.end.hasMonth?this.formatMonth(this.end.getMonth()+1)+"/":"")+this.end.getFullYear()):""].join("")},window.TimesheetBubble=Bubble}(),function(){"use strict";var Timesheet=function(container,min,max,data){this.data=[],this.year={min:min,max:max},this.parse(data||[]),"undefined"!=typeof document&&(this.container="string"==typeof container?document.querySelector("#"+container):container,this.drawSections(),this.insertData())};Timesheet.prototype.insertData=function(){for(var html=[],widthMonth=this.container.querySelector(".scale section").offsetWidth,n=0,m=this.data.length;m>n;n++){var cur=this.data[n],bubble=new TimesheetBubble(widthMonth,this.year.min,cur.start,cur.end),line=['<span style="margin-left: '+bubble.getStartOffset()+"px; width: "+bubble.getWidth()+'px;" class="bubble bubble-'+(cur.type||"default")+'" data-duration="'+(cur.end?Math.round((cur.end-cur.start)/1e3/60/60/24/39):"")+'"></span>','<span class="date">'+bubble.getDateLabel()+"</span> ",'<span class="label">'+cur.label+"</span>"].join("");html.push("<li>"+line+"</li>")}this.container.innerHTML+='<ul class="data">'+html.join("")+"</ul>"},Timesheet.prototype.drawSections=function(){for(var html=[],c=this.year.min;c<=this.year.max;c++)html.push("<section>"+c+"</section>");this.container.className="timesheet color-scheme-default",this.container.innerHTML='<div class="scale">'+html.join("")+"</div>"},Timesheet.prototype.parseDate=function(date){return-1===date.indexOf("/")?(date=new Date(parseInt(date,10),0,1),date.hasMonth=!1):(date=date.split("/"),date=new Date(parseInt(date[1],10),parseInt(date[0],10)-1,1),date.hasMonth=!0),date},Timesheet.prototype.parse=function(data){for(var n=0,m=data.length;m>n;n++){var beg=this.parseDate(data[n][0]),end=4===data[n].length?this.parseDate(data[n][1]):null,lbl=4===data[n].length?data[n][2]:data[n][1],cat=data[n][3]||"default";beg.getFullYear()<this.year.min&&(this.year.min=beg.getFullYear()),end&&end.getFullYear()>this.year.max?this.year.max=end.getFullYear():beg.getFullYear()>this.year.max&&(this.year.max=beg.getFullYear()),this.data.push({start:beg,end:end,label:lbl,type:cat})}},window.Timesheet=Timesheet}();
\ No newline at end of file
diff --git a/dist/timesheet.css b/dist/timesheet.min.css
similarity index 58%
rename from dist/timesheet.css
rename to dist/timesheet.min.css
index a342a94..ec2eb90 100644
--- a/dist/timesheet.css
+++ b/dist/timesheet.min.css
@@ -1 +1,2 @@
-.timesheet{width:720px;height:292px;margin:0 auto}.timesheet{border-top:1px solid rgba(250,250,250,0.5);background-color:#333;position:relative}.timesheet.color-scheme-default .bubble-default{background-color:RGBA(252, 70, 74, 1)}.timesheet.color-scheme-default .bubble-lorem{background-color:RGBA(154, 202, 39, 1)}.timesheet.color-scheme-default .bubble-ipsum{background-color:RGBA(60, 182, 227, 1)}.timesheet.color-scheme-default .bubble-dolor{background-color:RGBA(244, 207, 48, 1)}.timesheet.color-scheme-default .bubble-sit{background-color:RGBA(169, 105, 202, 1)}.timesheet.color-scheme-alternative .bubble-default{background-color:#f3552e}.timesheet.color-scheme-alternative .bubble-lorem{background-color:#88c33a}.timesheet.color-scheme-alternative .bubble-ipsum{background-color:#436ae0}.timesheet.color-scheme-alternative .bubble-dolor{background-color:#f4d234}.timesheet.color-scheme-alternative .bubble-set{background-color:#707d86}.timesheet .scale{height:100%;position:absolute;top:0;left:0;float:left}.timesheet .scale section{float:left;width:59px;text-align:center;color:rgba(250,250,250,0.8);font-family:"Signika Negative";font-size:13px;line-height:24px;font-weight:lighter;border-left:1px dashed rgba(250,250,250,0.2);height:100%}.timesheet .data{margin:28px 0 0 0;padding:0;text-align:left;list-style-type:none;color:rgba(250,250,250,0.8);font-family:"Signika Negative";font-size:13px;overflow:hidden}.timesheet .data li{margin:0 0 3px 0;line-height:22px;height:21px;display:block;cursor:pointer;clear:both;position:relative;white-space:nowrap}.timesheet .data li:hover .bubble{opacity:1}.timesheet .data li .date{color:#b5b5b5;font-size:14px}.timesheet .data li .label{font-weight:lighter;font-size:14px;padding-left:5px;line-height:21px;color:#979796;white-space:nowrap}.timesheet .data li .bubble{width:24px;height:7px;display:block;float:left;position:relative;top:7px;border-radius:4px;margin:0 10px 0 0;opacity:0.7}#timesheet-alternative{background-color:RGBA(247, 247, 247, 1);border-radius:5px}#timesheet-alternative section{color:RGBA(63, 68, 72, 1);border-left:1px dashed RGBA(63, 68, 72, 0.2)}#timesheet-alternative section:first-child{border-left:1px dashed transparent}#timesheet-alternative .date{display:none}#timesheet-alternative .bubble{margin-right:7px}#timesheet-alternative .label{padding-left:0px;color:RGBA(48, 48, 48, 1)}
+.timesheet{width:720px;height:292px;margin:0 auto}.timesheet{border-top:1px solid rgba(250,250,250,0.5);background-color:#333;position:relative}.timesheet.color-scheme-default .bubble-default{background-color:RGBA(252, 70, 74, 1)}.timesheet.color-scheme-default .bubble-lorem{background-color:RGBA(154, 202, 39, 1)}.timesheet.color-scheme-default .bubble-ipsum{background-color:RGBA(60, 182, 227, 1)}.timesheet.color-scheme-default .bubble-dolor{background-color:RGBA(244, 207, 48, 1)}.timesheet.color-scheme-default .bubble-sit{background-color:RGBA(169, 105, 202, 1)}.timesheet.color-scheme-alternative .bubble-default{background-color:#f3552e}.timesheet.color-scheme-alternative .bubble-lorem{background-color:#88c33a}.timesheet.color-scheme-alternative .bubble-ipsum{background-color:#436ae0}.timesheet.color-scheme-alternative .bubble-dolor{background-color:#f4d234}.timesheet.color-scheme-alternative .bubble-sit{background-color:#707d86}.timesheet .scale{height:100%;position:absolute;top:0;left:0;float:left}.timesheet .scale section{float:left;width:59px;text-align:center;color:rgba(250,250,250,0.8);font-family:"Signika Negative";font-size:13px;line-height:24px;font-weight:lighter;border-left:1px dashed rgba(250,250,250,0.2);height:100%}.timesheet .data{margin:28px 0 0 0;padding:0;text-align:left;list-style-type:none;color:rgba(250,250,250,0.8);font-family:"Signika Negative";font-size:13px;overflow:hidden}.timesheet .data li{margin:0 0 3px 0;line-height:22px;height:21px;display:block;clear:both;position:relative;white-space:nowrap}.timesheet .data li:hover .bubble{opacity:1}.timesheet .data li .date{color:#b5b5b5;font-size:14px}.timesheet .data li .label{font-weight:lighter;font-size:14px;padding-left:5px;line-height:21px;color:#979796;white-space:nowrap}.timesheet .data li .bubble{width:24px;height:7px;display:block;float:left;position:relative;top:7px;border-radius:4px;margin:0 10px 0 0;opacity:0.7}#timesheet-alternative{background-color:RGBA(247, 247, 247, 1);border-radius:5px}#timesheet-alternative section{color:RGBA(63, 68, 72, 1);border-left:1px dashed RGBA(63, 68, 72, 0.2)}#timesheet-alternative section:first-child{border-left:1px dashed transparent}#timesheet-alternative .date{display:none}#timesheet-alternative .bubble{margin-right:7px}#timesheet-alternative .label{padding-left:0px;color:RGBA(48, 48, 48, 1)}
+/*# sourceMappingURL=timesheet.min.css.map */
diff --git a/dist/timesheet.min.css.map b/dist/timesheet.min.css.map
new file mode 100644
index 0000000..25084fc
--- /dev/null
+++ b/dist/timesheet.min.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,UAAU,CACR,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,MAAM,CAEhB,UAAU,CACR,UAAU,CAAE,+BAAkC,CAC9C,gBAAgB,CAAE,IAAmB,CACrC,QAAQ,CAAE,QAAQ,CAGhB,+CAAe,CACb,gBAAgB,CAAE,oBAAoB,CACxC,6CAAa,CACX,gBAAgB,CAAE,qBAAqB,CACzC,6CAAa,CACX,gBAAgB,CAAE,qBAAqB,CACzC,6CAAa,CACX,gBAAgB,CAAE,qBAAqB,CACzC,2CAAW,CACT,gBAAgB,CAAE,sBAAsB,CAG1C,mDAAe,CACb,gBAAgB,CAAE,OAAoB,CACxC,iDAAa,CACX,gBAAgB,CAAE,OAAqB,CACzC,iDAAa,CACX,gBAAgB,CAAE,OAAqB,CACzC,iDAAa,CACX,gBAAgB,CAAE,OAAqB,CACzC,+CAAW,CACT,gBAAgB,CAAE,OAAsB,CAG5C,iBAAM,CACJ,MAAM,CAAE,IAAI,CACZ,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CAEX,yBAAO,CACL,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,MAAM,CAClB,KAAK,CAAE,qBAAwB,CAC/B,WAAW,CAAE,kBAAkB,CAC/B,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,IAAI,CACjB,WAAW,CAAE,OAAO,CACpB,WAAW,CAAE,gCAAmC,CAChD,MAAM,CAAE,IAAI,CAEhB,gBAAK,CACH,MAAM,CAAE,UAAU,CAClB,OAAO,CAAE,CAAC,CACV,UAAU,CAAE,IAAI,CAChB,eAAe,CAAE,IAAI,CACrB,KAAK,CAAE,qBAAwB,CAC/B,WAAW,CAAE,kBAAkB,CAC/B,SAAS,CAAE,IAAI,CACf,QAAQ,CAAE,MAAM,CAEhB,mBAAE,CACA,MAAM,CAAE,SAAS,CACjB,WAAW,CAAE,IAAI,CACjB,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CACX,QAAQ,CAAE,QAAQ,CAClB,WAAW,CAAE,MAAM,CAGjB,iCAAO,CACL,OAAO,CAAE,CAAC,CAEd,yBAAK,CACH,KAAK,CAAE,OAAsB,CAC7B,SAAS,CAAE,IAAI,CAEjB,0BAAM,CACJ,WAAW,CAAE,OAAO,CACpB,SAAS,CAAE,IAAI,CACf,YAAY,CAAE,GAAG,CACjB,WAAW,CAAE,IAAI,CACjB,KAAK,CAAE,OAAsB,CAC7B,WAAW,CAAE,MAAM,CAErB,2BAAO,CACL,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,GAAG,CACX,OAAO,CAAE,KAAK,CACd,KAAK,CAAE,IAAI,CACX,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,GAAG,CACR,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,UAAU,CAClB,OAAO,CAAE,GAAG,CAEpB,sBAAsB,CACpB,gBAAgB,CAAE,sBAAsB,CACxC,aAAa,CAAE,GAAG,CAElB,8BAAO,CACL,KAAK,CAAE,mBAAmB,CAC1B,WAAW,CAAE,gCAAgC,CAE7C,0CAAa,CACX,WAAW,CAAE,sBAAsB,CAEvC,4BAAK,CACH,OAAO,CAAE,IAAI,CAEf,8BAAO,CACL,YAAY,CAAE,GAAG,CAEnB,6BAAM,CACJ,YAAY,CAAE,GAAG,CACjB,KAAK,CAAE,mBAAmB",
+"sources": ["../source/stylesheets/timesheet.sass"],
+"names": [],
+"file": "timesheet.min.css"
+}
diff --git a/dist/timesheet.min.js b/dist/timesheet.min.js
new file mode 100644
index 0000000..8c498e0
--- /dev/null
+++ b/dist/timesheet.min.js
@@ -0,0 +1 @@
+!function(){"use strict";var Timesheet=function(container,min,max,data){this.data=[],this.year={min:min,max:max},this.parse(data||[]),"undefined"!=typeof document&&(this.container="string"==typeof container?document.querySelector("#"+container):container,this.drawSections(),this.insertData())};Timesheet.prototype.insertData=function(){for(var html=[],widthMonth=this.container.querySelector(".scale section").offsetWidth,n=0,m=this.data.length;m>n;n++){var cur=this.data[n],bubble=this.createBubble(widthMonth,this.year.min,cur.start,cur.end),line=['<span style="margin-left: '+bubble.getStartOffset()+"px; width: "+bubble.getWidth()+'px;" class="bubble bubble-'+(cur.type||"default")+'" data-duration="'+(cur.end?Math.round((cur.end-cur.start)/1e3/60/60/24/39):"")+'"></span>','<span class="date">'+bubble.getDateLabel()+"</span> ",'<span class="label">'+cur.label+"</span>"].join("");html.push("<li>"+line+"</li>")}this.container.innerHTML+='<ul class="data">'+html.join("")+"</ul>"},Timesheet.prototype.drawSections=function(){for(var html=[],c=this.year.min;c<=this.year.max;c++)html.push("<section>"+c+"</section>");this.container.className="timesheet color-scheme-default",this.container.innerHTML='<div class="scale">'+html.join("")+"</div>"},Timesheet.prototype.parseDate=function(date){return-1===date.indexOf("/")?(date=new Date(parseInt(date,10),0,1),date.hasMonth=!1):(date=date.split("/"),date=new Date(parseInt(date[1],10),parseInt(date[0],10)-1,1),date.hasMonth=!0),date},Timesheet.prototype.parse=function(data){for(var n=0,m=data.length;m>n;n++){var beg=this.parseDate(data[n][0]),end=4===data[n].length?this.parseDate(data[n][1]):null,lbl=4===data[n].length?data[n][2]:data[n][1],cat=4===data[n].length?data[n][3]:3===data[n].length?data[n][2]:"default";beg.getFullYear()<this.year.min&&(this.year.min=beg.getFullYear()),end&&end.getFullYear()>this.year.max?this.year.max=end.getFullYear():beg.getFullYear()>this.year.max&&(this.year.max=beg.getFullYear()),this.data.push({start:beg,end:end,label:lbl,type:cat})}},Timesheet.prototype.createBubble=function(wMonth,min,start,end){return new Bubble(wMonth,min,start,end)};var Bubble=function(wMonth,min,start,end){this.min=min,this.start=start,this.end=end,this.widthMonth=wMonth};Bubble.prototype.formatMonth=function(num){return num=parseInt(num,10),num>=10?num:"0"+num},Bubble.prototype.getStartOffset=function(){return this.widthMonth/12*(12*(this.start.getFullYear()-this.min)+this.start.getMonth())},Bubble.prototype.getFullYears=function(){return(this.end&&this.end.getFullYear()||this.start.getFullYear())-this.start.getFullYear()},Bubble.prototype.getMonths=function(){var fullYears=this.getFullYears(),months=0;return this.end?this.end.hasMonth?(months+=this.end.getMonth()+1,months+=12-(this.start.hasMonth?this.start.getMonth():0),months+=12*(fullYears-1)):(months+=12-(this.start.hasMonth?this.start.getMonth():0),months+=12*(fullYears-1>0?fullYears-1:0)):months+=this.start.hasMonth?1:12,months},Bubble.prototype.getWidth=function(){return this.widthMonth/12*this.getMonths()},Bubble.prototype.getDateLabel=function(){return[(this.start.hasMonth?this.formatMonth(this.start.getMonth()+1)+"/":"")+this.start.getFullYear(),this.end?"-"+((this.end.hasMonth?this.formatMonth(this.end.getMonth()+1)+"/":"")+this.end.getFullYear()):""].join("")},window.Timesheet=Timesheet}();
\ No newline at end of file
diff --git a/package.json b/package.json
index abc24b6..4600b3e 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,24 @@
 {
   "name": "timesheet.js",
-  "version": "0.0.1",
-  "description": "Middleman, Grunt, JSHint, SASS, HAML",
-  "author": "semu",
+  "version": "1.0.1",
+  "description": "With Timesheet.js you can easily create simple time and data sheets or timelines using HTML5, JavaScript and CSS3. Yep, it's a Vanilla JS library!",
+  "author": "sbstjn <mail@sbstjn.com>",
   "devDependencies": {
+    "consolidate": "^0.13.1",
+    "express": "^4.12.4",
     "grunt": "~0.4.1",
     "grunt-cli": "~0.1.11",
-    "grunt-jslint": "~1.1.1",
+    "grunt-contrib-copy": "^0.8.0",
     "grunt-contrib-jshint": "~0.7.2",
+    "grunt-contrib-sass": "^0.7.3",
+    "grunt-contrib-uglify": "^0.4.0",
     "grunt-contrib-watch": "^0.6.1",
+    "grunt-express-server": "^0.5.1",
+    "grunt-haml": "^0.9.0",
+    "grunt-jslint": "~1.1.1",
     "grunt-simple-mocha": "^0.4.0",
-    "grunt-contrib-uglify": "^0.4.0",
-    "grunt-contrib-sass": "^0.7.3"
+    "haml": "^0.4.3",
+    "hamljs": "^0.6.2",
+    "node-sass": "^3.2.0"
   }
 }
diff --git a/serve.js b/serve.js
new file mode 100644
index 0000000..9e66861
--- /dev/null
+++ b/serve.js
@@ -0,0 +1,50 @@
+var express = require('express');
+var sass = require('node-sass');
+var fs = require('fs');
+var app = express();
+var engines = require('consolidate');
+
+app.engine('haml', engines.haml);
+app.set('views', __dirname + '/source');
+
+app.get('/script/lib.js', function(req, res) { 
+  res.end(fs.readFileSync(__dirname + '/source/javascripts/lib.js'));
+});
+
+app.get('/script/main.js', function(req, res) { 
+  res.end(fs.readFileSync(__dirname + '/source/javascripts/main.js'));
+});
+
+app.get('/script/timesheet.min.js', function(req, res) { 
+  res.end(fs.readFileSync(__dirname + '/dist/timesheet.min.js'));
+});
+
+app.get('/styles/timesheet.css', function(req, res) {
+  res.end(fs.readFileSync(__dirname + '/dist/timesheet.min.css'));
+});
+
+app.get('/styles/timesheet-white.css', function(req, res) {
+  res.end(fs.readFileSync(__dirname + '/dist/timesheet-white.min.css'));
+});
+
+app.get('/styles/style.css', function(req, res) {
+  sass.render({
+    file: __dirname + '/source/stylesheets/style.sass',
+    outputStyle: req.query.style || ""
+  }, function(err, result) {
+    res.end(result.css.toString());
+  });
+});
+
+app.get('/', function (req, res) {
+  res.render('index.haml', {
+    code: fs.readFileSync(__dirname + '/source/snippets/example-date.js') + ''
+  });
+});
+
+var server = app.listen(process.env.PORT || 3000, function () {
+  var host = server.address().address;
+  var port = server.address().port;
+
+  console.log('Example app listening at http://%s:%s', host, port);
+});
diff --git a/source/index.haml b/source/index.haml
index 54e062c..e40e09f 100644
--- a/source/index.haml
+++ b/source/index.haml
@@ -1,39 +1,44 @@
-#box
-  #box-inner
-    %h1
-      Timesheet<span>.js</span>
-    %p Visualize your data and events with sexy <span>HTML5</span> and <span>CSS3</span>. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well …
-
-    #timesheet-default
-
-    %p Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customized by mighty you.
-
-    %code
-      %pre
-        = preserve do
-          :escaped
-            <script src="http://github.com/javascripts/timesheet.js" type="text/javascript" />
-
-    %p Create a simple time sheet based on a JS array of events:
-
-    %code
-      %pre
-        = preserve do
-          :escaped
-            new Timesheet('timesheet-default', 2002, 2013, [
-              ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
-              ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
-              ['2003', 'Had very bad luck'],
-              ['10/2003', '2006', 'At least had fun', 'dolor'],
-              ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
-              ['07/2005', '09/2005', 'Bad luck again', 'default'],
-              ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
-              ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
-              ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
-              ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
-              ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
-            ]);
-
-    %p It's that simple to use <span>Timesheet.js</span>. So, have a nice day, thank you for smoking and maybe try using Timesheet.js with custom styles …
-
-    %p.footer Timesheet.js is licensed under MIT License<br />Cheers to <a href="https://twitter.com/cheeaun">Cheeaun</a> and <a href="https://twitter.com/igrigorik/">Ilya</a><br /><br /><br /><span><a href="https://github.com/semu/timesheet.js">❤</a></span><br /><br /><a href="#dark" id="switch-dark">dark</a> | <a href="#light" id="switch-light">light</a>
+!!! 5
+%html
+  %head
+    %title Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
+  
+    %meta{charset: 'utf-8'}
+    %meta{content: 'IE=edge,chrome=1', 'http-equiv': 'X-UA-Compatible'}
+    
+    %meta{property: 'og:title',         content: 'Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …'}
+    %meta{property: 'og:description',   content: 'With Timesheet.js you can easily create simple time and data sheets or timelines using HTML5, JavaScript and CSS3. Yep, it\'s a Vanilla JS library!'}
+    %meta{property: 'og:url',           content: 'https://sbstjn.github.io/timesheet.js/'}
+    %meta{property: 'og:image',         content: 'https://raw.githubusercontent.com/sbstjn/timesheet.js/master/screen.png'}
+    %meta{property: 'fb:admins',        content: '669118929'}
+    
+    %script{type: 'text/javascript', src: './script/lib.js'}
+    %script{type: 'text/javascript', src: './script/timesheet.min.js'}
+    %script{type: 'text/javascript', src: './script/main.js'}
+    
+    %link{rel: 'stylesheet', type: "text/css", href: "./styles/style.css"}
+    %link{rel: 'stylesheet', type: "text/css", href: "./styles/timesheet.css"}
+    %link{rel: 'stylesheet', type: "text/css", href: "./styles/timesheet-white.css"}
+    
+    %link{rel: 'stylesheet', type: "text/css", href: "https://fonts.jimstatic.com/css?family=Oxygen+Mono:400,600,800"}
+    %link{rel: 'stylesheet', type: "text/css", href: "https://fonts.jimstatic.com/css?family=Open+Sans:400,600,800"}
+    %link{rel: 'stylesheet', type: "text/css", href: "https://fonts.jimstatic.com/css?family=Signika+Negative:300,400,600,700"}
+    
+  %body.black
+    #box
+      #box-inner
+        %h1
+          Timesheet<span>.js</span>
+        %p Visualize your data and events with sexy <span>HTML5</span> and <span>CSS3</span>. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well …
+        #timesheet-default
+        %p Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customized by almighty you.
+        %code
+          %pre!='&lt;script src="http://github.com/javascripts/timesheet.js" type="text/javascript" /&gt;'
+        %p Create a simple time sheet based on a JS array of events:
+        %code
+          %pre!=code
+        %p It's that simple to use <span>Timesheet.js</span>. So, have a nice day, thank you for smoking and maybe try using Timesheet.js with custom styles …
+        
+        %p.footer  <a href='https://github.com/sbstjn/timesheet.js'>Timesheet.js</a> is licensed under <a href='https://github.com/sbstjn/timesheet.js/blob/master/LICENSE.md'>MIT License</a><br />Cheers to <a href='https://twitter.com/cheeaun'>Cheeaun</a> and <a href='https://twitter.com/igrigorik/'>Ilya</a><br /><br /><br /><span><a href='http://s11k.com/'>❤</a></span><br /><br /><a href='#dark' id='switch-dark'>dark</a> | <a href='#light' id='switch-light'>light</a>
+        
+    %span  <a href='https://github.com/sbstjn/timesheet.js'><img style='position: absolute; top: 0; right: 0; border: 0;' src='https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67' alt='Fork Timesheet.js on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png'></a>
diff --git a/source/javascripts/main.js b/source/javascripts/main.js
index 89847c1..55c8ac9 100644
--- a/source/javascripts/main.js
+++ b/source/javascripts/main.js
@@ -1,11 +1,11 @@
-//= require_tree .
-
 /* global Lib, Timesheet */
 
 (function(){
   'use strict';
-
+  
   Lib.ready(function() {
+    console.log('ads');
+    
     /* jshint -W031 */
     new Timesheet('timesheet-default', 2002, 2013, [
       ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
diff --git a/source/javascripts/timesheet.bubble.js b/source/javascripts/timesheet.bubble.js
deleted file mode 100644
index 98d3af8..0000000
--- a/source/javascripts/timesheet.bubble.js
+++ /dev/null
@@ -1,78 +0,0 @@
-(function() {
-  'use strict';
-
-  /**
-   * Timesheet Bubble
-   */
-  var Bubble = function(wMonth, min, start, end) {
-    this.min = min;
-    this.start = start;
-    this.end = end;
-    this.widthMonth = wMonth;
-  };
-
-  /**
-   * Format month number
-   */
-  Bubble.prototype.formatMonth = function(num) {
-    num = parseInt(num, 10);
-
-    return num >= 10 ? num : '0' + num;
-  };
-
-  /**
-   * Calculate starting offset for bubble
-   */
-  Bubble.prototype.getStartOffset = function() {
-    return (this.widthMonth/12) * (12 * (this.start.getFullYear() - this.min) + this.start.getMonth());
-  };
-
-  /**
-   * Get count of full years from start to end
-   */
-  Bubble.prototype.getFullYears = function() {
-    return ((this.end && this.end.getFullYear()) || this.start.getFullYear()) - this.start.getFullYear();
-  };
-
-  /**
-   * Get count of all months in Timesheet Bubble
-   */
-  Bubble.prototype.getMonths = function() {
-    var fullYears = this.getFullYears();
-    var months = 0;
-
-    if (!this.end) {
-      months += !this.start.hasMonth ? 12 : 1;
-    } else {
-      if (!this.end.hasMonth) {
-        months += 12 - (this.start.hasMonth ? this.start.getMonth() : 0);
-        months += 12 * (fullYears-1 > 0 ? fullYears-1 : 0);
-      } else {
-        months += this.end.getMonth() + 1;
-        months += 12 - (this.start.hasMonth ? this.start.getMonth() : 0);
-        months += 12 * (fullYears-1);
-      }
-    }
-
-    return months;
-  };
-
-  /**
-   * Get bubble's width in pixel
-   */
-  Bubble.prototype.getWidth = function() {
-    return (this.widthMonth/12) * this.getMonths();
-  };
-
-  /**
-   * Get the bubble's label
-   */
-  Bubble.prototype.getDateLabel = function() {
-    return [
-      (this.start.hasMonth ? this.formatMonth(this.start.getMonth() + 1) + '/' : '' ) + this.start.getFullYear(),
-      (this.end ? '-' + ((this.end.hasMonth ? this.formatMonth(this.end.getMonth() + 1) + '/' : '' ) + this.end.getFullYear()) : '')
-    ].join('');
-  };
-
-  window.TimesheetBubble = Bubble;
-})();
diff --git a/source/javascripts/timesheet.js b/source/javascripts/timesheet.js
index 3b79f15..5302331 100644
--- a/source/javascripts/timesheet.js
+++ b/source/javascripts/timesheet.js
@@ -1,7 +1,3 @@
-// require 'timesheet.bubble'
-
-/* global TimesheetBubble */
-
 (function() {
   'use strict';
 
@@ -33,7 +29,7 @@
 
     for (var n = 0, m = this.data.length; n < m; n++) {
       var cur = this.data[n];
-      var bubble = new TimesheetBubble(widthMonth, this.year.min, cur.start, cur.end);
+      var bubble = this.createBubble(widthMonth, this.year.min, cur.start, cur.end);
 
       var line = [
         '<span style="margin-left: ' + bubble.getStartOffset() + 'px; width: ' + bubble.getWidth() + 'px;" class="bubble bubble-' + (cur.type || 'default') + '" data-duration="' + (cur.end ? Math.round((cur.end-cur.start)/1000/60/60/24/39) : '') + '"></span>',
@@ -85,7 +81,7 @@
       var beg = this.parseDate(data[n][0]);
       var end = data[n].length === 4 ? this.parseDate(data[n][1]) : null;
       var lbl = data[n].length === 4 ? data[n][2] : data[n][1];
-      var cat = data[n][3] || 'default';
+      var cat = data[n].length === 4 ? data[n][3] : data[n].length === 3 ? data[n][2] : 'default';
 
       if (beg.getFullYear() < this.year.min) {
         this.year.min = beg.getFullYear();
@@ -101,5 +97,85 @@
     }
   };
 
+  /**
+   * Wrapper for adding bubbles
+   */
+  Timesheet.prototype.createBubble = function(wMonth, min, start, end) {
+    return new Bubble(wMonth, min, start, end);
+  };
+
+  /**
+   * Timesheet Bubble
+   */
+  var Bubble = function(wMonth, min, start, end) {
+    this.min = min;
+    this.start = start;
+    this.end = end;
+    this.widthMonth = wMonth;
+  };
+
+  /**
+   * Format month number
+   */
+  Bubble.prototype.formatMonth = function(num) {
+    num = parseInt(num, 10);
+
+    return num >= 10 ? num : '0' + num;
+  };
+
+  /**
+   * Calculate starting offset for bubble
+   */
+  Bubble.prototype.getStartOffset = function() {
+    return (this.widthMonth/12) * (12 * (this.start.getFullYear() - this.min) + this.start.getMonth());
+  };
+
+  /**
+   * Get count of full years from start to end
+   */
+  Bubble.prototype.getFullYears = function() {
+    return ((this.end && this.end.getFullYear()) || this.start.getFullYear()) - this.start.getFullYear();
+  };
+
+  /**
+   * Get count of all months in Timesheet Bubble
+   */
+  Bubble.prototype.getMonths = function() {
+    var fullYears = this.getFullYears();
+    var months = 0;
+
+    if (!this.end) {
+      months += !this.start.hasMonth ? 12 : 1;
+    } else {
+      if (!this.end.hasMonth) {
+        months += 12 - (this.start.hasMonth ? this.start.getMonth() : 0);
+        months += 12 * (fullYears-1 > 0 ? fullYears-1 : 0);
+      } else {
+        months += this.end.getMonth() + 1;
+        months += 12 - (this.start.hasMonth ? this.start.getMonth() : 0);
+        months += 12 * (fullYears-1);
+      }
+    }
+
+    return months;
+  };
+
+  /**
+   * Get bubble's width in pixel
+   */
+  Bubble.prototype.getWidth = function() {
+    return (this.widthMonth/12) * this.getMonths();
+  };
+
+  /**
+   * Get the bubble's label
+   */
+  Bubble.prototype.getDateLabel = function() {
+    return [
+      (this.start.hasMonth ? this.formatMonth(this.start.getMonth() + 1) + '/' : '' ) + this.start.getFullYear(),
+      (this.end ? '-' + ((this.end.hasMonth ? this.formatMonth(this.end.getMonth() + 1) + '/' : '' ) + this.end.getFullYear()) : '')
+    ].join('');
+  };
+
   window.Timesheet = Timesheet;
-})();
+})();
\ No newline at end of file
diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml
deleted file mode 100644
index af9698b..0000000
--- a/source/layouts/layout.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-!!! 5
-%html
-  %head
-    %meta{:charset => 'utf-8'}
-    %meta{:content => 'IE=edge,chrome=1', 'http-equiv' => 'X-UA-Compatible'}
-    %meta{:property => 'og:title', :content => 'Timesheet.js'}
-    %meta{:property => 'og:description', :content => 'With Timesheet.js you can create simple time and data sheets using HTML5, JavaScript and CSS3.'}
-    %meta{:property => 'og:url', :content => 'https://semu.github.io/timesheet.js/'}
-    %meta{:property => 'og:image', :content => 'https://raw.githubusercontent.com/semu/timesheet.js/master/screen.png'}
-    %meta{:property => 'fb:admins', :content => '669118929'}
-
-    %title Timesheet.js - Open time tables with HTML, JavaScript and CSS …
-
-    = javascript_include_tag 'timesheet.js', 'main.js'
-    = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Oxygen+Mono:400,600,800'
-    = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Open+Sans:400,600,800'
-    = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700'
-    = stylesheet_link_tag 'all.css'
-    = yield_content :head
-  %body.black{ :class => page_classes }
-    %span <a href='https://github.com/semu/timesheet.js'><img style='position: absolute; top: 0; right: 0; border: 0;' src='https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png'></a>
-    #container
-      = yield
-    %script{:type => 'text/javascript'} var _gauges = _gauges || []; (function() { var t = document.createElement('script'); t.type = 'text/javascript'; t.async = true; t.id = 'gauges-tracker'; t.setAttribute('data-site-id', '538272a38bfdf705f50037c3'); t.src = '//secure.gaug.es/track.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(t, s); })();
diff --git a/source/snippets/example-date.js b/source/snippets/example-date.js
new file mode 100644
index 0000000..9b75581
--- /dev/null
+++ b/source/snippets/example-date.js
@@ -0,0 +1,13 @@
+new Timesheet('timesheet-default', 2002, 2013, [
+  ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
+  ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
+  ['2003', 'Had very bad luck'],
+  ['10/2003', '2006', 'At least had fun', 'dolor'],
+  ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
+  ['07/2005', '09/2005', 'Bad luck again', 'default'],
+  ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
+  ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
+  ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
+  ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
+  ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
+]);
\ No newline at end of file
diff --git a/source/stylesheets/_normalize.css.sass b/source/stylesheets/_normalize.sass
similarity index 100%
rename from source/stylesheets/_normalize.css.sass
rename to source/stylesheets/_normalize.sass
diff --git a/source/stylesheets/all.css.sass b/source/stylesheets/style.sass
similarity index 97%
rename from source/stylesheets/all.css.sass
rename to source/stylesheets/style.sass
index 99656d4..57b0452 100644
--- a/source/stylesheets/all.css.sass
+++ b/source/stylesheets/style.sass
@@ -155,9 +155,3 @@ a, a:hover, a:visited, a:active
     span
       color: rgba(255, 145, 18, 1)
       font-weight: 600
-
-
-@import 'http://github.com/timesheet'
-
-.white
-  @import 'http://github.com/timesheet-white'
diff --git a/source/stylesheets/timesheet-white.css.sass b/source/stylesheets/timesheet-white.css.sass
deleted file mode 100644
index dfeb4ba..0000000
--- a/source/stylesheets/timesheet-white.css.sass
+++ /dev/null
@@ -1,100 +0,0 @@
-.timesheet
-  width: 720px
-  height: 292px
-  margin: 0 auto
-
-.timesheet
-  border-top: 1px solid rgba(60, 60, 60, 0.3)
-  background-color: rgba(251, 251, 251, 1)
-  position: relative
-
-  &.color-scheme-default
-    .bubble-default
-      background-color: RGBA(252, 70, 74, 1) // red
-    .bubble-lorem
-      background-color: RGBA(154, 202, 39, 1) // green
-    .bubble-ipsum
-      background-color: RGBA(60, 182, 227, 1) // blue
-    .bubble-dolor
-      background-color: RGBA(244, 207, 48, 1) // yellow
-    .bubble-sit
-      background-color: RGBA(169, 105, 202, 1) // cyan
-
-  &.color-scheme-alternative
-    .bubble-default
-      background-color: rgba(243, 85, 46, 1)
-    .bubble-lorem
-      background-color: rgba(136, 195, 58, 1)
-    .bubble-ipsum
-      background-color: rgba(67, 106, 224, 1)
-    .bubble-dolor
-      background-color: rgba(244, 210, 52, 1)
-    .bubble-set
-      background-color: rgba(112, 125, 134, 1)
-
-
-  .scale
-    height: 100%
-    position: absolute
-    top: 0
-    left: 0
-    float: left
-
-    section
-      float: left
-      width: 59px
-      text-align: center
-      color: rgba(50, 50, 50, 0.8)
-      font-family: 'Signika Negative'
-      font-size: 13px
-      line-height: 24px
-      font-weight: 300
-      border-left: 1px dashed rgba(50, 50, 50, 0.1)
-      height: 100%
-
-  .data
-    margin: 28px 0 0 0
-    padding: 0
-    text-align: left
-    list-style-type: none
-    color: rgba(250, 250, 250, 0.8)
-    font-family: 'Signika Negative'
-    font-size: 13px
-    overflow: hidden
-
-    li
-      margin: 0 0 3px 0
-      line-height: 22px
-      height: 21px
-      display: block
-      cursor: pointer
-      clear: both
-      position: relative
-      white-space: nowrap
-
-      &:hover
-        .bubble
-          opacity: 1
-
-      .date
-        color: rgba(121, 121, 121, 1)
-        font-size: 14px
-
-      .label
-        font-weight: lighter
-        font-size: 14px
-        padding-left: 5px
-        line-height: 21px
-        color: rgba(51, 51, 50, 1)
-        white-space: nowrap
-
-      .bubble
-        width: 24px
-        height: 7px
-        display: block
-        float: left
-        position: relative
-        top: 7px
-        border-radius: 4px
-        margin: 0 10px 0 0
-        opacity: 0.7
diff --git a/source/stylesheets/timesheet-white.sass b/source/stylesheets/timesheet-white.sass
new file mode 100644
index 0000000..8fff4b1
--- /dev/null
+++ b/source/stylesheets/timesheet-white.sass
@@ -0,0 +1,101 @@
+
+.white
+  .timesheet
+    width: 720px
+    height: 292px
+    margin: 0 auto
+  
+  .timesheet
+    border-top: 1px solid rgba(60, 60, 60, 0.3)
+    background-color: rgba(251, 251, 251, 1)
+    position: relative
+  
+    &.color-scheme-default
+      .bubble-default
+        background-color: RGBA(252, 70, 74, 1) // red
+      .bubble-lorem
+        background-color: RGBA(154, 202, 39, 1) // green
+      .bubble-ipsum
+        background-color: RGBA(60, 182, 227, 1) // blue
+      .bubble-dolor
+        background-color: RGBA(244, 207, 48, 1) // yellow
+      .bubble-sit
+        background-color: RGBA(169, 105, 202, 1) // cyan
+  
+    &.color-scheme-alternative
+      .bubble-default
+        background-color: rgba(243, 85, 46, 1)
+      .bubble-lorem
+        background-color: rgba(136, 195, 58, 1)
+      .bubble-ipsum
+        background-color: rgba(67, 106, 224, 1)
+      .bubble-dolor
+        background-color: rgba(244, 210, 52, 1)
+      .bubble-sit
+        background-color: rgba(112, 125, 134, 1)
+  
+  
+    .scale
+      height: 100%
+      position: absolute
+      top: 0
+      left: 0
+      float: left
+  
+      section
+        float: left
+        width: 59px
+        color: rgba(50, 50, 50, 0.8)
+        font-family: 'Signika Negative'
+        font-size: 13px
+        line-height: 24px
+        font-weight: 300
+        border-left: 1px dashed rgba(50, 50, 50, 0.1)
+        height: 100%
+  
+    .data
+      margin: 28px 0 0 0
+      padding: 0
+      text-align: left
+      list-style-type: none
+      color: rgba(250, 250, 250, 0.8)
+      font-family: 'Signika Negative'
+      font-size: 13px
+      overflow: hidden
+  
+      li
+        margin: 0 0 3px 0
+        line-height: 22px
+        height: 21px
+        display: block
+        cursor: pointer
+        clear: both
+        position: relative
+        white-space: nowrap
+  
+        &:hover
+          .bubble
+            opacity: 1
+  
+        .date
+          color: rgba(121, 121, 121, 1)
+          font-size: 14px
+  
+        .label
+          font-weight: lighter
+          font-size: 14px
+          padding-left: 5px
+          line-height: 21px
+          color: rgba(51, 51, 50, 1)
+          white-space: nowrap
+  
+        .bubble
+          width: 24px
+          height: 7px
+          display: block
+          float: left
+          position: relative
+          top: 7px
+          border-radius: 4px
+          margin: 0 10px 0 0
+          opacity: 0.7
diff --git a/source/stylesheets/timesheet.css.sass b/source/stylesheets/timesheet.sass
similarity index 98%
rename from source/stylesheets/timesheet.css.sass
rename to source/stylesheets/timesheet.sass
index fa64900..ae171bf 100644
--- a/source/stylesheets/timesheet.css.sass
+++ b/source/stylesheets/timesheet.sass
@@ -29,7 +29,7 @@
       background-color: rgba(67, 106, 224, 1)
     .bubble-dolor
       background-color: rgba(244, 210, 52, 1)
-    .bubble-set
+    .bubble-sit
       background-color: rgba(112, 125, 134, 1)
 
 
@@ -67,7 +67,6 @@
       line-height: 22px
       height: 21px
       display: block
-      cursor: pointer
       clear: both
       position: relative
       white-space: nowrap
diff --git a/test/timesheet.js b/test/timesheet.js
index 5d84105..311fd19 100644
--- a/test/timesheet.js
+++ b/test/timesheet.js
@@ -3,27 +3,26 @@
  */
 window = {};
 require(__dirname + '/../source/javascripts/timesheet.js');
-require(__dirname + '/../source/javascripts/timesheet.bubble.js');
 
 var assert = require('assert');
 suite('Timesheet', function() {
   test('Calculation', function(done) {
     var TS = new window.Timesheet();
 
-    assert.equal(12,  (new window.TimesheetBubble(60, 2012, TS.parseDate('2002'), TS.parseDate('2002'))).getMonths());
-    assert.equal(12,  (new window.TimesheetBubble(60, 2012, TS.parseDate('2002'), TS.parseDate('2003'))).getMonths());
-    assert.equal(24,  (new window.TimesheetBubble(60, 2012, TS.parseDate('2002'), TS.parseDate('2004'))).getMonths());
+    assert.equal(12,  (TS.createBubble(60, 2012, TS.parseDate('2002'), TS.parseDate('2002'))).getMonths());
+    assert.equal(12,  (TS.createBubble(60, 2012, TS.parseDate('2002'), TS.parseDate('2003'))).getMonths());
+    assert.equal(24,  (TS.createBubble(60, 2012, TS.parseDate('2002'), TS.parseDate('2004'))).getMonths());
 
-    assert.equal(9,   (new window.TimesheetBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('2002'))).getMonths());
-    assert.equal(9,   (new window.TimesheetBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('2003'))).getMonths());
-    assert.equal(21,  (new window.TimesheetBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('2004'))).getMonths());
+    assert.equal(9,   (TS.createBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('2002'))).getMonths());
+    assert.equal(9,   (TS.createBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('2003'))).getMonths());
+    assert.equal(21,  (TS.createBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('2004'))).getMonths());
 
-    assert.equal(13,  (new window.TimesheetBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('04/2003'))).getMonths());
+    assert.equal(13,  (TS.createBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('04/2003'))).getMonths());
 
-    assert.equal(25,  (new window.TimesheetBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('04/2004'))).getMonths());
+    assert.equal(25,  (TS.createBubble(60, 2012, TS.parseDate('04/2002'), TS.parseDate('04/2004'))).getMonths());
 
-    assert.equal(1,   (new window.TimesheetBubble(60, 2012, TS.parseDate('04/2002'))).getMonths());
-    assert.equal(12,  (new window.TimesheetBubble(60, 2012, TS.parseDate('2002'))).getMonths());
+    assert.equal(1,   (TS.createBubble(60, 2012, TS.parseDate('04/2002'))).getMonths());
+    assert.equal(12,  (TS.createBubble(60, 2012, TS.parseDate('2002'))).getMonths());
 
     done();
   });