diff --git a/.ruby-version b/.ruby-version
new file mode 100644
index 0000000..e1b9401
--- /dev/null
+++ b/.ruby-version
@@ -0,0 +1 @@
+2.0.0-p195
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..4dda5bc
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+gem 'compass',  '~> 0.12'
+gem 'uglifier', '~> 2.1'
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 0000000..cb2de78
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,23 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    chunky_png (1.2.8)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
+    fssm (0.2.10)
+    multi_json (1.7.7)
+    sass (3.2.9)
+    uglifier (2.1.1)
+      execjs (>= 0.3.0)
+      multi_json (~> 1.0, >= 1.0.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  compass (~> 0.12)
+  uglifier (~> 2.1)
diff --git a/README.md b/README.md
index 9a46e1f..8c50106 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,6 @@ $(function() {
 });
 ```
 
-- TODO compress
 - TODO release plugin
 
 ## Configuration
diff --git a/Rakefile b/Rakefile
new file mode 100644
index 0000000..b696db3
--- /dev/null
+++ b/Rakefile
@@ -0,0 +1,18 @@
+require 'uglifier'
+require 'compass'
+
+task :compile_js do
+  source = File.read(File.expand_path('js/box-lid.js', __dir__))
+  uglified, source_map = Uglifier.compile_with_map(source)
+  { js: uglified, map: source_map }.each do |k, v|
+    File.write(File.expand_path("js/box-lid.min.#{k}", __dir__), v)
+  end
+  puts 'done with javascripts'
+end
+
+task :compile_css do
+  system 'compass compile', '--output-style=compressed', '.'
+  puts 'done with stylesheets'
+end
+
+task :compile => %i[compile_css compile_js]
diff --git a/css/box-lid.css b/css/box-lid.css
index d7d265a..0e07b79 100644
--- a/css/box-lid.css
+++ b/css/box-lid.css
@@ -4,89 +4,4 @@
  *
  * Copyright 2013 Jiunn Haur Lim
  * Released under the MIT License
- */
-/* line 23, ../sass/box-lid.scss */
-.box-lid {
-  -webkit-perspective: 2000;
-  -moz-perspective: 2000;
-  -ms-perspective: 2000;
-  -o-perspective: 2000;
-  perspective: 2000;
-  -webkit-perspective-origin: 50% 50%;
-  -moz-perspective-origin: 50% 50%;
-  -ms-perspective-origin: 50% 50%;
-  -o-perspective-origin: 50% 50%;
-  perspective-origin: 50% 50%;
-  background: black;
-}
-/* line 29, ../sass/box-lid.scss */
-.box-lid .box-lid-content {
-  -webkit-transition: all 500ms cubic-bezier(0.75, 0, 0.175, 1);
-  -moz-transition: all 500ms cubic-bezier(0.75, 0, 0.175, 1);
-  -o-transition: all 500ms cubic-bezier(0.75, 0, 0.175, 1);
-  transition: all 500ms cubic-bezier(0.75, 0, 0.175, 1);
-}
-/* line 33, ../sass/box-lid.scss */
-.box-lid .box-lid-icon {
-  -webkit-transition: all 250ms cubic-bezier(0.75, 0, 0.175, 1);
-  -moz-transition: all 250ms cubic-bezier(0.75, 0, 0.175, 1);
-  -o-transition: all 250ms cubic-bezier(0.75, 0, 0.175, 1);
-  transition: all 250ms cubic-bezier(0.75, 0, 0.175, 1);
-  position: absolute;
-  top: 50%;
-  left: 25%;
-}
-/* line 40, ../sass/box-lid.scss */
-.box-lid .box-lid-icon:before {
-  content: '';
-  position: absolute;
-  width: 1.1em;
-  height: 0.15em;
-  background: black;
-  box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black;
-}
-/* line 51, ../sass/box-lid.scss */
-.box-lid .box-lid-menu {
-  width: 40px;
-  position: fixed;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.08);
-  top: 0;
-  left: 0;
-  z-index: 2;
-}
-/* line 59, ../sass/box-lid.scss */
-.box-lid .box-lid-menu nav {
-  -webkit-transition: all 500ms cubic-bezier(0.75, 0, 0.175, 1);
-  -moz-transition: all 500ms cubic-bezier(0.75, 0, 0.175, 1);
-  -o-transition: all 500ms cubic-bezier(0.75, 0, 0.175, 1);
-  transition: all 500ms cubic-bezier(0.75, 0, 0.175, 1);
-  display: block;
-  height: 100%;
-  width: 200px;
-  position: absolute;
-  top: 0;
-  left: -240px;
-  color: white;
-}
-/* line 68, ../sass/box-lid.scss */
-.box-lid .box-lid-menu nav a {
-  display: block;
-}
-/* line 73, ../sass/box-lid.scss */
-.box-lid.box-lid-open .box-lid-content {
-  -webkit-transform: rotateY(-30deg) translateZ(0px) translateX(200px);
-  -moz-transform: rotateY(-30deg) translateZ(0px) translateX(200px);
-  -ms-transform: rotateY(-30deg) translateZ(0px) translateX(200px);
-  -o-transform: rotateY(-30deg) translateZ(0px) translateX(200px);
-  transform: rotateY(-30deg) translateZ(0px) translateX(200px);
-}
-/* line 76, ../sass/box-lid.scss */
-.box-lid.box-lid-open .box-lid-icon {
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-  opacity: 0;
-}
-/* line 77, ../sass/box-lid.scss */
-.box-lid.box-lid-open .box-lid-menu nav {
-  left: 0;
-}
+ */.box-lid{-webkit-perspective:2000;-moz-perspective:2000;-ms-perspective:2000;-o-perspective:2000;perspective:2000;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%;background:#000}.box-lid .box-lid-content{-webkit-transition:all 500ms cubic-bezier(0.75, 0, 0.175, 1);-moz-transition:all 500ms cubic-bezier(0.75, 0, 0.175, 1);-o-transition:all 500ms cubic-bezier(0.75, 0, 0.175, 1);transition:all 500ms cubic-bezier(0.75, 0, 0.175, 1)}.box-lid .box-lid-icon{-webkit-transition:all 250ms cubic-bezier(0.75, 0, 0.175, 1);-moz-transition:all 250ms cubic-bezier(0.75, 0, 0.175, 1);-o-transition:all 250ms cubic-bezier(0.75, 0, 0.175, 1);transition:all 250ms cubic-bezier(0.75, 0, 0.175, 1);position:absolute;top:50%;left:25%}.box-lid .box-lid-icon:before{content:'';position:absolute;width:1.1em;height:0.15em;background:black;box-shadow:0 0.25em 0 0 black, 0 0.5em 0 0 black}.box-lid .box-lid-menu{width:40px;background:rgba(0,0,0,0.08);position:fixed;height:100%;top:0;left:0;z-index:2}.box-lid .box-lid-menu nav{-webkit-transition:all 500ms cubic-bezier(0.75, 0, 0.175, 1);-moz-transition:all 500ms cubic-bezier(0.75, 0, 0.175, 1);-o-transition:all 500ms cubic-bezier(0.75, 0, 0.175, 1);transition:all 500ms cubic-bezier(0.75, 0, 0.175, 1);display:block;height:100%;width:200px;position:absolute;top:0;left:-240px;color:#fff}.box-lid .box-lid-menu nav a{display:block}.box-lid.box-lid-open .box-lid-content{-webkit-transform:rotateY(-30deg) translateZ(0px) translateX(200px);-moz-transform:rotateY(-30deg) translateZ(0px) translateX(200px);-ms-transform:rotateY(-30deg) translateZ(0px) translateX(200px);-o-transform:rotateY(-30deg) translateZ(0px) translateX(200px);transform:rotateY(-30deg) translateZ(0px) translateX(200px)}.box-lid.box-lid-open .box-lid-icon{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}.box-lid.box-lid-open .box-lid-menu nav{left:0}
diff --git a/js/box-lid.js b/js/box-lid.js
index b571961..654bd48 100644
--- a/js/box-lid.js
+++ b/js/box-lid.js
@@ -22,12 +22,14 @@
 
     var container = $(opts.container);
 
+    // opens the lid with a tiny delay to prevent blinking
     this.open  = function() {
       container.data('box-lid-timer', setTimeout(function() {
         container.addClass(opts.flag);
       }, 100));
     };
 
+    // closes the lid
     this.close = function() {
       clearTimeout(container.data('box-lid-timer'));
       container.removeClass(opts.flag);
diff --git a/js/box-lid.min.js b/js/box-lid.min.js
new file mode 100644
index 0000000..24e4dc1
--- /dev/null
+++ b/js/box-lid.min.js
@@ -0,0 +1,11 @@
+/*!
+ * jQuery Box Lid Plugin v0.1
+ * https://github.com/jimjh/jquery-box-lid
+ *
+ * Copyright 2013 Jiunn Haur Lim
+ * Released under the MIT License
+ *
+ * Usage:
+ *    $('.box-lid-menu').boxLid();
+ */
+!function(n){"use strict";function t(t){t=n.extend({container:".box-lid",flag:"box-lid-open"},t);var e=n(t.container);this.open=function(){e.data("box-lid-timer",setTimeout(function(){e.addClass(t.flag)},100))},this.close=function(){clearTimeout(e.data("box-lid-timer")),e.removeClass(t.flag)}}n.fn.boxLid=function(e){var i=new t(e);return this.each(function(){n(this).hover(i.open,i.close)})}}(jQuery);
\ No newline at end of file
diff --git a/js/box-lid.min.map b/js/box-lid.min.map
new file mode 100644
index 0000000..c515aed
--- /dev/null
+++ b/js/box-lid.min.map
@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":["?"],"names":["$","BoxLid","opts","extend","container","flag","this","open","data","setTimeout","addClass","close","clearTimeout","removeClass","fn","boxLid","options","box","each","hover","jQuery"],"mappings":";;;;;;;;;;CAUC,SAAUA,GACT,YAIA,SAASC,GAAOC,GAEdA,EAAOF,EAAEG,QACPC,UAAW,WACXC,KAAW,gBACVH,EAEH,IAAIE,GAAYJ,EAAEE,EAAKE,UAGvBE,MAAKC,KAAQ,WACXH,EAAUI,KAAK,gBAAiBC,WAAW,WACzCL,EAAUM,SAASR,EAAKG,OACvB,OAILC,KAAKK,MAAQ,WACXC,aAAaR,EAAUI,KAAK,kBAC5BJ,EAAUS,YAAYX,EAAKG,OAK/BL,EAAEc,GAAGC,OAAS,SAAUC,GACtB,GAAIC,GAAM,GAAIhB,GAAOe,EACrB,OAAOV,MAAKY,KAAK,WACflB,EAAEM,MAAMa,MAAMF,EAAIV,KAAMU,EAAIN,WAI/BS"}
\ No newline at end of file
diff --git a/sass/box-lid.scss b/sass/box-lid.scss
index c3aebef..6c7eace 100644
--- a/sass/box-lid.scss
+++ b/sass/box-lid.scss
@@ -1,5 +1,3 @@
-// TODO make mixins
-// TODO compress
 /*!
  * jQuery Box Lid Plugin v0.1
  * https://github.com/jimjh/jquery-box-lid
@@ -7,6 +5,7 @@
  * Copyright 2013 Jiunn Haur Lim
  * Released under the MIT License
  */
+// TODO make mixins
 @import "compass/css3";
 
 $box-lid-background: #000  !default; // background that appears when lid is open
@@ -32,12 +31,12 @@ $box-lid-bar-background: rgba(0, 0, 0, 0.08) !default;
 
   .box-lid-icon {
     @include transition(all 250ms $box-lid-transition);
-    position: absolute;
+    position: absolute;  // center the navicon
     top: 50%;
     left: 25%;
   }
 
-  .box-lid-icon:before {
+  .box-lid-icon:before { // create the navicon using shadows
     content: '';
     position: absolute;
     width: 1.1em;
@@ -50,13 +49,13 @@ $box-lid-bar-background: rgba(0, 0, 0, 0.08) !default;
 
   .box-lid-menu {
     width: $box-lid-bar-width;
-    position: fixed;
-    height: 100%;
     background: $box-lid-bar-background;
+    position: fixed; // create bar that fills up the page
+    height: 100%;
     top: 0;
     left: 0;
     z-index: 2;
-    nav {
+    nav { // push nav to the left, beyond the viewport
       @include transition(all 500ms $box-lid-transition);
       display: block;
       height: 100%;
@@ -70,7 +69,7 @@ $box-lid-bar-background: rgba(0, 0, 0, 0.08) !default;
   }
 
   &.box-lid-open {
-    .box-lid-content {
+    .box-lid-content { // skew the content
       @include transform(rotateY(-30deg) translateZ(0px) translateX(200px));
     }
     .box-lid-icon { @include opacity(0); }