diff --git a/.gitignore b/.gitignore
index 927e22e..0402acd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ isotope-site.zip
 components/
 bower_components/
 node_modules/
+sandbox/**/bundle.js
diff --git a/js/isotope.js b/js/isotope.js
index 72405c0..96d1d89 100644
--- a/js/isotope.js
+++ b/js/isotope.js
@@ -628,6 +628,7 @@ if ( typeof define === 'function' && define.amd ) {
     require('get-size'),
     require('desandro-matches-selector'),
     require('./item'),
+    require('./layout-mode'),
     // include default layout modes
     require('./layout-modes/masonry'),
     require('./layout-modes/fit-rows'),
diff --git a/package.json b/package.json
index 8047c6e..5a644e8 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "masonry-layout": "3.2.x"
   },
   "devDependencies": {
+    "desandro-matches-selector": "^1.0.2",
     "doc-ready": "1.x",
+    "eventie": "^1.0.5",
     "jquery": ">=1.4.3 <2",
     "jquery-bridget": "1.1.x",
     "qunitjs": "^1.15",
diff --git a/sandbox/browserify/browserify.html b/sandbox/browserify/browserify.html
new file mode 100644
index 0000000..9365b55
--- /dev/null
+++ b/sandbox/browserify/browserify.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Browserify</title>
+
+  <link rel="stylesheet" href="../sandbox.css" />
+
+</head>
+<body>
+
+  <h1>Browserify</h1>
+
+<div id="options">
+  <h2>Filter</h2>
+  <div class="option-set" data-isotope-key="filter">
+    <button data-isotope-value="*">show all</button>
+    <button data-isotope-value=".metal">metal</button>
+    <button data-isotope-value=".post-transition">post-transition</button>
+    <button data-isotope-value="number-greater-than-50">number > 50</button>
+  </div>
+  <h2>Sort</h2>
+  <div class="option-set" data-isotope-key="sortBy">
+    <button data-isotope-value="original-order">original-order</button>
+    <button data-isotope-value="number">number</button>
+    <button data-isotope-value="name">name</button>
+    <button data-isotope-value="symbol">symbol</button>
+    <button data-isotope-value="weight">weight</button>
+    <button data-isotope-value="category">category</button>
+  </div>
+</div>
+
+<div id="container">
+  
+  <div class="element transition metal   " data-symbol="Hg" data-category="transition">
+    <p class="number">80</p>
+    <h3 class="symbol">Hg</h3>
+    <h2 class="name">Mercury</h2>
+    <p class="weight">200.59</p>
+  </div>
+
+  <div class="element metalloid   " data-symbol="Te" data-category="metalloid">
+    <p class="number">52</p>
+    <h3 class="symbol">Te</h3>
+    <h2 class="name">Tellurium</h2>
+    <p class="weight">127.6</p>
+  </div>
+
+  <div class="element post-transition metal   " data-symbol="Bi" data-category="post-transition">
+    <p class="number">83</p>
+    <h3 class="symbol">Bi</h3>
+    <h2 class="name">Bismuth</h2>
+    <p class="weight">208.9804</p>
+  </div>
+
+  <div class="element transition metal   " data-symbol="Cd" data-category="transition">
+    <p class="number">48</p>
+    <h3 class="symbol">Cd</h3>
+    <h2 class="name">Cadmium</h2>
+    <p class="weight">112.411</p>
+  </div>
+
+  <div class="element alkaline-earth metal   " data-symbol="Ca" data-category="alkaline-earth">
+    <p class="number">20</p>
+    <h3 class="symbol">Ca</h3>
+    <h2 class="name">Calcium</h2>
+    <p class="weight">40.078</p>
+  </div>
+
+  <div class="element transition metal   " data-symbol="Re" data-category="transition">
+    <p class="number">75</p>
+    <h3 class="symbol">Re</h3>
+    <h2 class="name">Rhenium</h2>
+    <p class="weight">186.207</p>
+  </div>
+
+  <div class="element post-transition metal   " data-symbol="Tl" data-category="post-transition">
+    <p class="number">81</p>
+    <h3 class="symbol">Tl</h3>
+    <h2 class="name">Thallium</h2>
+    <p class="weight">204.3833</p>
+  </div>
+
+  <div class="element metalloid   " data-symbol="Sb" data-category="metalloid">
+    <p class="number">51</p>
+    <h3 class="symbol">Sb</h3>
+    <h2 class="name">Antimony</h2>
+    <p class="weight">121.76</p>
+  </div>
+
+  <div class="element transition metal   " data-symbol="Co" data-category="transition">
+    <p class="number">27</p>
+    <h3 class="symbol">Co</h3>
+    <h2 class="name">Cobalt</h2>
+    <p class="weight">58.933195</p>
+  </div>
+
+  <div class="element lanthanoid metal inner-transition   " data-symbol="Lu" data-category="lanthanoid">
+    <p class="number">71</p>
+    <h3 class="symbol">Lu</h3>
+    <h2 class="name">Lutetium</h2>
+    <p class="weight">174.9668</p>
+  </div>
+
+  <div class="element noble-gas nonmetal   " data-symbol="Ar" data-category="noble-gas">
+    <p class="number">18</p>
+    <h3 class="symbol">Ar</h3>
+    <h2 class="name">Argon</h2>
+    <p class="weight">39.948</p>
+  </div>
+
+  <div class="element alkali metal   " data-symbol="Rb" data-category="alkali">
+    <p class="number">37</p>
+    <h3 class="symbol">Rb</h3>
+    <h2 class="name">Rubidium</h2>
+    <p class="weight">85.4678</p>
+  </div>
+
+  <div class="element other nonmetal   " data-symbol="N" data-category="other">
+    <p class="number">7</p>
+    <h3 class="symbol">N</h3>
+    <h2 class="name">Nitrogen</h2>
+    <p class="weight">14.0067</p>
+  </div>
+
+  <div class="element actinoid metal inner-transition   " data-symbol="Np" data-category="actinoid">
+    <p class="number">93</p>
+    <h3 class="symbol">Np</h3>
+    <h2 class="name">Neptunium</h2>
+    <p class="weight">(237)</p>
+  </div>
+
+  <div class="element actinoid metal inner-transition   " data-symbol="Ac" data-category="actinoid">
+    <p class="number">89</p>
+    <h3 class="symbol">Ac</h3>
+    <h2 class="name">Actinium</h2>
+    <p class="weight">(227)</p>
+  </div>
+</div>
+
+<script src="bundle.js"></script>
+
+</body>
+</html>
diff --git a/sandbox/browserify/main.js b/sandbox/browserify/main.js
new file mode 100644
index 0000000..52fb520
--- /dev/null
+++ b/sandbox/browserify/main.js
@@ -0,0 +1,47 @@
+var Isotope = window.Isotope = require('../../js/isotope');
+var eventie = require('eventie');
+var matchesSelector = require('desandro-matches-selector');
+
+function getText( elem ) {
+  return elem.textContent || elem.innerText;
+}
+
+var iso = window.iso = new Isotope( '#container', {
+  layoutMode: 'fitRows',
+  transitionDuration: '0.8s',
+  cellsByRow: {
+    columnWidth: 130,
+    rowHeight: 140
+  },
+  getSortData: {
+    number: '.number parseInt',
+    symbol: '.symbol',
+    name: '.name',
+    category: '[data-category]',
+    weight: function( itemElem ) {
+      // remove parenthesis
+      return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') );
+    }
+  }
+});
+
+var options = document.querySelector('#options');
+
+eventie.bind( options, 'click', function( event ) {
+  if ( !matchesSelector( event.target, 'button' ) ) {
+    return;
+  }
+
+  var key = event.target.parentNode.getAttribute('data-isotope-key');
+  var value = event.target.getAttribute('data-isotope-value');
+
+  if ( key === 'filter' && value === 'number-greater-than-50' ) {
+    value = function( elem ) {
+      var numberText = getText( elem.querySelector('.number') );
+      return parseInt( numberText, 10 ) > 40;
+    };
+  }
+  console.log( key, value );
+  iso.options[ key ] = value;
+  iso.arrange();
+});
