Refactored the code to suit my new workflow.

Many small improvement + new demo in progress.

.gitignore

@@ -1,3 +1,3 @@
-sass/demo.scss
-sass/gridder.scss
-nbproject/
+nbproject/
+.DS_Store
+node_modules

.jshintrc

@@ -0,0 +1,13 @@
+{
+	"boss": true,
+	"curly": true,
+	"eqeqeq": true,
+	"eqnull": true,
+	"expr": true,
+	"immed": true,
+	"noarg": true,
+	"onevar": true,
+	"quotmark": "double",
+	"unused": true,
+	"node": true
+}

Gruntfile.js

@@ -0,0 +1,93 @@
+module.exports = function(grunt) {
+
+	grunt.initConfig({
+
+		// Import package manifest
+		pkg: grunt.file.readJSON("package.json"),
+
+		// Banner definitions
+		meta: {
+			banner: "/*\n" +
+				" *  <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" +
+				" *  <%= pkg.description %>\n" +
+				" *  <%= pkg.homepage %>\n" +
+				" *\n" +
+				" *  Made by <%= pkg.author.name %>\n" +
+				" *  Under <%= pkg.license %> License\n" +
+				" */\n"
+		},
+
+		// Concat definitions
+		concat: {
+			options: {
+				banner: "<%= meta.banner %>"
+			},
+			dist: {
+				src: ["src/jquery.gridder.js"],
+				dest: "dist/js/jquery.gridder.js"
+			}
+		},
+
+		// Lint definitions
+		jshint: {
+			files: ["src/jquery.gridder.js"],
+			options: {
+				jshintrc: ".jshintrc"
+			}
+		},
+
+		// Minify definitions
+		uglify: {
+			my_target: {
+				src: ["dist/js/jquery.gridder.js"],
+				dest: "dist/js/jquery.gridder.min.js"
+			},
+			options: {
+				banner: "<%= meta.banner %>"
+			}
+		},
+
+		// CoffeeScript compilation
+		coffee: {
+			compile: {
+				files: {
+					"dist/js/jquery.gridder.js": "src/jquery.gridder.coffee"
+				}
+			}
+		},
+
+                // SASS
+                sass: {
+                    dist: {
+                        options: {
+                            style: 'compressed'
+                        },
+                        files: {
+                            'dist/css/jquery.gridder.min.css': 'scss/jquery.gridder.scss',
+                            'demo/css/demo.css': 'demo/scss/demo.scss'
+                        }
+                    }
+                },
+
+		// watch for changes to source
+		// Better than calling grunt a million times
+		// (call 'grunt watch')
+		watch: {
+		    files: ['src/*','scss/*','demo/scss/*'],
+		    tasks: ['default']
+		}
+
+	});
+
+	grunt.loadNpmTasks("grunt-contrib-concat");
+	grunt.loadNpmTasks("grunt-contrib-jshint");
+	grunt.loadNpmTasks("grunt-contrib-uglify");
+	grunt.loadNpmTasks("grunt-contrib-coffee");
+	grunt.loadNpmTasks("grunt-contrib-watch");
+        grunt.loadNpmTasks('grunt-contrib-sass');
+
+	grunt.registerTask("build", ["concat", "uglify"]);
+	grunt.registerTask("default", ["jshint", "build", "sass"]);
+	grunt.registerTask("travis", ["default"]);
+
+};

README.md

@@ -1,15 +1,12 @@
-Gridder V1
-=======
-
-Version : 1.3
+# jQuery GRIDDER
 
-A jquery plugin imitating the Google Images page behaviour.  
+### A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
 
-I'm creating this jQuery plugin as I was unable to find a similar one on internet. 
+We have all searched images on Google, so you probably noticed the interesting expanding preview when you click on a thumbnail. It’s a very nice effect and practical, allowing you quickly see more details without having to reload a new page. This plugin allows you to recreate a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link
 
-Please note that i'm very new to Jquery, so you may stumble on weird errors. But i'm more than willing to help if this occurs.
+Live demo GRIDDER v1.3.0 : http://www.oriongunning.com/demo/gridder/demo.html
 
-Live demo GRIDDER v1.3 : http://www.oriongunning.com/demo/gridder/demo.html
+## Please Note
 
 =======
 
@@ -30,60 +27,51 @@ Live demo GRIDDER v2 : http://www.oriongunning.com/demo/gridder/demo.html
 ### Coming soon ...
 - A new theme!
 
-## Get Started
-
-### Include
-```html
-<link href="css/gridder.css" rel="stylesheet">
-<script src="js/gridder.js"></script>
-```
-
-### The Markup
-```html
-<div class="gridder">
-
-	<!-- The bloc -->
-  	 <div class="gridder-list">
-		<div class="gridder-thumb">
-		    <img src="http://placehold.it/600x400" data-bigimage="http://placehold.it/600x400" />
-		    <span class="overlay">Title 2</span>
-		</div>
-		<div class="gridder-content">
-		   <!-- Any Content you want to show in the expanding panel -->
-		</div>
-	  </div>
-
-</div>
-```
-
-### Fire it up
-```javascript
-<script>
-$(function() {
-
-	// Call Gridder
-	$('.gridder').Gridder({
-        scrollOffset: 30,
-        scrollTo: 'panel', // panel or listitem
-        animationSpeed: 400,
-        animationEasing: "easeInOutExpo",
-        onStart: function(base){
-            console.log('Gridder Inititialized');
-        },
-        onExpanded: function(base){
-            console.log('Gridder Expanded');
-        },
-        onChanged: function(base){
-            console.log('Gridder Changed');
-        },
-        onClosed: function(base){
-            console.log('Gridder Closed');
-        }
-    });
-
-});
-</script>
-```
+=======
+
+## Usage
+
+1. Include jQuery:
+
+	```html
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+	```
+
+2. Include plugin's code:
+
+	```html
+	<script src="dist/jquery.gridder.min.js"></script>
+	```
+
+3. Call the plugin:
+
+        ```javascript
+        <script>
+        $(function() {
+
+                // Call Gridder
+                $('.gridder').Gridder({
+                scrollOffset: 30,
+                scrollTo: 'panel', // panel or listitem
+                animationSpeed: 400,
+                animationEasing: "easeInOutExpo",
+                onStart: function(base){
+                    console.log('Gridder Inititialized');
+                },
+                onExpanded: function(base){
+                    console.log('Gridder Expanded');
+                },
+                onChanged: function(base){
+                    console.log('Gridder Changed');
+                },
+                onClosed: function(base){
+                    console.log('Gridder Closed');
+                }
+            });
+
+        });
+        </script>
+        ```
 
 <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
 

bower.json

@@ -0,0 +1,18 @@
+{
+	"name": "jquery-gridder",
+	"version": "1.3.0",
+	"homepage": "http://www.oriongunning.com/blog/thumbnail-grid-expanding-preview/",
+	"authors": [
+		"Orion Gunning <orion.gunning@gmail.com>"
+	],
+	"description": "A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.",
+	"main": "src/jquery.gridder.js",
+	"keywords": [
+		"jquery",
+		"plugin",
+		"thumbnail",
+		"expanding",
+		"grid"
+	],
+	"license": "MIT"
+}

demo.html → demo/demo.html

@@ -4,8 +4,8 @@
     <head>
         <title></title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'> 
-        <link href="css/gridder.css" rel="stylesheet">
+        <link href="http://fonts.googleapis.com/css?family=Armata" rel="stylesheet" type="text/css"> 
+        <link href="../dist/css/jquery.gridder.min.css" rel="stylesheet">
         <link href="css/demo.css" rel="stylesheet">
     </head>
     <body>
@@ -517,26 +517,26 @@ <h2>With AJAX Demo</h2>
         </div>
 
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-        <script src="js/gridder.js"></script>
+        <script src="../dist/js/jquery.gridder.min.js"></script>
         <script>
             jQuery(function($) {
                 // Call Gridder
-                $('.gridder').gridderExpander({
+                $(".gridder").gridderExpander({
                     scrollOffset: 30,
-                    scrollTo: 'panel', // 'panel' or 'listitem'
+                    scrollTo: "panel", // "panel" or "listitem"
                     animationSpeed: 400,
                     animationEasing: "easeInOutExpo",
                     onStart: function(){
-                        console.log('Gridder Inititialized');
+                        console.log("Gridder Inititialized");
                     },
                     onExpanded: function(){
-                        console.log('Gridder Expanded');
+                        console.log("Gridder Expanded");
                     },
                     onChanged: function(){
-                        console.log('Gridder Changed');
+                        console.log("Gridder Changed");
                     },
                     onClosed: function(){
-                        console.log('Gridder Closed');
+                        console.log("Gridder Closed");
                     }
                 });
             });