Updated the example project to include the base browserify project.

.gitignore

@@ -1 +1,4 @@
 node_modules
+dist
+bower_components
+.sass-cache

Gruntfile.js

@@ -1,27 +1,45 @@
 module.exports = function(grunt){
   grunt.initConfig({
-    package: grunt.file.readJSON('package.json'),
-    // task
+    package: grunt.file.readJSON('package.json'),    // task
     sass: {
       // target
-      theme:
+      theme:{
         options:{
           // note* requires SASS >=3.3.0 `gem install sass --pre`
           sourcemap: true
         },
         // files
         files: [{
-          dest: 'dist/css/awesome-theme.css'
+          dest: 'dist/css/awesome-theme.css',
           src: 'scss/main.scss'
         }]
+      }
+    },
+    autoprefixer:{
+      theme: {
+        options:{
+          map: true
+        },
+        src: '<%= sass.theme.files[0].dest %>' // can leave the dest off
+      }
+    },
+    browserify: {
+      themejs: {
+        dest: './dist/js/awesome-theme.pkg.js',
+        src: './src/index.js'
+      }
     }
   });
 
   grunt.loadNpmTasks('grunt-contrib-sass');
-
+  grunt.loadNpmTasks('grunt-autoprefixer');
+  grunt.loadNpmTasks('grunt-browserify');
   grunt.registerTask(
     'default',
-    'Compile SASS',
-    ['sass:theme']
+    'Compile SASS and autoprefix the css',
+    [
+      'sass:theme',
+      'autoprefixer:theme'
+    ]
   );
 };

package.json

@@ -14,7 +14,20 @@
   "author": "Steven Bassett <[email protected]>",
   "license": "BSD-2",
   "devDependencies": {
-    "grunt": "~0.4.5",
-    "grunt-contrib-sass": "0.7.3"
+    "grunt": "^0.4.5",
+    "grunt-contrib-sass": "0.7.3",
+    "browserify": "^4.1.6",
+    "grunt-browserify": "^2.1.0",
+    "grunt-autoprefixer": "^0.7.3",
+    "browserify-shim": "^3.5.0"
+  },
+  "browserify-shim": {
+    "jquery": "global:jQuery",
+    "drupal": "global:Drupal"
+  },
+  "browserify": {
+    "transform": [
+      "browserify-shim"
+    ]
   }
 }

scss/library/_variables.scss

@@ -0,0 +1 @@
+$basecolor: rbg(44, 44, 44);

scss/main.scss

@@ -0,0 +1,5 @@
+@import 'library/variables';
+
+html{
+  color: $basecolor;
+}

src/expand.js

@@ -0,0 +1,12 @@
+module.exports = function($){
+  return $('[data-toggle="expand"]').on('click', function(){
+    var $this  = $(this),
+    $target = $($this.data('target'));
+    if( $target.hasClass('in') ){
+      $target.removeClass('in')
+    }else{
+      $('.expand.in').removeClass('in');
+      $this.addClass('in');
+    }
+  });
+}

src/index.js

@@ -3,10 +3,12 @@
  * main JS file for awesome theme
  *
  */
-(function($){
-  var Drupal = window.Drupal || {behaviours: function(settings){}};
+'use strict';
 
-  Drupal.behaviours.attach( settings ){
+var $ = require('jquery'); // just refers to window.jQuery for this.
 
-  };
-})(jQuery)
+var expand = require('./expand.js');
+
+$(function(){
+  expand($); //Call the small module
+});