Isotope, Packery, Masonry, Draggabilly, and imagesLoaded all got big upgrades in the past weeks, adding npm and Browserify support. Now using these libraries with Browserify is as simple as a couple lines of code:

npm install isotope-layout

var Isotope = require('isotope-layout');

var iso = new Isotope( '#container', {
  // options...
});

Look over the specific docs for more details for each library.

• Isotope Browserify, isotope-layout on npm
• Packery Browserify, packery on npm
• Masonry Browserify, masonry-layout on npm

Getting Browserify support meant adding CommonJS export to the libraries, and all to all their dependencies. I used the UMD spec, which has exports to support AMD, CommonJS, and browser globals. Here's Masonry's exports:

if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( [
      'outlayer/outlayer',
      'get-size/get-size'
    ],
    masonryDefinition );
} else if ( typeof exports === 'object' ) {
  // CommonJS
  module.exports = masonryDefinition(
    require('outlayer'),
    require('get-size')
  );
} else {
  // browser global
  window.Masonry = masonryDefinition(
    window.Outlayer,
    window.getSize
  );
}

Adding CommonJS support is a simple task, but getting it done required updating all those dependency libraries. So much code wrangling.

• get-style-property
• get-size
• eventie
• doc-ready
• jquery-bridget
• matches-selector
• Outlayer
• classie
• isotope-cells-by-column
• isotope-cells-by-row
• isotope-fit-columns
• isotope-masonry-horizontal
• isotope-packery
• isotope-horizontal

They're all up on npm and ready for Browserifying. Have at it!