config redirect

node_modules/packery/.github/contributing.md

@@ -0,0 +1,24 @@
+## Submitting issues
+
+### Reduced test case required
+
+All bug reports and problem issues require a [**reduced test case**](http://css-tricks.com/reduced-test-cases/). Create one by forking any one of the [CodePen examples](http://codepen.io/desandro/pens/tags/?grid_type=list&selected_tag=packery-docs) from [the docs](http://packery.metafizzy.co).
+
+**CodePens**
+
++ [Basic layout](http://codepen.io/desandro/pen/QyrEgX)
++ [Fluid layout](http://codepen.io/desandro/pen/xZjOXq)
++ [Images](http://codepen.io/desandro/pen/pgVbLv)
++ [Draggable](http://codepen.io/desandro/pen/aGvIq)
+
+**Test cases**
+
++ A reduced test case clearly demonstrates the bug or issue.
++ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
++ A link to your production site is **not** a reduced test case.
+
+Providing a reduced test case is the best way to get your issue addressed. Without a reduced test case, your issue may be closed.
+
+## Pull requests
+
+Contributions are welcome! Please note: your code may be used as part of a commercial product if merged. Be clear about what license applies to your patch. [The MIT license](http://choosealicense.com/licenses/mit/) or [public domain unlicense](http://choosealicense.com/licenses/unlicense/) are permissive, and allow integration of your patch into Packery as part of a commercial product.

node_modules/packery/.github/issue_template.md

@@ -0,0 +1,3 @@
+<!-- Thanks for submitting an issue! All bug reports and problem issues require a **reduced test case**. Create one by forking any one of the CodePen examples from the docs. See guidelines link above. -->
+
+**Test case:** http://codepen.io/desandro/pen/QyrEgX

node_modules/packery/.jshintrc

@@ -0,0 +1,10 @@
+{
+  "browser": true,
+  "devel": false,
+  "strict": true,
+  "undef": true,
+  "unused": true,
+  "globals": {
+    "Packery": true
+  }
+}

node_modules/packery/README.md

@@ -0,0 +1,84 @@
+# Packery
+
+_Bin-packing layout library_
+
+See [packery.metafizzy.co](http://packery.metafizzy.co) for complete docs and demos
+
+## Install
+
+### Download
+
++ [packery.pkgd.js](https://unpkg.com/packery@2.1/dist/packery.pkgd.js) un-minified, or
++ [packery.pkgd.min.js](https://unpkg.com/packery@2.1/dist/packery.pkgd.min.js) minified
+
+### CDN
+
+Link directly to Packery files on [unpkg](https://unpkg.com).
+
+``` html
+<script src="https://unpkg.com/packery@2.1/dist/packery.pkgd.js"></script>
+<!-- or -->
+<script src="https://unpkg.com/packery@2.1/dist/packery.pkgd.min.js"></script>
+```
+
+### Package managers
+
+Bower: `bower install packery --save`
+
+[npm](https://www.npmjs.com/package/packery): `npm install packery --save`
+
+## License
+
+### Commercial license
+
+If you want to use Packery to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a Packery Commercial License at [packery.metafizzy.co](http://packery.metafizzy.co/#commercial-license)
+
+### Open source license
+
+If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use Packery under the terms of the GPLv3.
+
+[Read more about Packery's license](http://packery.metafizzy.co/packery.html).
+
+## Initialize
+
+With jQuery
+
+``` js
+$('.grid').packery({
+  // options...
+  itemSelector: '.grid-item'
+});
+```
+
+With vanilla JavaScript
+
+``` js
+// vanilla JS
+var grid = document.querySelector('.grid');
+// initialize with element
+var pckry = new Packery( grid, {
+  // options...
+  itemSelector: '.grid-item'
+});
+
+// initialize with selector string
+var pckry = new Packery('.grid', {
+  // options...
+});
+```
+
+With HTML
+
+Add a `data-packery` attribute to your element. Options can be set in JSON in the value.
+
+``` html
+<div class="grid" data-packery='{ "itemSelector": ".grid-item" }'>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+  ...
+</div>
+```
+
+---
+
+By [Metafizzy](http://metafizzy.co)

node_modules/packery/bower.json

@@ -0,0 +1,43 @@
+{
+  "name": "packery",
+  "author": "David DeSandro",
+  "description": "Gapless, draggable grid layouts",
+  "main": "js/packery.js",
+  "dependencies": {
+    "get-size": "^2.0.2",
+    "outlayer": "^2.0.0"
+  },
+  "devDependencies": {
+    "draggabilly": "^2.1.0",
+    "jquery": ">=2 <4",
+    "jquery-ui-draggable": "https://gist.github.com/4985610.git",
+    "jquery-bridget": "~2.0.0",
+    "qunit": "^1.15"
+  },
+  "ignore": [
+    "**/.*",
+    "contributing.md",
+    "package.json",
+    "gulpfile.js",
+    "sandbox/",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "homepage": "http://packery.metafizzy.co",
+  "authors": [
+    "David DeSandro <desandrocodes@gmail.com>"
+  ],
+  "moduleType": [
+    "amd",
+    "globals",
+    "node"
+  ],
+  "keywords": [
+    "layout",
+    "grid",
+    "draggable"
+  ],
+  "license": "GPL-3.0"
+}

node_modules/packery/gulpfile.js

@@ -0,0 +1,142 @@
+/*jshint node: true, strict: false */
+
+var fs = require('fs');
+var gulp = require('gulp');
+var rename = require('gulp-rename');
+var replace = require('gulp-replace');
+
+// ----- hint ----- //
+
+var jshint = require('gulp-jshint');
+
+gulp.task( 'hint-js', function() {
+  return gulp.src('js/*.js')
+    .pipe( jshint() )
+    .pipe( jshint.reporter('default') );
+});
+
+gulp.task( 'hint-test', function() {
+  return gulp.src('test/unit/*.js')
+    .pipe( jshint() )
+    .pipe( jshint.reporter('default') );
+});
+
+gulp.task( 'hint-task', function() {
+  return gulp.src('gulpfile.js')
+    .pipe( jshint() )
+    .pipe( jshint.reporter('default') );
+});
+
+var jsonlint = require('gulp-json-lint');
+
+gulp.task( 'jsonlint', function() {
+  return gulp.src( '*.json' )
+    .pipe( jsonlint() )
+    .pipe( jsonlint.report('verbose') );
+});
+
+gulp.task( 'hint', [ 'hint-js', 'hint-test', 'hint-task', 'jsonlint' ]);
+
+// -------------------------- make pkgd -------------------------- //
+
+// regex for banner comment
+var reBannerComment = new RegExp('^\\s*(?:\\/\\*[\\s\\S]*?\\*\\/)\\s*');
+
+function getBanner() {
+  var src = fs.readFileSync( 'js/packery.js', 'utf8' );
+  var matches = src.match( reBannerComment );
+  var banner = matches[0].replace( 'Packery', 'Packery PACKAGED' );
+  return banner;
+}
+
+function addBanner( str ) {
+  return replace( /^/, str );
+}
+
+var rjsOptimize = require('gulp-requirejs-optimize');
+
+gulp.task( 'requirejs', function() {
+  var definitionRE = /define\(\s*'packery\/packery'(.|\n)+factory\s*\)/;
+  var banner = getBanner();
+  // HACK src is not needed
+  // should refactor rjsOptimize to produce src
+  return gulp.src('js/packery.js')
+    .pipe( rjsOptimize({
+      baseUrl: 'bower_components',
+      optimize: 'none',
+      include: [
+        'jquery-bridget/jquery-bridget',
+        'packery/packery'
+      ],
+      paths: {
+        packery: '../js/',
+        jquery: 'empty:'
+      }
+    }) )
+    // munge AMD definition
+    .pipe( replace( definitionRE, function( definition ) {
+      // remove named module
+      return definition.replace( "'packery/packery',", '' )
+        // use explicit file paths, './rect' -> 'packery/rect'
+        .replace( /'.\//g, "'packery/js/" );
+    }) )
+    .pipe( replace( "define( 'packery/", "define( 'packery/js/" ) )
+    // add banner
+    .pipe( addBanner( banner ) )
+    .pipe( rename('packery.pkgd.js') )
+    .pipe( gulp.dest('dist') );
+});
+
+
+// ----- uglify ----- //
+
+var uglify = require('gulp-uglify');
+
+gulp.task( 'uglify', [ 'requirejs' ], function() {
+  var banner = getBanner();
+  gulp.src('dist/packery.pkgd.js')
+    .pipe( uglify() )
+    // add banner
+    .pipe( addBanner( banner ) )
+    .pipe( rename('packery.pkgd.min.js') )
+    .pipe( gulp.dest('dist') );
+});
+
+// ----- version ----- //
+
+// set version in source files
+
+var minimist = require('minimist');
+var gutil = require('gulp-util');
+var chalk = require('chalk');
+
+// use gulp version -t 1.2.3
+gulp.task( 'version', function() {
+  var args = minimist( process.argv.slice(3) );
+  var version = args.t;
+  if ( !version || !/^\d\.\d+\.\d+/.test( version ) ) {
+    gutil.log( 'invalid version: ' + chalk.red( version ) );
+    return;
+  }
+  gutil.log( 'ticking version to ' + chalk.green( version ) );
+
+  gulp.src('js/packery.js')
+    .pipe( replace( /Packery v\d\.\d+\.\d+/, 'Packery v' + version ) )
+    .pipe( gulp.dest('js') );
+
+  gulp.src( [ 'package.json' ] )
+    .pipe( replace( /"version": "\d\.\d+\.\d+"/, '"version": "' + version + '"' ) )
+    .pipe( gulp.dest('.') );
+  // replace CDN links in README
+  var minorVersion = version.match( /^\d\.\d+/ )[0];
+  gulp.src('README.md')
+    .pipe( replace( /packery@\d\.\d+/g, 'packery@' + minorVersion ))
+    .pipe( gulp.dest('.') );
+});
+
+// ----- default ----- //
+
+gulp.task( 'default', [
+  'hint',
+  'uglify'
+]);

node_modules/packery/js/item.js

@@ -0,0 +1,133 @@
+/**
+ * Packery Item Element
+**/
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( [
+        'outlayer/outlayer',
+        './rect'
+      ],
+      factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('outlayer'),
+      require('./rect')
+    );
+  } else {
+    // browser global
+    window.Packery.Item = factory(
+      window.Outlayer,
+      window.Packery.Rect
+    );
+  }
+
+}( window, function factory( Outlayer, Rect ) {
+'use strict';
+
+// -------------------------- Item -------------------------- //
+
+var docElemStyle = document.documentElement.style;
+
+var transformProperty = typeof docElemStyle.transform == 'string' ?
+  'transform' : 'WebkitTransform';
+
+// sub-class Item
+var Item = function PackeryItem() {
+  Outlayer.Item.apply( this, arguments );
+};
+
+var proto = Item.prototype = Object.create( Outlayer.Item.prototype );
+
+var __create = proto._create;
+proto._create = function() {
+  // call default _create logic
+  __create.call( this );
+  this.rect = new Rect();
+};
+
+var _moveTo = proto.moveTo;
+proto.moveTo = function( x, y ) {
+  // don't shift 1px while dragging
+  var dx = Math.abs( this.position.x - x );
+  var dy = Math.abs( this.position.y - y );
+
+  var canHackGoTo = this.layout.dragItemCount && !this.isPlacing &&
+    !this.isTransitioning && dx < 1 && dy < 1;
+  if ( canHackGoTo ) {
+    this.goTo( x, y );
+    return;
+  }
+  _moveTo.apply( this, arguments );
+};
+
+// -------------------------- placing -------------------------- //
+
+proto.enablePlacing = function() {
+  this.removeTransitionStyles();
+  // remove transform property from transition
+  if ( this.isTransitioning && transformProperty ) {
+    this.element.style[ transformProperty ] = 'none';
+  }
+  this.isTransitioning = false;
+  this.getSize();
+  this.layout._setRectSize( this.element, this.rect );
+  this.isPlacing = true;
+};
+
+proto.disablePlacing = function() {
+  this.isPlacing = false;
+};
+
+// -----  ----- //
+
+// remove element from DOM
+proto.removeElem = function() {
+  var parent = this.element.parentNode;
+  if ( parent ) {
+    parent.removeChild( this.element );
+  }
+  // add space back to packer
+  this.layout.packer.addSpace( this.rect );
+  this.emitEvent( 'remove', [ this ] );
+};
+
+// ----- dropPlaceholder ----- //
+
+proto.showDropPlaceholder = function() {
+  var dropPlaceholder = this.dropPlaceholder;
+  if ( !dropPlaceholder ) {
+    // create dropPlaceholder
+    dropPlaceholder = this.dropPlaceholder = document.createElement('div');
+    dropPlaceholder.className = 'packery-drop-placeholder';
+    dropPlaceholder.style.position = 'absolute';
+  }
+
+  dropPlaceholder.style.width = this.size.width + 'px';
+  dropPlaceholder.style.height = this.size.height + 'px';
+  this.positionDropPlaceholder();
+  this.layout.element.appendChild( dropPlaceholder );
+};
+
+proto.positionDropPlaceholder = function() {
+  this.dropPlaceholder.style[ transformProperty ] = 'translate(' +
+    this.rect.x + 'px, ' + this.rect.y + 'px)';
+};
+
+proto.hideDropPlaceholder = function() {
+  // only remove once, #333
+  var parent = this.dropPlaceholder.parentNode;
+  if ( parent ) {
+    parent.removeChild( this.dropPlaceholder );
+  }
+};
+
+// -----  ----- //
+
+return Item;
+
+}));

node_modules/packery/js/packer.js

@@ -0,0 +1,197 @@
+/**
+ * Packer
+ * bin-packing algorithm
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( [ './rect' ], factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('./rect')
+    );
+  } else {
+    // browser global
+    var Packery = window.Packery = window.Packery || {};
+    Packery.Packer = factory( Packery.Rect );
+  }
+
+}( window, function factory( Rect ) {
+'use strict';
+
+// -------------------------- Packer -------------------------- //
+
+/**
+ * @param {Number} width
+ * @param {Number} height
+ * @param {String} sortDirection
+ *   topLeft for vertical, leftTop for horizontal
+ */
+function Packer( width, height, sortDirection ) {
+  this.width = width || 0;
+  this.height = height || 0;
+  this.sortDirection = sortDirection || 'downwardLeftToRight';
+
+  this.reset();
+}
+
+var proto = Packer.prototype;
+
+proto.reset = function() {
+  this.spaces = [];
+
+  var initialSpace = new Rect({
+    x: 0,
+    y: 0,
+    width: this.width,
+    height: this.height
+  });
+
+  this.spaces.push( initialSpace );
+  // set sorter
+  this.sorter = sorters[ this.sortDirection ] || sorters.downwardLeftToRight;
+};
+
+// change x and y of rect to fit with in Packer's available spaces
+proto.pack = function( rect ) {
+  for ( var i=0; i < this.spaces.length; i++ ) {
+    var space = this.spaces[i];
+    if ( space.canFit( rect ) ) {
+      this.placeInSpace( rect, space );
+      break;
+    }
+  }
+};
+
+proto.columnPack = function( rect ) {
+  for ( var i=0; i < this.spaces.length; i++ ) {
+    var space = this.spaces[i];
+    var canFitInSpaceColumn = space.x <= rect.x &&
+      space.x + space.width >= rect.x + rect.width &&
+      space.height >= rect.height - 0.01; // fudge number for rounding error
+    if ( canFitInSpaceColumn ) {
+      rect.y = space.y;
+      this.placed( rect );
+      break;
+    }
+  }
+};
+
+proto.rowPack = function( rect ) {
+  for ( var i=0; i < this.spaces.length; i++ ) {
+    var space = this.spaces[i];
+    var canFitInSpaceRow = space.y <= rect.y &&
+      space.y + space.height >= rect.y + rect.height &&
+      space.width >= rect.width - 0.01; // fudge number for rounding error
+    if ( canFitInSpaceRow ) {
+      rect.x = space.x;
+      this.placed( rect );
+      break;
+    }
+  }
+};
+
+proto.placeInSpace = function( rect, space ) {
+  // place rect in space
+  rect.x = space.x;
+  rect.y = space.y;
+
+  this.placed( rect );
+};
+
+// update spaces with placed rect
+proto.placed = function( rect ) {
+  // update spaces
+  var revisedSpaces = [];
+  for ( var i=0; i < this.spaces.length; i++ ) {
+    var space = this.spaces[i];
+    var newSpaces = space.getMaximalFreeRects( rect );
+    // add either the original space or the new spaces to the revised spaces
+    if ( newSpaces ) {
+      revisedSpaces.push.apply( revisedSpaces, newSpaces );
+    } else {
+      revisedSpaces.push( space );
+    }
+  }
+
+  this.spaces = revisedSpaces;
+
+  this.mergeSortSpaces();
+};
+
+proto.mergeSortSpaces = function() {
+  // remove redundant spaces
+  Packer.mergeRects( this.spaces );
+  this.spaces.sort( this.sorter );
+};
+
+// add a space back
+proto.addSpace = function( rect ) {
+  this.spaces.push( rect );
+  this.mergeSortSpaces();
+};
+
+// -------------------------- utility functions -------------------------- //
+
+/**
+ * Remove redundant rectangle from array of rectangles
+ * @param {Array} rects: an array of Rects
+ * @returns {Array} rects: an array of Rects
+**/
+Packer.mergeRects = function( rects ) {
+  var i = 0;
+  var rect = rects[i];
+
+  rectLoop:
+  while ( rect ) {
+    var j = 0;
+    var compareRect = rects[ i + j ];
+
+    while ( compareRect ) {
+      if  ( compareRect == rect ) {
+        j++; // next
+      } else if ( compareRect.contains( rect ) ) {
+        // remove rect
+        rects.splice( i, 1 );
+        rect = rects[i]; // set next rect
+        continue rectLoop; // bail on compareLoop
+      } else if ( rect.contains( compareRect ) ) {
+        // remove compareRect
+        rects.splice( i + j, 1 );
+      } else {
+        j++;
+      }
+      compareRect = rects[ i + j ]; // set next compareRect
+    }
+    i++;
+    rect = rects[i];
+  }
+
+  return rects;
+};
+
+
+// -------------------------- sorters -------------------------- //
+
+// functions for sorting rects in order
+var sorters = {
+  // top down, then left to right
+  downwardLeftToRight: function( a, b ) {
+    return a.y - b.y || a.x - b.x;
+  },
+  // left to right, then top down
+  rightwardTopToBottom: function( a, b ) {
+    return a.x - b.x || a.y - b.y;
+  }
+};
+
+
+// --------------------------  -------------------------- //
+
+return Packer;
+
+}));

node_modules/packery/js/packery.js

@@ -0,0 +1,668 @@
+/*!
+ * Packery v2.1.2
+ * Gapless, draggable grid layouts
+ *
+ * Licensed GPLv3 for open source use
+ * or Packery Commercial License for commercial use
+ *
+ * http://packery.metafizzy.co
+ * Copyright 2013-2018 Metafizzy
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( [
+        'get-size/get-size',
+        'outlayer/outlayer',
+        './rect',
+        './packer',
+        './item'
+      ],
+      factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('get-size'),
+      require('outlayer'),
+      require('./rect'),
+      require('./packer'),
+      require('./item')
+    );
+  } else {
+    // browser global
+    window.Packery = factory(
+      window.getSize,
+      window.Outlayer,
+      window.Packery.Rect,
+      window.Packery.Packer,
+      window.Packery.Item
+    );
+  }
+
+}( window, function factory( getSize, Outlayer, Rect, Packer, Item ) {
+'use strict';
+
+// ----- Rect ----- //
+
+// allow for pixel rounding errors IE8-IE11 & Firefox; #227
+Rect.prototype.canFit = function( rect ) {
+  return this.width >= rect.width - 1 && this.height >= rect.height - 1;
+};
+
+// -------------------------- Packery -------------------------- //
+
+// create an Outlayer layout class
+var Packery = Outlayer.create('packery');
+Packery.Item = Item;
+
+var proto = Packery.prototype;
+
+proto._create = function() {
+  // call super
+  Outlayer.prototype._create.call( this );
+
+  // initial properties
+  this.packer = new Packer();
+  // packer for drop targets
+  this.shiftPacker = new Packer();
+  this.isEnabled = true;
+
+  this.dragItemCount = 0;
+
+  // create drag handlers
+  var _this = this;
+  this.handleDraggabilly = {
+    dragStart: function() {
+      _this.itemDragStart( this.element );
+    },
+    dragMove: function() {
+      _this.itemDragMove( this.element, this.position.x, this.position.y );
+    },
+    dragEnd: function() {
+      _this.itemDragEnd( this.element );
+    }
+  };
+
+  this.handleUIDraggable = {
+    start: function handleUIDraggableStart( event, ui ) {
+      // HTML5 may trigger dragstart, dismiss HTML5 dragging
+      if ( !ui ) {
+        return;
+      }
+      _this.itemDragStart( event.currentTarget );
+    },
+    drag: function handleUIDraggableDrag( event, ui ) {
+      if ( !ui ) {
+        return;
+      }
+      _this.itemDragMove( event.currentTarget, ui.position.left, ui.position.top );
+    },
+    stop: function handleUIDraggableStop( event, ui ) {
+      if ( !ui ) {
+        return;
+      }
+      _this.itemDragEnd( event.currentTarget );
+    }
+  };
+
+};
+
+
+// ----- init & layout ----- //
+
+/**
+ * logic before any new layout
+ */
+proto._resetLayout = function() {
+  this.getSize();
+
+  this._getMeasurements();
+
+  // reset packer
+  var width, height, sortDirection;
+  // packer settings, if horizontal or vertical
+  if ( this._getOption('horizontal') ) {
+    width = Infinity;
+    height = this.size.innerHeight + this.gutter;
+    sortDirection = 'rightwardTopToBottom';
+  } else {
+    width = this.size.innerWidth + this.gutter;
+    height = Infinity;
+    sortDirection = 'downwardLeftToRight';
+  }
+
+  this.packer.width = this.shiftPacker.width = width;
+  this.packer.height = this.shiftPacker.height = height;
+  this.packer.sortDirection = this.shiftPacker.sortDirection = sortDirection;
+
+  this.packer.reset();
+
+  // layout
+  this.maxY = 0;
+  this.maxX = 0;
+};
+
+/**
+ * update columnWidth, rowHeight, & gutter
+ * @private
+ */
+proto._getMeasurements = function() {
+  this._getMeasurement( 'columnWidth', 'width' );
+  this._getMeasurement( 'rowHeight', 'height' );
+  this._getMeasurement( 'gutter', 'width' );
+};
+
+proto._getItemLayoutPosition = function( item ) {
+  this._setRectSize( item.element, item.rect );
+  if ( this.isShifting || this.dragItemCount > 0 ) {
+    var packMethod = this._getPackMethod();
+    this.packer[ packMethod ]( item.rect );
+  } else {
+    this.packer.pack( item.rect );
+  }
+
+  this._setMaxXY( item.rect );
+  return item.rect;
+};
+
+proto.shiftLayout = function() {
+  this.isShifting = true;
+  this.layout();
+  delete this.isShifting;
+};
+
+proto._getPackMethod = function() {
+  return this._getOption('horizontal') ? 'rowPack' : 'columnPack';
+};
+
+
+/**
+ * set max X and Y value, for size of container
+ * @param {Packery.Rect} rect
+ * @private
+ */
+proto._setMaxXY = function( rect ) {
+  this.maxX = Math.max( rect.x + rect.width, this.maxX );
+  this.maxY = Math.max( rect.y + rect.height, this.maxY );
+};
+
+/**
+ * set the width and height of a rect, applying columnWidth and rowHeight
+ * @param {Element} elem
+ * @param {Packery.Rect} rect
+ */
+proto._setRectSize = function( elem, rect ) {
+  var size = getSize( elem );
+  var w = size.outerWidth;
+  var h = size.outerHeight;
+  // size for columnWidth and rowHeight, if available
+  // only check if size is non-zero, #177
+  if ( w || h ) {
+    w = this._applyGridGutter( w, this.columnWidth );
+    h = this._applyGridGutter( h, this.rowHeight );
+  }
+  // rect must fit in packer
+  rect.width = Math.min( w, this.packer.width );
+  rect.height = Math.min( h, this.packer.height );
+};
+
+/**
+ * fits item to columnWidth/rowHeight and adds gutter
+ * @param {Number} measurement - item width or height
+ * @param {Number} gridSize - columnWidth or rowHeight
+ * @returns measurement
+ */
+proto._applyGridGutter = function( measurement, gridSize ) {
+  // just add gutter if no gridSize
+  if ( !gridSize ) {
+    return measurement + this.gutter;
+  }
+  gridSize += this.gutter;
+  // fit item to columnWidth/rowHeight
+  var remainder = measurement % gridSize;
+  var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
+  measurement = Math[ mathMethod ]( measurement / gridSize ) * gridSize;
+  return measurement;
+};
+
+proto._getContainerSize = function() {
+  if ( this._getOption('horizontal') ) {
+    return {
+      width: this.maxX - this.gutter
+    };
+  } else {
+    return {
+      height: this.maxY - this.gutter
+    };
+  }
+};
+
+
+// -------------------------- stamp -------------------------- //
+
+/**
+ * makes space for element
+ * @param {Element} elem
+ */
+proto._manageStamp = function( elem ) {
+
+  var item = this.getItem( elem );
+  var rect;
+  if ( item && item.isPlacing ) {
+    rect = item.rect;
+  } else {
+    var offset = this._getElementOffset( elem );
+    rect = new Rect({
+      x: this._getOption('originLeft') ? offset.left : offset.right,
+      y: this._getOption('originTop') ? offset.top : offset.bottom
+    });
+  }
+
+  this._setRectSize( elem, rect );
+  // save its space in the packer
+  this.packer.placed( rect );
+  this._setMaxXY( rect );
+};
+
+// -------------------------- methods -------------------------- //
+
+function verticalSorter( a, b ) {
+  return a.position.y - b.position.y || a.position.x - b.position.x;
+}
+
+function horizontalSorter( a, b ) {
+  return a.position.x - b.position.x || a.position.y - b.position.y;
+}
+
+proto.sortItemsByPosition = function() {
+  var sorter = this._getOption('horizontal') ? horizontalSorter : verticalSorter;
+  this.items.sort( sorter );
+};
+
+/**
+ * Fit item element in its current position
+ * Packery will position elements around it
+ * useful for expanding elements
+ *
+ * @param {Element} elem
+ * @param {Number} x - horizontal destination position, optional
+ * @param {Number} y - vertical destination position, optional
+ */
+proto.fit = function( elem, x, y ) {
+  var item = this.getItem( elem );
+  if ( !item ) {
+    return;
+  }
+
+  // stamp item to get it out of layout
+  this.stamp( item.element );
+  // set placing flag
+  item.enablePlacing();
+  this.updateShiftTargets( item );
+  // fall back to current position for fitting
+  x = x === undefined ? item.rect.x: x;
+  y = y === undefined ? item.rect.y: y;
+  // position it best at its destination
+  this.shift( item, x, y );
+  this._bindFitEvents( item );
+  item.moveTo( item.rect.x, item.rect.y );
+  // layout everything else
+  this.shiftLayout();
+  // return back to regularly scheduled programming
+  this.unstamp( item.element );
+  this.sortItemsByPosition();
+  item.disablePlacing();
+};
+
+/**
+ * emit event when item is fit and other items are laid out
+ * @param {Packery.Item} item
+ * @private
+ */
+proto._bindFitEvents = function( item ) {
+  var _this = this;
+  var ticks = 0;
+  function onLayout() {
+    ticks++;
+    if ( ticks != 2 ) {
+      return;
+    }
+    _this.dispatchEvent( 'fitComplete', null, [ item ] );
+  }
+  // when item is laid out
+  item.once( 'layout', onLayout );
+  // when all items are laid out
+  this.once( 'layoutComplete', onLayout );
+};
+
+// -------------------------- resize -------------------------- //
+
+// debounced, layout on resize
+proto.resize = function() {
+  // don't trigger if size did not change
+  // or if resize was unbound. See #285, outlayer#9
+  if ( !this.isResizeBound || !this.needsResizeLayout() ) {
+    return;
+  }
+
+  if ( this.options.shiftPercentResize ) {
+    this.resizeShiftPercentLayout();
+  } else {
+    this.layout();
+  }
+};
+
+/**
+ * check if layout is needed post layout
+ * @returns Boolean
+ */
+proto.needsResizeLayout = function() {
+  var size = getSize( this.element );
+  var innerSize = this._getOption('horizontal') ? 'innerHeight' : 'innerWidth';
+  return size[ innerSize ] != this.size[ innerSize ];
+};
+
+proto.resizeShiftPercentLayout = function() {
+  var items = this._getItemsForLayout( this.items );
+
+  var isHorizontal = this._getOption('horizontal');
+  var coord = isHorizontal ? 'y' : 'x';
+  var measure = isHorizontal ? 'height' : 'width';
+  var segmentName = isHorizontal ? 'rowHeight' : 'columnWidth';
+  var innerSize = isHorizontal ? 'innerHeight' : 'innerWidth';
+
+  // proportional re-align items
+  var previousSegment = this[ segmentName ];
+  previousSegment = previousSegment && previousSegment + this.gutter;
+
+  if ( previousSegment ) {
+    this._getMeasurements();
+    var currentSegment = this[ segmentName ] + this.gutter;
+    items.forEach( function( item ) {
+      var seg = Math.round( item.rect[ coord ] / previousSegment );
+      item.rect[ coord ] = seg * currentSegment;
+    });
+  } else {
+    var currentSize = getSize( this.element )[ innerSize ] + this.gutter;
+    var previousSize = this.packer[ measure ];
+    items.forEach( function( item ) {
+      item.rect[ coord ] = ( item.rect[ coord ] / previousSize ) * currentSize;
+    });
+  }
+
+  this.shiftLayout();
+};
+
+// -------------------------- drag -------------------------- //
+
+/**
+ * handle an item drag start event
+ * @param {Element} elem
+ */
+proto.itemDragStart = function( elem ) {
+  if ( !this.isEnabled ) {
+    return;
+  }
+  this.stamp( elem );
+  // this.ignore( elem );
+  var item = this.getItem( elem );
+  if ( !item ) {
+    return;
+  }
+
+  item.enablePlacing();
+  item.showDropPlaceholder();
+  this.dragItemCount++;
+  this.updateShiftTargets( item );
+};
+
+proto.updateShiftTargets = function( dropItem ) {
+  this.shiftPacker.reset();
+
+  // pack stamps
+  this._getBoundingRect();
+  var isOriginLeft = this._getOption('originLeft');
+  var isOriginTop = this._getOption('originTop');
+  this.stamps.forEach( function( stamp ) {
+    // ignore dragged item
+    var item = this.getItem( stamp );
+    if ( item && item.isPlacing ) {
+      return;
+    }
+    var offset = this._getElementOffset( stamp );
+    var rect = new Rect({
+      x: isOriginLeft ? offset.left : offset.right,
+      y: isOriginTop ? offset.top : offset.bottom
+    });
+    this._setRectSize( stamp, rect );
+    // save its space in the packer
+    this.shiftPacker.placed( rect );
+  }, this );
+
+  // reset shiftTargets
+  var isHorizontal = this._getOption('horizontal');
+  var segmentName = isHorizontal ? 'rowHeight' : 'columnWidth';
+  var measure = isHorizontal ? 'height' : 'width';
+
+  this.shiftTargetKeys = [];
+  this.shiftTargets = [];
+  var boundsSize;
+  var segment = this[ segmentName ];
+  segment = segment && segment + this.gutter;
+
+  if ( segment ) {
+    var segmentSpan = Math.ceil( dropItem.rect[ measure ] / segment );
+    var segs = Math.floor( ( this.shiftPacker[ measure ] + this.gutter ) / segment );
+    boundsSize = ( segs - segmentSpan ) * segment;
+    // add targets on top
+    for ( var i=0; i < segs; i++ ) {
+      var initialX = isHorizontal ? 0 : i * segment;
+      var initialY = isHorizontal ? i * segment : 0;
+      this._addShiftTarget( initialX, initialY, boundsSize );
+    }
+  } else {
+    boundsSize = ( this.shiftPacker[ measure ] + this.gutter ) - dropItem.rect[ measure ];
+    this._addShiftTarget( 0, 0, boundsSize );
+  }
+
+  // pack each item to measure where shiftTargets are
+  var items = this._getItemsForLayout( this.items );
+  var packMethod = this._getPackMethod();
+  items.forEach( function( item ) {
+    var rect = item.rect;
+    this._setRectSize( item.element, rect );
+    this.shiftPacker[ packMethod ]( rect );
+
+    // add top left corner
+    this._addShiftTarget( rect.x, rect.y, boundsSize );
+    // add bottom left / top right corner
+    var cornerX = isHorizontal ? rect.x + rect.width : rect.x;
+    var cornerY = isHorizontal ? rect.y : rect.y + rect.height;
+    this._addShiftTarget( cornerX, cornerY, boundsSize );
+
+    if ( segment ) {
+      // add targets for each column on bottom / row on right
+      var segSpan = Math.round( rect[ measure ] / segment );
+      for ( var i=1; i < segSpan; i++ ) {
+        var segX = isHorizontal ? cornerX : rect.x + segment * i;
+        var segY = isHorizontal ? rect.y + segment * i : cornerY;
+        this._addShiftTarget( segX, segY, boundsSize );
+      }
+    }
+  }, this );
+
+};
+
+proto._addShiftTarget = function( x, y, boundsSize ) {
+  var checkCoord = this._getOption('horizontal') ? y : x;
+  if ( checkCoord !== 0 && checkCoord > boundsSize ) {
+    return;
+  }
+  // create string for a key, easier to keep track of what targets
+  var key = x + ',' + y;
+  var hasKey = this.shiftTargetKeys.indexOf( key ) != -1;
+  if ( hasKey ) {
+    return;
+  }
+  this.shiftTargetKeys.push( key );
+  this.shiftTargets.push({ x: x, y: y });
+};
+
+// -------------------------- drop -------------------------- //
+
+proto.shift = function( item, x, y ) {
+  var shiftPosition;
+  var minDistance = Infinity;
+  var position = { x: x, y: y };
+  this.shiftTargets.forEach( function( target ) {
+    var distance = getDistance( target, position );
+    if ( distance < minDistance ) {
+      shiftPosition = target;
+      minDistance = distance;
+    }
+  });
+  item.rect.x = shiftPosition.x;
+  item.rect.y = shiftPosition.y;
+};
+
+function getDistance( a, b ) {
+  var dx = b.x - a.x;
+  var dy = b.y - a.y;
+  return Math.sqrt( dx * dx + dy * dy );
+}
+
+// -------------------------- drag move -------------------------- //
+
+var DRAG_THROTTLE_TIME = 120;
+
+/**
+ * handle an item drag move event
+ * @param {Element} elem
+ * @param {Number} x - horizontal change in position
+ * @param {Number} y - vertical change in position
+ */
+proto.itemDragMove = function( elem, x, y ) {
+  var item = this.isEnabled && this.getItem( elem );
+  if ( !item ) {
+    return;
+  }
+
+  x -= this.size.paddingLeft;
+  y -= this.size.paddingTop;
+
+  var _this = this;
+  function onDrag() {
+    _this.shift( item, x, y );
+    item.positionDropPlaceholder();
+    _this.layout();
+  }
+
+  // throttle
+  var now = new Date();
+  var isThrottled = this._itemDragTime && now - this._itemDragTime < DRAG_THROTTLE_TIME;
+  if ( isThrottled ) {
+    clearTimeout( this.dragTimeout );
+    this.dragTimeout = setTimeout( onDrag, DRAG_THROTTLE_TIME );
+  } else {
+    onDrag();
+    this._itemDragTime = now;
+  }
+};
+
+// -------------------------- drag end -------------------------- //
+
+/**
+ * handle an item drag end event
+ * @param {Element} elem
+ */
+proto.itemDragEnd = function( elem ) {
+  var item = this.isEnabled && this.getItem( elem );
+  if ( !item ) {
+    return;
+  }
+
+  clearTimeout( this.dragTimeout );
+  item.element.classList.add('is-positioning-post-drag');
+
+  var completeCount = 0;
+  var _this = this;
+  function onDragEndLayoutComplete() {
+    completeCount++;
+    if ( completeCount != 2 ) {
+      return;
+    }
+    // reset drag item
+    item.element.classList.remove('is-positioning-post-drag');
+    item.hideDropPlaceholder();
+    _this.dispatchEvent( 'dragItemPositioned', null, [ item ] );
+  }
+
+  item.once( 'layout', onDragEndLayoutComplete );
+  this.once( 'layoutComplete', onDragEndLayoutComplete );
+  item.moveTo( item.rect.x, item.rect.y );
+  this.layout();
+  this.dragItemCount = Math.max( 0, this.dragItemCount - 1 );
+  this.sortItemsByPosition();
+  item.disablePlacing();
+  this.unstamp( item.element );
+};
+
+/**
+ * binds Draggabilly events
+ * @param {Draggabilly} draggie
+ */
+proto.bindDraggabillyEvents = function( draggie ) {
+  this._bindDraggabillyEvents( draggie, 'on' );
+};
+
+proto.unbindDraggabillyEvents = function( draggie ) {
+  this._bindDraggabillyEvents( draggie, 'off' );
+};
+
+proto._bindDraggabillyEvents = function( draggie, method ) {
+  var handlers = this.handleDraggabilly;
+  draggie[ method ]( 'dragStart', handlers.dragStart );
+  draggie[ method ]( 'dragMove', handlers.dragMove );
+  draggie[ method ]( 'dragEnd', handlers.dragEnd );
+};
+
+/**
+ * binds jQuery UI Draggable events
+ * @param {jQuery} $elems
+ */
+proto.bindUIDraggableEvents = function( $elems ) {
+  this._bindUIDraggableEvents( $elems, 'on' );
+};
+
+proto.unbindUIDraggableEvents = function( $elems ) {
+  this._bindUIDraggableEvents( $elems, 'off' );
+};
+
+proto._bindUIDraggableEvents = function( $elems, method ) {
+  var handlers = this.handleUIDraggable;
+  $elems
+    [ method ]( 'dragstart', handlers.start )
+    [ method ]( 'drag', handlers.drag )
+    [ method ]( 'dragstop', handlers.stop );
+};
+
+// ----- destroy ----- //
+
+var _destroy = proto.destroy;
+proto.destroy = function() {
+  _destroy.apply( this, arguments );
+  // disable flag; prevent drag events from triggering. #72
+  this.isEnabled = false;
+};
+
+// -----  ----- //
+
+Packery.Rect = Rect;
+Packery.Packer = Packer;
+
+return Packery;
+
+}));

node_modules/packery/js/rect.js

@@ -0,0 +1,152 @@
+/**
+ * Rect
+ * low-level utility class for basic geometry
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory();
+  } else {
+    // browser global
+    window.Packery = window.Packery || {};
+    window.Packery.Rect = factory();
+  }
+
+}( window, function factory() {
+'use strict';
+
+// -------------------------- Rect -------------------------- //
+
+function Rect( props ) {
+  // extend properties from defaults
+  for ( var prop in Rect.defaults ) {
+    this[ prop ] = Rect.defaults[ prop ];
+  }
+
+  for ( prop in props ) {
+    this[ prop ] = props[ prop ];
+  }
+
+}
+
+Rect.defaults = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0
+};
+
+var proto = Rect.prototype;
+
+/**
+ * Determines whether or not this rectangle wholly encloses another rectangle or point.
+ * @param {Rect} rect
+ * @returns {Boolean}
+**/
+proto.contains = function( rect ) {
+  // points don't have width or height
+  var otherWidth = rect.width || 0;
+  var otherHeight = rect.height || 0;
+  return this.x <= rect.x &&
+    this.y <= rect.y &&
+    this.x + this.width >= rect.x + otherWidth &&
+    this.y + this.height >= rect.y + otherHeight;
+};
+
+/**
+ * Determines whether or not the rectangle intersects with another.
+ * @param {Rect} rect
+ * @returns {Boolean}
+**/
+proto.overlaps = function( rect ) {
+  var thisRight = this.x + this.width;
+  var thisBottom = this.y + this.height;
+  var rectRight = rect.x + rect.width;
+  var rectBottom = rect.y + rect.height;
+
+  // http://stackoverflow.com/a/306332
+  return this.x < rectRight &&
+    thisRight > rect.x &&
+    this.y < rectBottom &&
+    thisBottom > rect.y;
+};
+
+/**
+ * @param {Rect} rect - the overlapping rect
+ * @returns {Array} freeRects - rects representing the area around the rect
+**/
+proto.getMaximalFreeRects = function( rect ) {
+
+  // if no intersection, return false
+  if ( !this.overlaps( rect ) ) {
+    return false;
+  }
+
+  var freeRects = [];
+  var freeRect;
+
+  var thisRight = this.x + this.width;
+  var thisBottom = this.y + this.height;
+  var rectRight = rect.x + rect.width;
+  var rectBottom = rect.y + rect.height;
+
+  // top
+  if ( this.y < rect.y ) {
+    freeRect = new Rect({
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: rect.y - this.y
+    });
+    freeRects.push( freeRect );
+  }
+
+  // right
+  if ( thisRight > rectRight ) {
+    freeRect = new Rect({
+      x: rectRight,
+      y: this.y,
+      width: thisRight - rectRight,
+      height: this.height
+    });
+    freeRects.push( freeRect );
+  }
+
+  // bottom
+  if ( thisBottom > rectBottom ) {
+    freeRect = new Rect({
+      x: this.x,
+      y: rectBottom,
+      width: this.width,
+      height: thisBottom - rectBottom
+    });
+    freeRects.push( freeRect );
+  }
+
+  // left
+  if ( this.x < rect.x ) {
+    freeRect = new Rect({
+      x: this.x,
+      y: this.y,
+      width: rect.x - this.x,
+      height: this.height
+    });
+    freeRects.push( freeRect );
+  }
+
+  return freeRects;
+};
+
+proto.canFit = function( rect ) {
+  return this.width >= rect.width && this.height >= rect.height;
+};
+
+return Rect;
+
+}));

node_modules/packery/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "packery",
+  "version": "2.1.2",
+  "description": "Gapless, draggable grid layouts",
+  "main": "js/packery.js",
+  "dependencies": {
+    "get-size": "^2.0.2",
+    "outlayer": "^2.0.0"
+  },
+  "devDependencies": {
+    "chalk": "^1.1.1",
+    "draggabilly": "^2.1.0",
+    "gulp": "^3.9.0",
+    "gulp-jshint": "^2.0.0",
+    "gulp-json-lint": "^0.1.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-replace": "^0.5.4",
+    "gulp-requirejs-optimize": "github:metafizzy/gulp-requirejs-optimize",
+    "gulp-uglify": "^1.5.1",
+    "gulp-util": "^3.0.7",
+    "jquery": ">=2 <4",
+    "jquery-bridget": "~2.0.0",
+    "jshint": "^2.9.1",
+    "minimist": "^1.2.0",
+    "qunitjs": "^1.15"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/metafizzy/packery.git"
+  },
+  "keywords": [
+    "DOM",
+    "browser",
+    "layout",
+    "bin",
+    "binpacking",
+    "packing",
+    "masonry",
+    "gapless",
+    "draggable"
+  ],
+  "author": "Metafizzy",
+  "bugs": {
+    "url": "https://github.com/metafizzy/packery/issues"
+  },
+  "homepage": "http://packery.metafizzy.co",
+  "license": "GPL-3.0"
+}

node_modules/packery/sandbox/add-remove.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>add/remove</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+  <link rel="stylesheet" href="css/basics.css" />
+
+</head>
+<body>
+
+  <h1>add/remove</h1>
+
+  <p>
+    <button id="append">Append items</button>
+    <button id="prepend">Prepend items</button>
+  </p>
+
+  <div class="container">
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w4"></div>
+    <div class="item w4"></div>
+  </div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="examples.js"></script>
+<script>
+
+function getItemFragment() {
+  var fragment = document.createDocumentFragment();
+  var items = [];
+
+  for ( var i=0; i < 3; i++ ) {
+    var item = document.createElement('div');
+    var wRand = Math.random();
+    var widthClass = wRand > 0.85 ? 'w4' :
+      wRand > 0.7 ? 'w2' : '';
+    var hRand = Math.random();
+    var heightClass = hRand > 0.85 ? 'h4' :
+      hRand > 0.7 ? 'h2' : '';
+    item.className = 'item ' + widthClass + ' ' + heightClass;
+    fragment.appendChild( item );
+    items.push( item )
+  }
+
+  return {
+    items: items,
+    fragment: fragment
+  };
+}
+
+  var container = document.querySelector('.container');
+  var pckry = window.packery7 = new Packery( container );
+
+  var appendButton = document.querySelector('#append');
+
+  appendButton.addEventListener( 'click', function( event ) {
+    var itemFrag = getItemFragment();
+    container.appendChild( itemFrag.fragment );
+    pckry.appended( itemFrag.items );
+  });
+
+  var prependButton = document.querySelector('#prepend');
+
+  prependButton.addEventListener( 'click', function( event ) {
+    var itemFrag = getItemFragment();
+    container.insertBefore( itemFrag.fragment, container.firstChild );
+    pckry.prepended( itemFrag.items );
+  });
+
+  container.addEventListener( 'click', function( event ) {
+    var elem = event.target;
+    if ( !matchesSelector( elem, '.item' ) ) {
+      return;
+    }
+
+    pckry.remove( elem );
+    pckry.layout();
+  });
+
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/basics.html

@@ -0,0 +1,189 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Packery basic examples</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+  <link rel="stylesheet" href="css/basics.css" />
+
+</head>
+<body>
+
+  <h1>Packery basic examples</h1>
+
+  <div id="ex1" class="container">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="ex2" class="container">
+  </div>
+
+  <div id="ex3" class="container">
+  </div>
+
+  <div id="ex4" class="container fluid has-padding">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="ex5" class="container fluid">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="ex6" class="container fluid has-padding">
+    <div class="bogey bogey1"></div>
+    <div class="bogey bogey2"></div>
+  </div>
+
+  <div id="fit-demo" class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+<script src="../bower_components/get-style-property/get-style-property.js"></script>
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="examples.js"></script>
+<script>
+
+  var ex1 = document.getElementById('ex1');
+  var packery1 = new Packery( ex1 );
+
+  var ex2 = document.getElementById('ex2');
+  appendRandomSizedItems( ex2 );
+  var packery2 = new Packery( ex2 );
+
+  var ex3 = document.getElementById('ex3');
+  appendRandomSizedItems( ex3 );
+  var packery3 = new Packery( ex3, {
+    columnWidth: 50,
+    rowHeight: 50
+  });
+
+  var ex4 = document.getElementById('ex4');
+  var packery4 = new Packery( ex4 );
+
+  var ex5 = document.getElementById('ex5');
+  var packery5 = new Packery( ex5 );
+
+  var ex6 = document.getElementById('ex6');
+  appendRandomSizedItems( ex6 );
+  var packery6 = new Packery( ex6, {
+    itemSelector: '.item',
+    stamp: ex6.querySelectorAll('.bogey')
+  });
+
+  // ----- fit demo ----- //
+
+  ( function() {
+    var container = document.querySelector('#fit-demo');
+    var pckry = new Packery( container );
+    pckry.on( 'fitComplete', function( pckryInstance, item ) {
+      console.log('fit was completed ', item );
+    });
+
+    container.addEventListener( 'click', function( event ) {
+      // only care about item
+      var elem = event.target;
+      if ( !matchesSelector( elem, '.item' ) ) {
+        return;
+      }
+
+      if ( !matchesSelector( elem, '.gigante') ) {
+        elem.classList.add('gigante' );
+        pckry.fit( elem );
+      } else {
+        elem.classList.remove('gigante' );
+        pckry.layout();
+      }
+    });
+  })();
+
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/browserify/browserify.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Browserify</title>
+
+  <link rel="stylesheet" href="../css/examples.css" />
+
+</head>
+<body>
+
+  <h1>Browserify</h1>
+
+  <div id="basic" class="container">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+<script src="bundle.js"></script>
+
+</body>
+</html>

node_modules/packery/sandbox/browserify/jquery-main.js

@@ -0,0 +1,24 @@
+// ----- jQuery ----- //
+
+var Packery = require('../../js/packery');
+var Draggabilly = require('draggabilly');
+var $ = require('jquery');
+var jQBridget = require('jquery-bridget');
+
+$.bridget( 'packery', Packery );
+
+var $container = $('#basic').packery({
+  columnWidth: 50,
+  rowHeight: 50
+});
+
+var pckry = $container.data('packery');
+
+$.each( pckry.items, function( i, item ) {
+  var draggie = new Draggabilly( item.element );
+  $container.packery( 'bindDraggabillyEvents', draggie );
+});
+
+$container.packery( 'on', 'dragItemPositioned', function( pckry, item ) {
+  console.log( 'drag item positioned', item.position.x, item.position.y );
+});

node_modules/packery/sandbox/browserify/main.js

@@ -0,0 +1,23 @@
+// ----- vanilla JS ----- //
+
+var Packery = require('../../js/packery');
+var Draggabilly = require('draggabilly');
+
+var pckry = new Packery( '#basic', {
+  columnWidth: 50,
+  rowHeight: 50
+});
+
+var draggies = [];
+var item, draggie;
+
+for ( var i=0, len = pckry.items.length; i < len; i++ ) {
+  item = pckry.items[i].element;
+  draggie = new Draggabilly( item );
+  pckry.bindDraggabillyEvents( draggie );
+  draggies.push( draggie );
+}
+
+pckry.on( 'dragItemPositioned', function( pckry, item ) {
+  console.log( 'drag item positioned', item.position.x, item.position.y );
+});

node_modules/packery/sandbox/css/basics.css

@@ -0,0 +1,53 @@
+
+#ex5 .item {
+  margin-left: 1%;
+  margin-right: 1%;
+  width: 7.9%;
+}
+
+#ex5 .item.w2 { width: 17.9%; }
+#ex5 .item.w4 { width: 37.9%; }
+
+@media ( max-width: 800px ) {
+  body { background: red ;}
+
+  #ex5 .item    { width: 17.9%; }
+  #ex5 .item.w2 { width: 37.9%; }
+  #ex5 .item.w4 { width: 57.9%; }
+
+}
+
+.bogey {
+  background: red;
+  position: absolute;
+}
+
+#ex6 .bogey1 {
+  width: 30%;
+  height: 140px;
+  left: 20%;
+  top: 20px;
+}
+
+#ex6 .bogey2 {
+  width: 140px;
+  height: 180px;
+  right: 20px;
+  top: 140px;
+}
+
+#fit-demo {
+  width: 200px;
+}
+
+/*
+#fit-demo .item {
+  width: 40px;
+  height: 40px;
+}
+*/
+
+#fit-demo .item.gigante {
+  width:  150px;
+  height: 100px;
+}

node_modules/packery/sandbox/css/examples.css

@@ -0,0 +1,40 @@
+* { box-sizing: border-box; }
+
+body {
+  font-family: sans-serif;
+}
+
+.container {
+  width: 500px;
+  margin-bottom: 20px;
+  background: #EEE;
+}
+
+.item {
+  float: left;
+  width: 50px;
+  height: 50px;
+  border: 1px solid;
+  background: #ACE;
+}
+
+.item.w2 { width:  100px; }
+.item.h2 { height: 100px; }
+.item.w4 { width:  200px; }
+.item.h4 { height: 200px; }
+
+.fluid {
+  width: 50%;
+}
+
+.has-padding {
+  padding: 10px 20px 30px 40px;
+}
+
+/* dragging */
+.is-dragging,
+.is-positioning-post-drag,
+.ui-draggable-dragging {
+  z-index: 10;
+  background: orange;
+}

node_modules/packery/sandbox/draggabilly.html

@@ -0,0 +1,187 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Draggabilly</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+  <style>
+  .item.expanded {
+    width: 100% !important;
+  }
+
+  #horiz {
+    height: 360px;
+  }
+
+  .packery-drop-placeholder {
+    border: 3px dashed #333;
+  }
+  </style>
+
+</head>
+<body>
+
+  <h1>Draggabilly</h1>
+
+  <div id="ex4" class="container fluid has-padding">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+
+  <div id="ex6" class="container fluid has-padding"></div>
+
+  <div id="horiz" class="container has-padding">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="examples.js"></script>
+<script>
+
+function bindDraggies( packery ) {
+  var draggies = [];
+  var item, draggie;
+
+  for ( var i=0, len = packery.items.length; i < len; i++ ) {
+    item = packery.items[i].element;
+    draggie = new Draggabilly( item );
+    packery.bindDraggabillyEvents( draggie );
+    draggies.push( draggie );
+
+  }
+  packery.on( 'dragItemPositioned', function( item ) {
+    console.log( 'drag item positioned', item.position.x, item.position.y );
+  });
+  return draggies;
+
+}
+
+
+  var ex4 = document.getElementById('ex4');
+  var packery4 = new Packery( ex4, {
+    columnWidth: 50,
+    rowHeight: 50,
+    transitionDuration: '0.6s'
+  });
+
+  var layoutCount4 = 0;
+
+  packery4.on( 'layoutComplete', function( packery ) {
+    console.log( 'completed layouts', ++layoutCount4 );
+  });
+
+  var ex6 = document.getElementById('ex6');
+  appendRandomSizedItems( ex6 );
+  var packery6 = new Packery( ex6, {
+    itemSelector: '.item',
+    transitionDuration: '0.6s',
+    gutter: 10
+  });
+
+  window.packery4 = packery4;
+
+  ( function() {
+    var draggies = bindDraggies( packery4 );
+
+    // when clicked toggle expanded
+    function onDragEnd() {
+      var p1 = this.position;
+      var p2 = this.startPosition;
+      // only proceed if stuff has moved
+      if ( p1.x !== p2.x || p1.y !== p2.y ) {
+        return;
+      }
+      // dragger didn't move
+      var isExpanded = this.element.classList.contains('expanded' );
+      this.element.classList.toggle('expanded');
+      if ( !isExpanded ) {
+        // HACK unplace first
+        packery4.unplace( this.element );
+        packery4.fit( this.element );
+      } else {
+        packery4.layout();
+      }
+    }
+
+    for ( var i=0, len = draggies.length; i < len; i++ ) {
+      var draggie = draggies[i];
+      draggie.on( 'dragEnd', onDragEnd );
+    }
+  })();
+
+
+  bindDraggies( packery6 );
+
+  ( function() {
+    var pckry = new Packery( '#horiz', {
+      columnWidth: 50,
+      rowHeight: 50,
+      horizontal: true,
+      transitionDuration: '0.8s'
+    });
+    bindDraggies( pckry );
+  })();
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/examples.js

@@ -0,0 +1,14 @@
+function appendRandomSizedItems( container ) {
+  var frag = document.createDocumentFragment();
+  for ( var i=0; i < 35; i++ ) {
+    var item = document.createElement('div');
+    item.className = 'item';
+    var w = Math.floor( Math.random() * Math.random() * 180 ) + 20;
+    var h = Math.floor( Math.random() * Math.random() * 180 ) + 20;
+    item.style.width  = w + 'px';
+    item.style.height = h + 'px';
+    frag.appendChild( item );
+  }
+
+  container.appendChild( frag );
+}

node_modules/packery/sandbox/fit.html

@@ -0,0 +1,120 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>fit</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+  <style>
+  #expanding-demo {
+    width: 40%;
+  }
+
+  #expanding-demo .item {
+    height: 40px;
+    width: 25%;
+  }
+
+  #expanding-demo .item.is-expanded {
+    height: 60px;
+    width: 50%;
+    background: #1D6;
+  }
+
+  #position-demo {
+    width: 30%;
+  }
+
+  #position-demo .item {
+    width: 60px;
+    height: 60px;
+  }
+  </style>
+
+</head>
+<body>
+
+  <h1>fit</h1>
+
+<div id="expanding-demo" class="container">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<div id="position-demo" class="container">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script>
+
+  ( function() {
+    var container = document.querySelector('#expanding-demo');
+    var pckry = new Packery( container );
+
+    container.addEventListener( 'click', function( event ) {
+      // don't proceed if item was not clicked on
+      var target = event.target;
+      if ( !matchesSelector( target, '.item' ) ) {
+        return;
+      }
+
+      var isExpanded = target.classList.contains('is-expanded');
+      target.classList.toggle('is-expanded');
+
+      if ( isExpanded ) {
+        // if shrinking, just layout
+        pckry.shiftLayout();
+      } else {
+        // if expanding, fit it
+        pckry.fit( target );
+      }
+    });
+  })();
+
+
+  ( function() {
+    var container = document.querySelector('#position-demo');
+    var pckry = new Packery( container );
+
+    container.addEventListener( 'click', function( event ) {
+      // don't proceed if item was not clicked on
+      var target = event.target;
+      if ( !matchesSelector( target, '.item' ) ) {
+        return;
+      }
+      // position item at 40, 40
+      pckry.fit( target, 40, 40 );
+    });
+  })();
+
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/fluid.html

@@ -0,0 +1,109 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>fluid</title>
+
+  <style>
+  * { box-sizing: border-box; }
+
+  /* force scrollbar */
+  html { overflow-y: scroll; }
+
+  body {
+    font-family: sans-serif;
+  }
+
+  .grid {
+    margin-bottom: 20px;
+    background: #EEE;
+    /*padding: 20px 5%;*/
+  }
+
+  .grid-item,
+  .grid-sizer {
+    width: 25%;
+  }
+
+  .grid-item {
+    float: left;
+    height: 80px;
+    border: 1px solid;
+    background: #ACE;
+  }
+
+  .grid-item.w2 { width: 50%; }
+  .grid-item.w3 { width: 75%; }
+
+  .grid-item.h2 { height: 160px; }
+  .grid-item.h3 { height: 240px; }
+  </style>
+
+</head>
+<body>
+
+  <h1>fluid</h1>
+
+  <div class="grid js-packery" data-packery-options='{ "percentPosition": true }'>
+    <div class="grid-item w2"></div>
+    <div class="grid-item h2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item w3"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item h3"></div>
+    <div class="grid-item w2 h2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item"></div>
+  </div>
+
+  <h2>Draggable</h2>
+
+  <div class="grid grid--draggable">
+    <div class="grid-sizer"></div>
+    <div class="grid-item w2"></div>
+    <div class="grid-item h2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item w3"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item h3"></div>
+    <div class="grid-item w2 h2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item"></div>
+  </div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
+
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script>
+  var pckry = new Packery( '.grid--draggable', {
+    itemSelector: '.grid-item',
+    columnWidth: '.grid-sizer',
+    percentPosition: true,
+  });
+
+  var dragElems = document.querySelectorAll('.grid--draggable .grid-item');
+
+  for ( var i=0; i < dragElems.length; i++ ) {
+    var dragElem = dragElems[i];
+    var draggie = new Draggabilly( dragElem );
+    pckry.bindDraggabillyEvents( draggie );
+  }
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/horizontal.html

@@ -0,0 +1,191 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Packery horizontal examples</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+  <link rel="stylesheet" href="css/basics.css" />
+  <style>
+    html, body { height: 100%; }
+
+    .container {
+      width: auto;
+      height: 300px;
+    }
+    
+    .container.fluid {
+      width: auto;
+      height: 80%;
+      position: relative;
+    }
+
+    #ex6 .bogey1 { 
+      top: 40%;
+      left: 200px;
+      width: 200px;
+    }
+
+    #ex6 .bogey2 {
+      right: auto;
+      left: 60px;
+    }
+    
+    #fit-demo {
+      height: 200px;
+    }
+  </style>
+
+
+</head>
+<body>
+
+  <h1>horizontal examples</h1>
+
+  <div id="ex1" class="container">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="ex2" class="container">
+  </div>
+
+  <div id="ex3" class="container">
+  </div>
+
+  <div id="ex4" class="container fluid has-padding">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="ex6" class="container fluid has-padding">
+    <div class="bogey bogey1"></div>
+    <div class="bogey bogey2"></div>
+  </div>
+
+  <div id="fit-demo" class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="examples.js"></script>
+<script>
+// everything horizontal on this page
+Packery.defaults.isHorizontal = true;
+
+  var ex1 = document.getElementById('ex1');
+  var packery1 = new Packery( ex1 );
+
+  var ex2 = document.getElementById('ex2');
+  appendRandomSizedItems( ex2 );
+  var packery2 = new Packery( ex2 );
+
+  var ex3 = document.getElementById('ex3');
+  appendRandomSizedItems( ex3 );
+  var packery3 = new Packery( ex3, {
+    columnWidth: 50,
+    rowHeight: 50
+  });
+
+  var ex4 = document.getElementById('ex4');
+  var packery4 = new Packery( ex4 );
+
+  var ex6 = document.getElementById('ex6');
+  appendRandomSizedItems( ex6 );
+  var packery6 = new Packery( ex6, {
+    itemSelector: '.item',
+    stamp: ex6.querySelectorAll('.bogey')
+  });
+
+  // ----- fit demo ----- //
+
+  ( function() {
+    var container = document.querySelector('#fit-demo');
+    var pckry = new Packery( container );
+    pckry.on( 'fitComplete', function( pckryInstance, item ) {
+      console.log('fit was completed ', item );
+    });
+
+    container.addEventListener( 'click', function( event ) {
+      // only care about item
+      var elem = event.target;
+      if ( !matchesSelector( elem, '.item' ) ) {
+        return;
+      }
+
+      if ( !matchesSelector( elem, '.gigante') ) {
+        elem.classList.add('gigante' );
+        pckry.fit( elem );
+      } else {
+        elem.classList.remove('gigante' );
+        pckry.layout();
+      }
+    });
+  })();
+
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/jquery-ui-draggable.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>jQuery UI Draggable</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+
+</head>
+<body>
+
+  <h1>jQuery UI Draggable</h1>
+
+  <div id="ex4" class="container fluid has-padding">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+
+  <div id="ex6" class="container fluid has-padding"></div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/jquery/dist/jquery.min.js"></script>
+<script src="../bower_components/jquery-ui-draggable/jquery-ui-draggable.js"></script>
+<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+<script src="examples.js"></script>
+<script>
+$( function() {
+
+  // ----- grid ----- //
+
+  var $ex4 = $('#ex4');
+  $ex4.packery({
+    columnWidth: 50,
+    rowHeight: 50,
+    transitionDuration: '0.6s'
+  });
+
+  // get item elements and make them draggaable
+  var itemElems = $ex4.packery('getItemElements');
+  var $itemElems = $( itemElems ).draggable();
+
+  function orderItems( event ) {
+    // console.log( event.type, arguments );
+    var itemElems = $ex4.packery('getItemElements');
+    $( itemElems ).each( function( i, elem ) {
+      $(elem).text( i+1 );
+    });
+  }
+
+  $ex4.packery( 'bindUIDraggableEvents', $itemElems );
+  $ex4.on( 'dragItemPositioned', orderItems );
+  $ex4.on( 'layoutComplete', orderItems );
+
+  // ----- random sized ----- //
+
+  var $ex6 = $('#ex6');
+  appendRandomSizedItems( $ex6[0] );
+  $ex6.packery({
+    itemSelector: '.item',
+    transitionDuration: '1.6s'
+  });
+
+  // get item elements and make them draggaable
+  itemElems = $ex6.packery('getItemElements');
+  $itemElems = $( itemElems ).draggable();
+  $ex6.packery( 'bindUIDraggableEvents', $itemElems );
+
+});
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/jquery.html

@@ -0,0 +1,228 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Packery with jQuery</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+  <link rel="stylesheet" href="css/basics.css" />
+
+</head>
+<body>
+
+  <h1>Packery with jQuery</h1>
+
+  <div id="ex1" class="container">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="ex2" class="container">
+  </div>
+
+  <div id="ex3" class="container">
+  </div>
+
+  <div id="ex4" class="container fluid has-padding">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="ex5" class="container fluid">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="ex6" class="container fluid has-padding">
+    <div class="bogey bogey1"></div>
+    <div class="bogey bogey2"></div>
+  </div>
+
+
+  <p><button id="add-to-7">Add items</button></p>
+
+  <div id="ex7" class="container">
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w4"></div>
+    <div class="item w4"></div>
+  </div>
+
+  <div id="fit-demo" class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+<script src="../bower_components/jquery/dist/jquery.min.js"></script>
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="examples.js"></script>
+<script>
+$( function() {
+
+  $('#ex1').packery();
+
+  var $ex2 = $('#ex2');
+  appendRandomSizedItems( $ex2[0] );
+  $ex2.packery();
+
+  var $ex3 = $('#ex3');
+  appendRandomSizedItems( $ex3[0] );
+  $ex3.packery({
+    columnWidth: 50,
+    rowHeight: 50
+  });
+
+  $('#ex4').packery();
+
+  $('#ex5').packery()
+
+  var $ex6 = $('#ex6');
+  appendRandomSizedItems( $ex6[0] );
+  $ex6.packery({
+    itemSelector: '.item',
+    stamp: '.bogey'
+  });
+
+  // ----- append and remove ----- //
+
+  var $ex7 = $('#ex7');
+  $ex7.packery();
+
+  $('#add-to-7').click( function() {
+    var items = '';
+    for ( var i=0; i < 3; i++ ) {
+    
+      var wRand = Math.random();
+      var widthClass = wRand > 0.85 ? 'w4' :
+        wRand > 0.7 ? 'w2' : '';
+      var hRand = Math.random();
+      var heightClass = hRand > 0.85 ? 'h4' :
+        hRand > 0.7 ? 'h2' : '';
+      var className = 'item ' + widthClass + ' ' + heightClass;
+      var item = '<div class="' + className + '"></div>';
+      items += item;
+    }
+    var $items = $( items );
+    $ex7.append( $items ).packery( 'appended', $items );
+  });
+
+  $ex7.on( 'click', '.item', function() {
+    $ex7.packery( 'remove', this ).packery();
+  });
+
+  // ----- fit demo ----- //
+
+ ( function() {
+   var $elem = $('#fit-demo');
+   $elem.packery();
+
+   $elem.packery( 'on', 'fitComplete', function( pckryInstance, item ) {
+     console.log('fit was completed ');
+   });
+
+   $elem.on( 'click', '.item', function() {
+     var $this = $(this)
+     if ( !$this.hasClass('gigante') ) {
+       $this.addClass('gigante');
+       $elem.packery( 'fit', this );
+     } else {
+       $this.removeClass('gigante');
+       $elem.packery();
+     }
+   });
+
+ })();
+
+});
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/merge-rects.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>merge rects</title>
+
+</head>
+<body>
+
+  <h1>merge rects</h1>
+
+<p>
+  <button class="make-rects-button" onclick="makeRects();">make rects</button>
+  <button class="merge-rects-button" onclick="mergeRects();">merge rects</button>
+</p>
+
+<canvas width="400" height="400"></canvas>
+
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+
+<script>
+function makeRect() {
+  var size = Math.floor( Math.random() * 12 ) + 1;
+  // var height = Math.floor( Math.random() * 9 ) + 1;
+  var x = Math.floor( Math.random() * ( 20 - size ) );
+  var y = Math.floor( Math.random() * ( 20 - size ) );
+  return new Packery.Rect({
+    x: x * 20,
+    y: y * 20,
+    width: size * 20,
+    height: size * 20,
+    hue: Math.floor( Math.random() * 6 ) * 360 / 6
+  });
+}
+
+var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');
+
+var rects;
+
+function makeRects() {
+  rects = [];
+  for ( var i=0; i < 10; i++ ) {
+    rects.push( makeRect() );
+  }
+  render();
+}
+
+function renderRect( rect) {
+  var x = rect.x + 0.5;
+  var y = rect.y + 0.5;
+  ctx.lineWidth = 3;
+  ctx.strokeStyle = 'hsla(' + rect.hue + ', 100%, 40%, 0.8)';
+  ctx.strokeRect( x, y, rect.width, rect.height );
+  ctx.fillStyle = 'hsla(' + rect.hue + ', 100%, 50%, 0.2)';
+  ctx.fillRect( x, y, rect.width, rect.height );
+}
+
+function render() {
+  ctx.clearRect( 0, 0, 400, 400 );
+  rects.forEach( renderRect );
+}
+
+makeRects();
+
+function mergeRects() {
+  rects = Packery.Packer.mergeRects( rects );
+  render();
+}
+
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/origin.html

@@ -0,0 +1,168 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Packery basic examples</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+  <link rel="stylesheet" href="css/basics.css" />
+
+  <style>
+  .container {
+    position: relative;
+    width: 50%;
+    counter-reset: item;
+  }
+
+  .container .item:before {
+    counter-increment: item;
+    content: counter(item);
+    display: block;
+  }
+  
+  .stamp {
+    position: absolute;
+    background: red;
+    border: 1px solid;
+    opacity: 0.8;
+  }
+
+  .stamp1 {
+    width: 200px;
+    height: 100px;
+    left: 130px;
+  }
+
+  .stamp2 {
+    width: 100px;
+    height: 200px;
+    right: 30%;
+  }
+  
+  #top-right .stamp1 { top: 10px; }
+  #bottom-right .stamp1,
+  #bottom-left .stamp1 { bottom: 10px; }
+
+  #top-right .stamp2 { top: 20px; }
+  #bottom-right .stamp2,
+  #bottom-left .stamp2 { bottom: 20px; }
+  </style>
+
+</head>
+<body>
+
+  <h1>Packery basic examples</h1>
+
+  <div id="top-right" class="container">
+    <div class="stamp stamp1"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+  </div>
+
+  <div id="bottom-left" class="container">
+    <div class="stamp stamp1"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+  </div>
+
+  <div id="bottom-right" class="container">
+    <div class="stamp stamp1"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+  </div>
+
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="examples.js"></script>
+<script>
+  new Packery( '#top-right', {
+    itemSelector: '.item',
+    stamp: '.stamp',
+    originLeft: false
+  });
+
+  new Packery( '#bottom-left', {
+    itemSelector: '.item',
+    stamp: '.stamp',
+    originTop: false
+  });
+
+  ( function() {
+    var pckry = new Packery( '#bottom-right', {
+      itemSelector: '.item',
+      stamp: '.stamp',
+      originLeft: false,
+      originTop: false
+    });
+
+    for ( var i=0, len = pckry.items.length; i < len; i++ ) {
+      var item = pckry.items[i];
+      var draggie = new Draggabilly( item.element );
+      pckry.bindDraggabillyEvents( draggie );
+    }
+
+  })();
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/requirejs/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>require js</title>
+
+  <link rel="stylesheet" href="../css/examples.css" />
+  <script data-main="main" src="https://unpkg.com/requirejs@2.1/require.js"></script>
+  <!-- <script data-main="main" src="require.js"></script> -->
+
+</head>
+<body>
+
+  <h1>require js</h1>
+
+  <div id="basic" class="container">
+    <div class="item w4"></div>
+    <div class="item h4"></div>
+    <div class="item w2"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item w4"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item w2 h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w4"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+</body>
+</html>

node_modules/packery/sandbox/requirejs/main.js

@@ -0,0 +1,32 @@
+/*global requirejs: false*/
+
+/*
+// bower components
+requirejs.config({
+  baseUrl: '../../bower_components'
+});
+
+requirejs( [ '../../js/packery' ], function( Packery ) {
+
+  new Packery( document.querySelector('#basic') );
+
+});
+// */
+
+/*
+// packery.pkgd.js
+requirejs( [
+  './../dist/packery.pkgd.js',
+  'require'
+], function( pkgd, require ) {
+  require( ['packery/js/packery'], function ( Packery ) {
+    new Packery('#basic');
+  });
+});
+// */
+
+requirejs( [
+  '../../dist/packery.pkgd.js'
+], function( Packery ) {
+  new Packery('#basic');
+});

node_modules/packery/sandbox/save-positions.html

@@ -0,0 +1,163 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>save positions</title>
+
+<style>
+* { box-sizing: border-box; }
+
+/* force scrollbar */
+html { overflow-y: scroll; }
+
+.grid {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.grid.is-img-loaded {
+  opacity: 1;
+}
+
+.grid-sizer, .grid-item {
+  width: 20%;
+}
+
+.grid-item {
+  float: left;
+}
+
+.grid-item.is-dragging,
+.grid-item.is-positioning-post-drag {
+  opacity: 0.8;
+  z-index: 2;
+}
+
+.grid-item--width2 {
+  width: 40%;
+}
+
+.grid-item img {
+  display: block;
+  max-width: 100%;
+}
+
+.packery-drop-placeholder {
+  background: white;
+  opacity: 0.5;
+  outline: 3px dashed black;
+  outline-offset: -6px;
+  -webkit-transition: -webkit-transform 0.2s;
+  transition: transform 0.2s;
+}
+
+</style>
+
+</head>
+<body>
+
+  <h1>save positions</h1>
+
+<div class="grid">
+  <div class="grid-sizer"></div>
+  <div class="grid-item grid-item--width2" data-item-id="1"><img src="http://i.imgur.com/9xYjgCk.jpg" /></div>
+  <div class="grid-item" data-item-id="2"><img src="http://i.imgur.com/OZmQIVL.jpg" /></div>
+  <div class="grid-item" data-item-id="3"><img src="http://i.imgur.com/lBKi66i.jpg" /></div>
+  <div class="grid-item" data-item-id="4"><img src="http://i.imgur.com/LFelADP.jpg" /></div>
+  <div class="grid-item" data-item-id="5"><img src="http://i.imgur.com/ERMbVdn.jpg" /></div>
+  <div class="grid-item" data-item-id="6"><img src="http://i.imgur.com/4ifgQaR.jpg" /></div>
+  <div class="grid-item grid-item--width2" data-item-id="7"><img src="http://i.imgur.com/8lEJtbg.jpg" /></div>
+  <div class="grid-item" data-item-id="8"><img src="http://i.imgur.com/LkmcILl.jpg" /></div>
+  <div class="grid-item" data-item-id="9"><img src="http://i.imgur.com/aboaFoB.jpg" /></div>
+  <div class="grid-item" data-item-id="10"><img src="http://i.imgur.com/PgmEBSB.jpg" /></div>
+  <div class="grid-item" data-item-id="11"><img src="http://i.imgur.com/bAZWoqx.jpg" /></div>
+  <div class="grid-item" data-item-id="12"><img src="http://i.imgur.com/UORFJ3w.jpg" /></div>
+  <div class="grid-item" data-item-id="13"><img src="http://i.imgur.com/hODreXI.jpg" /></div>
+  <div class="grid-item" data-item-id="14"><img src="http://i.imgur.com/bwy74ok.jpg" /></div>
+  <div class="grid-item" data-item-id="15"><img src="http://i.imgur.com/q9zO6tw.jpg" /></div>
+  <div class="grid-item" data-item-id="16"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></div>
+  <div class="grid-item" data-item-id="17"><img src="http://i.imgur.com/4O7U1Ob.jpg" /></div>
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
+
+
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
+
+<script>
+
+var grid = document.querySelector('.grid');
+var pckry = new Packery( grid, {
+  itemSelector: '.grid-item',
+  columnWidth: '.grid-sizer',
+  transitionDuration: '0.3s',
+  shiftPercentResize: true,
+  percentPosition: true,
+  initLayout: false
+});
+
+var itemElems = grid.querySelectorAll('.grid-item');
+
+for ( var i=0; i < itemElems.length; i++ ) {
+  var itemElem = itemElems[i];
+  var draggie = new Draggabilly( itemElem );
+  pckry.bindDraggabillyEvents( draggie );
+}
+
+imagesLoaded( grid, function() {
+  grid.classList.add('is-img-loaded');
+  var itemPositions = localStorage.getItem( 'itemsShiftPositions' );
+  if ( itemPositions ) {
+    itemPositions = JSON.parse( itemPositions );
+    pckry._resetLayout();
+    // set item order and horizontal position from saved positions
+    pckry.items = itemPositions.map( function( itemPosition ) {
+      var itemElem = grid.querySelector('[data-item-id="' + itemPosition.id  + '"]');
+      var item = pckry.getItem( itemElem );
+      item.rect.x = parseFloat( itemPosition.x ) * pckry.packer.width;
+      return item;
+    });
+    pckry.shiftLayout();
+  } else {
+    // if no initial positions, run packery layout
+    pckry.layout();
+  }
+
+});
+
+pckry.on( 'layoutComplete', savePositions );
+pckry.on( 'dragItemPositioned', savePositions );
+
+function savePositions() {
+  var positions = getItemsShiftPositions();
+  localStorage.setItem( 'itemsShiftPositions', JSON.stringify( positions ) );
+}
+
+function getItemsShiftPositions() {
+  return pckry.items.map( function( item ) {
+    return {
+      id: item.element.getAttribute('data-item-id'),
+      x: item.rect.x / pckry.packer.width
+    }
+  });
+}
+
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/shift-drag-uneven.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>shift drag uneven</title>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+.grid {
+  background: #EEE;
+  width: 400px;
+}
+
+.grid-item {
+  width: 100px;
+  height: 60px;
+  border: 1px solid;
+  background: #8BE;
+}
+
+.grid-item.is-dragging,
+.grid-item.is-positioning-post-drag {
+  z-index: 2;
+  opacity: 0.8;
+}
+
+.grid-item.w2 { width: 200px; }
+.grid-item.h2 { height: 100px; }
+.grid-item.h3 { height: 140px; }
+.grid-item.h4 { height: 240px; }
+</style>
+
+</head>
+<body>
+
+  <h1>shift drag uneven</h1>
+
+<p><button class="button-layout">Layout</button></p>
+
+<div class="grid">
+  <div class="grid-item w2 h4"></div>
+  <div class="grid-item w2 h2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item h3"></div>
+  <div class="grid-item h2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item w2 h3"></div>
+  <div class="grid-item h2"></div>
+  <div class="grid-item h3"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item h2"></div>
+  <div class="grid-item w2 h2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script>
+var gridElem = document.querySelector('.grid');
+var pckry = new Packery( gridElem, {
+  columnWidth: 100,
+  // gutter: 20
+});
+
+var itemElems = gridElem.querySelectorAll('.grid-item');
+
+for ( var i=0; i < itemElems.length; i++ ) {
+  var itemElem = itemElems[i];
+  var draggie = new Draggabilly( itemElem );
+  pckry.bindDraggabillyEvents( draggie );
+}
+
+document.querySelector('.button-layout').onclick = function() {
+  pckry.layout();
+};
+
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/shift-drag.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>shift drag</title>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+.grid {
+  background: #EEE;
+  width: 400px;
+}
+
+.grid-item {
+  width: 100px;
+  height: 100px;
+  border: 1px solid;
+  background: #8BE;
+}
+
+.grid-item.is-dragging,
+.grid-item.is-positioning-post-drag {
+  z-index: 2;
+  opacity: 0.8;
+}
+
+.grid-item.w2 { width: 200px; }
+.grid-item.h2 { height: 200px; }
+</style>
+
+</head>
+<body>
+
+  <h1>shift drag</h1>
+
+<div class="grid">
+  <div class="grid-item w2 h2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item h2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item w2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item h2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item w2"></div>
+  <div class="grid-item w2 h2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script>
+var gridElem = document.querySelector('.grid');
+var pckry = new Packery( gridElem, {
+  columnWidth: 100,
+  rowHeight: 100
+});
+
+var itemElems = gridElem.querySelectorAll('.grid-item');
+
+for ( var i=0; i < itemElems.length; i++ ) {
+  var itemElem = itemElems[i];
+  var draggie = new Draggabilly( itemElem );
+  pckry.bindDraggabillyEvents( draggie );
+}
+
+</script>
+
+</body>
+</html>

node_modules/packery/sandbox/single.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>single</title>
+
+<style>
+* { box-sizing: border-box; }
+
+.grid {
+  background: #DDD;
+  width: 210px;
+}
+
+.grid-item {
+  width: 46px;
+  height: 46px;
+  margin: 2px;
+  border: 1px solid;
+  background: #09F;
+}
+
+.grid-item--width2 {
+  width: 96px;
+}
+</style>
+
+</head>
+<body>
+
+  <h1>single</h1>
+
+<div class="grid">
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item grid-item--width2"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
+
+<script>
+
+var pckry = new Packery('.grid', {
+  columnWidth: 50
+});
+
+pckry.getItemElements().forEach( function( itemElem ) {
+  var draggie = new Draggabilly( itemElem );
+  pckry.bindDraggabillyEvents( draggie );
+});
+
+</script>
+
+</body>
+</html>

node_modules/packery/test/.jshintrc

@@ -0,0 +1,11 @@
+{
+  "browser": true,
+  "undef": true,
+  "unused": true,
+  "globals": {
+    "appendRandomSizedItems": true,
+    "gimmeAnItemElement": true,
+    "Packery": false,
+    "QUnit": false
+  }
+}

node_modules/packery/test/helpers.js

@@ -0,0 +1,35 @@
+( function( window ) {
+
+'use strict';
+
+window.appendRandomSizedItems = function( container ) {
+  var frag = document.createDocumentFragment();
+  var item;
+  for ( var i=0; i < 9; i++ ) {
+    item = document.createElement('div');
+    item.className = 'item';
+    var w = Math.floor( Math.random() * Math.random() * 70 ) + 10;
+    var h = Math.floor( Math.random() * Math.random() * 70 ) + 10;
+    item.style.width  = w + 'px';
+    item.style.height = h + 'px';
+    frag.appendChild( item );
+  }
+
+  // last one isn't random, but is needed for checking
+  // bigger than colum width and stuff
+  item = document.createElement('div');
+  item.className = 'item';
+  item.style.width  = '72px';
+  item.style.height = '25px';
+  frag.appendChild( item );
+
+  container.appendChild( frag );
+};
+
+window.gimmeAnItemElement = function() {
+  var elem = document.createElement('div');
+  elem.className = 'item';
+  return elem;
+};
+
+})( window );

node_modules/packery/test/index.html

@@ -0,0 +1,321 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Packery tests</title>
+
+  <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />
+  <link rel="stylesheet" href="test.css" />
+
+  <script src="../bower_components/qunit/qunit/qunit.js"></script>
+
+</head>
+<body>
+
+  <h1>Packery tests</h1>
+
+  <div id="qunit"></div>
+
+  <div id="empty" class="container"></div>
+
+  <div id="default">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="filtered" class="container">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="foobar"></div>
+  </div>
+
+  <div id="found" class="container">
+    <div><div class="item w2"></div></div>
+    <div><div class="item h2"></div></div>
+    <div><div class="item w2"></div></div>
+    <div><div class="item"></div></div>
+  </div>
+
+  <div id="filter-found" class="container">
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="foobar"></div>
+    <div><div class="item w2"></div></div>
+    <div><div class="item"></div></div>
+  </div>
+
+  <div id="layout" class="container">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <h2>Layout extra big</h2>
+
+  <div id="layout-extra-big" class="container">
+    <div class="item w5"></div>
+    <div class="item w2"></div>
+    <div class="item w5"></div>
+    <div class="item w2"></div>
+    <div class="item w2"></div>
+  </div>
+
+  <h2>Consecutive</h2>
+
+  <div id="consecutive" class="container">
+    <div class="item i0"></div>
+    <div class="item i1"></div>
+    <div class="item i2"></div>
+    <div class="item i3"></div>
+  </div>
+
+  <div id="gridded1" class="container gridded">
+    <div class="grid-sizer"></div>
+    <div class="gutter-sizer"></div>
+  </div>
+
+  <div id="gridded2" class="container gridded">
+    <div class="grid-sizer"></div>
+    <div class="gutter-sizer"></div>
+  </div>
+
+  <div id="container-size" class="container">
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <div id="add-remove" class="container">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item"></div>
+  </div>
+
+  <div id="stamped1" class="container has-stamps place-stamps">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="stamp stamp1"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item"></div>
+  </div>
+
+  <div id="stamped2" class="container has-stamps">
+    <div class="item stamp stamp1"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item stamp stamp2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <div id="stamped3" class="container has-stamps place-stamps">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="stamp stamp1"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item"></div>
+  </div>
+
+  <div id="stamped4" class="container has-stamps place-stamps">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="stamp stamp1"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item"></div>
+  </div>
+
+  <h2>Placed borders</h2>
+
+  <div id="stamped-borders" class="container has-stamps">
+    <div class="stamp stamp1"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <h2>Adding</h2>
+
+  <div id="adding" class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <h2>Prepend</h2>
+
+  <div id="prepend" class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <h2>Draggable</h2>
+
+  <div id="draggable" class="container">
+    <div class="item i0"></div>
+    <div class="item i1"></div>
+    <div class="item i2"></div>
+    <div class="item i3 dragger"></div>
+    <div class="item i4"></div>
+    <div class="item i5"></div>
+    <div class="item i6"></div>
+    <div class="item i7"></div>
+  </div>
+
+  <h2>Fitting</h2>
+
+  <div id="fitting" class="container">
+    <div class="item i0"></div>
+    <div class="item i1"></div>
+    <div class="item i2"></div>
+    <div class="item i3"></div>
+    <div class="item i4"></div>
+    <div class="item i5"></div>
+    <div class="item i6"></div>
+    <div class="item i7"></div>
+  </div>
+
+  <h2>Declarative</h2>
+
+  <div id="declarative" class="container js-packery">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <!-- wrong quote marks for JSON -->
+  <div id="declarative-bad-json" class="container js-packery" data-packery-options="{ 'columnWidth': 30 }">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <div id="declarative-good-json" class="container js-packery" data-packery-options='{ "columnWidth": 25, "rowHeight": 30, "transitionDuration": "1.2s", "isResizable": false }'>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <h2>jQuery</h2>
+
+  <div id="jquery" class="container">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <h2>isInitLayout option</h2>
+  <div id="is-init-layout" class="container">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div>
+
+  <!-- <h2>isLayoutInstant option</h2>
+  <div id="is-layout-instant" class="container">
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item w2"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+  </div> -->
+
+  <div id="hidden-items" class="container">
+    <div class="item w2 h2 hidden"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+
+  <h2>Sub-pixel fit</h2>
+
+  <div id="sub-pixel-fit" class="container">
+    <div class="grid-sizer"></div>
+    <div class="item"></div>
+    <div class="item w2"></div>
+    <div class="item w2"></div>
+  </div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/jquery/dist/jquery.min.js"></script>
+<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script src="helpers.js"></script>
+
+<script src="unit/test-rect.js"></script>
+<script src="unit/test-packer.js"></script>
+
+<script src="unit/basics.js"></script>
+<script src="unit/defaults-empty.js"></script>
+<script src="unit/get-items.js"></script>
+<script src="unit/layout.js"></script>
+<script src="unit/layout-extra-big.js"></script>
+<script src="unit/consecutive.js"></script>
+<script src="unit/grid.js"></script>
+<script src="unit/container-size.js"></script>
+<script src="unit/remove.js"></script>
+<script src="unit/stamped.js"></script>
+<script src="unit/add-items.js"></script>
+<script src="unit/prepend.js"></script>
+<script src="unit/draggable.js"></script>
+<script src="unit/fit.js"></script>
+<script src="unit/jquery-plugin.js"></script>
+<script src="unit/declarative.js"></script>
+<script src="unit/is-init-layout.js"></script>
+<script src="unit/hidden-items.js"></script>
+<script src="unit/sub-pixel-fit.js"></script>
+
+</body>
+</html>

node_modules/packery/test/test.css

@@ -0,0 +1,113 @@
+body {
+  font-family: sans-serif;
+}
+
+.container {
+  width: 80px;
+  margin-bottom: 20px;
+  background: #EEE;
+}
+
+.container:after {
+  content: '';
+  display: table;
+}
+
+.item {
+  float: left;
+  width:  18px;
+  height: 18px;
+  margin: 1px;
+  background: #444;
+}
+
+.item.w2 { width:  38px; }
+.item.h2 { height: 38px; }
+.item.w4 { width:  78px; }
+.item.h4 { height: 78px; }
+.item.w5 { width:  98px; }
+
+.gridded .grid-sizer {
+  width: 30px;
+  height: 25px;
+}
+
+.gridded .gutter-sizer {
+  width: 10px;
+}
+
+.stamp {
+  background: red;
+}
+
+.has-stamps {
+  position: relative;
+}
+
+.place-stamps .stamp {
+  position: absolute;
+}
+
+.place-stamps .stamp1 {
+  width: 30px;
+  height: 25px;
+  left: 22px;
+  top: 10px;
+}
+
+.place-stamps .stamp2 {
+  width: 10px;
+  height: 45px;
+  left: 3px;
+  top: 30px;
+}
+
+#stamped2 .stamp1 {
+  position: relative;
+  left: 8px;
+  top: 8px;
+}
+
+#stamped2 .stamp2 {
+  position: absolute;
+  right: 8px;
+  top: 23px;
+}
+
+#stamped-borders {
+  border-left: 10px solid;
+  border-top: 15px solid;
+}
+
+#stamped-borders .stamp1 {
+  width: 50px;
+  height: 30px;
+}
+
+.dragger {
+  background: green;
+}
+
+/*#fitting {
+  position: absolute;
+  top: 0;
+}*/
+
+#hidden-items .hidden {
+  display: none;
+}
+
+#sub-pixel-fit {
+  width: 290px;
+}
+
+#sub-pixel-fit .item,
+#sub-pixel-fit .grid-sizer {
+  width: 20%;
+}
+
+#sub-pixel-fit .item {
+  margin: 0;
+}
+
+#sub-pixel-fit .item.w2 { width: 40%; }

node_modules/packery/test/unit/add-items.js

@@ -0,0 +1,34 @@
+QUnit.test( 'addItems', function( assert ) {
+  var container = document.querySelector('#adding');
+  var pckry = new Packery( container, {
+    itemSelector: '.item'
+  });
+
+  var elem = gimmeAnItemElement();
+  var items = pckry.addItems( elem );
+
+  assert.equal( items.length, 1, 'method return array of 1' );
+  assert.equal( pckry.items[2].element, elem, 'item was added, element matches' );
+  assert.equal( items[0] instanceof Packery.Item, true, 'item is instance of Packery.Item' );
+  assert.equal( pckry.items.length, 3, 'item added to items' );
+
+  // try it with an array
+  var elems = [ gimmeAnItemElement(), gimmeAnItemElement(), document.createElement('div') ];
+  items = pckry.addItems( elems );
+  assert.equal( items.length, 2, 'method return array of 2' );
+  assert.equal( pckry.items[3].element, elems[0], 'item was added, element matches' );
+  assert.equal( pckry.items.length, 5, 'two items added to items' );
+
+  // try it with HTMLCollection / NodeList
+  var fragment = document.createDocumentFragment();
+  fragment.appendChild( gimmeAnItemElement() );
+  fragment.appendChild( document.createElement('div') );
+  fragment.appendChild( gimmeAnItemElement() );
+
+  var divs = fragment.querySelectorAll('div');
+  items = pckry.addItems( divs );
+  assert.equal( items.length, 2, 'method return array of 2' );
+  assert.equal( pckry.items[5].element, divs[0], 'item was added, element matches' );
+  assert.equal( pckry.items.length, 7, 'two items added to items' );
+
+});

node_modules/packery/test/unit/basics.js

@@ -0,0 +1,14 @@
+QUnit.module('Packery');
+
+QUnit.test( 'basics', function( assert ) {
+  assert.equal( typeof Packery, 'function', 'Packery is a function' );
+  // TODO pckry should be null or something
+  var pckry1 = new Packery();
+  // console.log( pckry, typeof pckry );
+  assert.ok( !pckry1._isLayoutInited, 'packery not inited on undefined' );
+
+  // var pckry2 = new Packery({});
+  // console.log( pckry, typeof pckry );
+  // FIXME Outlayer should throw error up top
+  // assert.ok( !pckry2._isLayoutInited, 'packery not inited on object' );
+});

node_modules/packery/test/unit/consecutive.js

@@ -0,0 +1,36 @@
+QUnit.test( 'consecutive', function( assert ) {
+  var container = document.querySelector('#consecutive');
+  var pckry = new Packery( container );
+
+  var i0 = container.querySelector('.i0');
+  var i1 = container.querySelector('.i1');
+  var i3 = container.querySelector('.i3');
+  i1.style.width = '28px';
+  i1.style.height = '28px';
+  i1.style.background = 'blue';
+
+  var done = assert.async();
+
+  pckry.once( 'layoutComplete', function() {
+    assert.ok( true, 'layoutComplete triggered' );
+    assert.equal( i3.style.left, '0px', 'i3.style.left' );
+    assert.equal( i3.style.top, '20px', 'i3.style.top' );
+    setTimeout( fit1 );
+  });
+
+  pckry.layout();
+
+  function fit1() {
+    pckry.once( 'layoutComplete', function() {
+      assert.equal( i3.style.left, '60px', 'i3.style.left' );
+      assert.equal( i3.style.top, '30px', 'i3.style.top' );
+      // all done
+      done();
+    });
+    i0.style.width = '38px';
+    i0.style.height = '38px';
+    i0.style.background = 'orange';
+    pckry.layout();
+  }
+
+});

node_modules/packery/test/unit/container-size.js

@@ -0,0 +1,24 @@
+QUnit.test( 'container size', function( assert ) {
+  var container = document.querySelector('#container-size');
+  var pckry = new Packery( container );
+  assert.equal( container.style.height, '40px', 'default height' );
+
+  pckry.options.gutter = 4;
+  pckry._getMeasurements();
+  pckry.layout();
+  assert.equal( container.style.height, '40px', 'added gutter, height same' );
+
+  // addPaddingBorders() {
+  container.style.padding = '1px 2px 3px 4px';
+  container.style.borderStyle = 'solid';
+  container.style.borderWidth = '1px 2px 3px 4px';
+  pckry.layout();
+  assert.equal( container.style.height, '40px', 'add padding, height same' );
+
+  // border box
+  container.style.WebkitBoxSizing = 'border-box';
+  container.style.MozBoxSizing = 'border-box';
+  container.style.boxSizing = 'border-box';
+  pckry.layout();
+  assert.equal( container.style.height, '48px', 'border-box, height + padding + border' );
+});

node_modules/packery/test/unit/declarative.js

@@ -0,0 +1,29 @@
+QUnit.test( 'declarative', function( assert ) {
+
+  var $ = window.jQuery;
+
+  // no data-packery-options
+  var container1 = document.querySelector('#declarative');
+  var pckry1 = Packery.data( container1 );
+  assert.ok( pckry1 instanceof Packery, 'Packery instance retrieved from element' );
+  assert.deepEqual( pckry1.options, Packery.defaults, 'options match defaults' );
+  assert.ok( pckry1._isLayoutInited, 'Packer was initialized' );
+
+  // has data-packery-options, but bad JSON
+  var container2 = document.querySelector('#declarative-bad-json');
+  var pckry2 = Packery.data( container2 );
+  assert.ok( !pckry2, 'bad JSON in data-packery-options does not init Packery' );
+  assert.ok( !container2.packeryGUID, 'no expando property on element' );
+
+  // has good data-packery-options
+  var container3 = document.querySelector('#declarative-good-json');
+  var pckry3 = Packery.data( container3 );
+  assert.ok( pckry3 instanceof Packery, 'Packery instance retrieved from element, with good JSON in data-packery-options' );
+  assert.strictEqual( pckry3.options.columnWidth, 25, 'columnWidth option was set' );
+  assert.strictEqual( pckry3.options.rowHeight, 30, 'rowHeight option was set' );
+  assert.strictEqual( pckry3.options.transitionDuration, '1.2s', 'transitionDuration option was set' );
+  assert.strictEqual( pckry3.options.isResizable, false, 'isResizable option was set' );
+
+  assert.equal( $.data( container3, 'packery' ), pckry3, '$.data( elem, "packery") returns Packery instance' );
+
+});

node_modules/packery/test/unit/defaults-empty.js

@@ -0,0 +1,21 @@
+QUnit.test( 'defaults / empty', function( assert ) {
+  var empty = document.querySelector('#empty');
+  var pckry = new Packery( empty );
+  var done = assert.async();
+
+  assert.deepEqual( pckry.options, Packery.defaults, 'default options match prototype' );
+  assert.equal( pckry.items.length, 0, 'zero items' );
+  assert.equal( pckry.stamps.length, 0, 'zero stamped elements' );
+  assert.equal( Packery.data( empty ), pckry, 'data method returns instance' );
+  assert.ok( pckry.isResizeBound, 'isResizeBound' );
+
+  pckry.once( 'layoutComplete', function( items ) {
+    assert.ok( true, 'layoutComplete triggered with no items' );
+    assert.equal( items.length, 0, 'no items' );
+    done();
+  });
+
+  // add gutter, to check that container size doesn't get negative number
+  pckry.options.gutter = 20;
+  pckry.layout();
+});

node_modules/packery/test/unit/draggable.js

@@ -0,0 +1,84 @@
+QUnit.test( 'draggable', function( assert ) {
+  var container = document.querySelector('#draggable');
+  var itemElems = container.querySelectorAll('.item');
+  var dragElem = container.querySelector('.dragger');
+
+  var pckry = new Packery( container, {
+    transitionDuration: '0.2s'
+  });
+
+  var done = assert.async();
+
+  function simulateDrag( x, y ) {
+    pckry.itemDragStart( dragElem );
+    pckry.itemDragMove( dragElem, x, y );
+    pckry.itemDragEnd( dragElem );
+  }
+
+  function checkItemPosition( itemElem, x, y, message ) {
+    var actual = itemElem.style.left + ' ' + itemElem.style.top;
+    var expected = x + 'px ' + y + 'px';
+    message = message || 'item position';
+    assert.equal( actual, expected, message );
+  }
+
+  // simulate drag to middle
+  pckry.once( 'dragItemPositioned', function() {
+    assert.ok( true, 'dragItemPositioned did trigger, 4th item moved to 35, 15' );
+    checkItemPosition( itemElems[0], 0, 0, '1st item' );
+    checkItemPosition( itemElems[1], 20, 0, '2nd item' );
+    checkItemPosition( itemElems[2], 40, 0, '3rd item' );
+    checkItemPosition( itemElems[6], 40, 40, '7th item, moved down below dragged item' );
+    checkItemPosition( itemElems[7], 60, 0, '8th item, moved up' );
+    checkItemPosition( dragElem, 40, 20, 'drag item, 2nd row, 3rd column' );
+    assert.equal( pckry.items[6].element, dragElem, 'dragged elem in now 7th in items' );
+    // HACK setTimeout because of Packery bug
+    setTimeout( dragOutside );
+  });
+
+  simulateDrag( 35, 15 );
+
+  function dragOutside() {
+    pckry.once( 'dragItemPositioned', function() {
+      assert.ok( true, 'dragItemPositioned event did trigger' );
+      checkItemPosition( dragElem, 60, 0, 'drag item, 1st row, 4th column' );
+      checkItemPosition( itemElems[4], 0, 20, '5th item, did not move' );
+      checkItemPosition( itemElems[6], 40, 20, '7th item, moved back up' );
+      checkItemPosition( itemElems[7], 60, 20, '8th item, moved back down' );
+      assert.equal( pckry.items[3].element, dragElem, 'dragged elem in now 4th in items' );
+
+      setTimeout( dragWithGrid );
+    });
+
+    simulateDrag( 300, -60 );
+  }
+
+  function dragWithGrid() {
+    pckry.options.columnWidth = 25;
+    pckry.options.rowHeight = 25;
+    // disable transition, layout, re-enable transition
+    pckry.options.transitionDuration = 0;
+    pckry.layout();
+    pckry.options.transitionDuration = '0.2s';
+
+    pckry.once( 'dragItemPositioned', function() {
+      checkItemPosition( dragElem, 25, 25, 'drag item, 2nd row, 2nd column' );
+      checkItemPosition( itemElems[4], 25, 50, '5th item, 3rd row, 2nd column, moved down' );
+      checkItemPosition( itemElems[5], 50, 25, '6th item, 2nd row, 3rd column, did not move' );
+      checkItemPosition( itemElems[6], 0, 25, '7th item, 2nd row, 1st column, moved up' );
+      checkItemPosition( itemElems[7], 25, 75, '7th item, 4th row, 2nd column, moved down' );
+
+      setTimeout( dragOutsideWithGrid );
+    });
+    simulateDrag( 35, 35 );
+  }
+
+  function dragOutsideWithGrid() {
+    pckry.once( 'dragItemPositioned', function() {
+      checkItemPosition( dragElem, 50, 0, 'dragged, top right corner in grid' );
+      done();
+    });
+    simulateDrag( 300, -30 );
+  }
+
+});

node_modules/packery/test/unit/fit.js

@@ -0,0 +1,164 @@
+QUnit.test( '.fit()', function( assert ) {
+  var container = document.querySelector('#fitting');
+  var pckry = new Packery( container, {
+    transitionDuration: '0.2s'
+  });
+
+  var done = assert.async();
+
+  var elem1 = container.querySelector('.i1');
+  var elem2 = container.querySelector('.i2');
+  var elem3 = container.querySelector('.i3');
+  var elem5 = container.querySelector('.i5');
+  var elem6 = container.querySelector('.i6');
+  var item3 = pckry.getItem( elem3 );
+
+  function checkItemPosition( itemElem, x, y, message ) {
+    var actual = itemElem.style.left + ' ' + itemElem.style.top;
+    var expected = x + 'px ' + y + 'px';
+    message = message || 'item position';
+    assert.equal( actual, expected, message );
+  }
+
+  // expand item3
+  elem3.style.width = '48px';
+  elem3.style.height = '28px';
+  elem3.style.background = 'blue';
+
+  // quickie async
+  var isFit, isLaidOut;
+  function resetAsync() {
+    isFit = false;
+    isLaidOut = false;
+  }
+
+  // -------------------------- fit -------------------------- //
+
+  function ready1() {
+    if ( !isFit || !isLaidOut ) {
+      return;
+    }
+    checkItemPosition( elem1, 20, 30, 'elem1 shifted down' );
+    checkItemPosition( elem2, 40, 30, 'elem2 shifted down' );
+    checkItemPosition( elem5, 20, 50, 'elem5 shifted down, 2nd row' );
+    resetAsync();
+    // HACK setTimeout for Packery bug
+    setTimeout( fit2 );
+  }
+
+  pckry.once( 'fitComplete', function( item ) {
+    assert.ok( true, 'fitComplete event emitted' );
+    assert.equal( item, item3, 'item argument returned' );
+    checkItemPosition( elem3, 20, 0, 'fit elem3 shifted into 2nd spot' );
+    isFit = true;
+    ready1();
+  });
+
+  pckry.once( 'layoutComplete', function() {
+    assert.ok( true, 'layoutComplete event emitted' );
+    isLaidOut = true;
+    ready1();
+  });
+
+  // fit it
+  pckry.fit( elem3 );
+
+  // -------------------------- fit into spot -------------------------- //
+
+  function ready2() {
+    if ( !isFit || !isLaidOut ) {
+      return;
+    }
+    resetAsync();
+
+    setTimeout( fit3 );
+  }
+
+  function fit2() {
+    // reset small size
+    elem3.style.width = '18px';
+    elem3.style.height = '18px';
+
+    pckry.once( 'fitComplete', function() {
+      assert.ok( true, 'fitComplete event emitted' );
+      checkItemPosition( elem3, 40, 20, 'fit item in 40, 20' );
+      isFit = true;
+      ready2();
+    });
+
+    pckry.once( 'layoutComplete', function() {
+      assert.ok( true, 'layoutComplete event emitted' );
+      checkItemPosition( elem3, 40, 20, 'fit item in 40, 20' );
+      checkItemPosition( elem1, 20, 0, 'elem1 shifted up' );
+      checkItemPosition( elem2, 40, 0, 'elem2 shifted up' );
+      checkItemPosition( elem5, 20, 20, 'elem5 shifted up' );
+      checkItemPosition( elem6, 40, 40, 'elem6 shifted down' );
+      isLaidOut = true;
+      ready2();
+    });
+
+    // fit to spot
+    pckry.fit( elem3, 40, 20 );
+  }
+
+  // -------------------------- fit outside container -------------------------- //
+
+  function ready3() {
+    if ( !isFit || !isLaidOut ) {
+      return;
+    }
+    resetAsync();
+
+    setTimeout( fit4 );
+  }
+
+  function fit3() {
+    pckry.once( 'fitComplete', function() {
+      checkItemPosition( elem3, 40, 40, 'fit elem in 3rd row, 3rd column' );
+      isFit = true;
+      ready3();
+    });
+    pckry.once( 'layoutComplete', function() {
+      isLaidOut = true;
+      ready3();
+    });
+
+    // try to position item outside container
+    pckry.fit( elem3, 120, 120 );
+  }
+
+  // -------------------------- columnWidth & rowHeight -------------------------- //
+
+  // fit with columnWidth and rowHeight
+  function fit4() {
+    pckry.options.columnWidth = 25;
+    pckry.options.rowHeight = 30;
+    // disable transition, trigger layout, re-enable transition
+    pckry.options.transitionDuration = 0;
+    pckry.layout();
+    pckry.options.transitionDuration = '0.2s';
+
+    function ready4() {
+      if ( !isFit || !isLaidOut ) {
+        return;
+      }
+      done();
+    }
+
+    pckry.on( 'fitComplete', function() {
+      assert.ok( true, 'fitComplete event emitted' );
+      checkItemPosition( elem3, 50, 30, 'fit item, 2nd row, 3rd column' );
+      isFit = true;
+      ready4();
+    });
+
+    pckry.on( 'layoutComplete', function() {
+      checkItemPosition( elem5, 50, 60, 'elem5 shifted down' );
+      isLaidOut = true;
+      ready4();
+    });
+
+    pckry.fit( elem3, 55, 28 );
+  }
+
+});

node_modules/packery/test/unit/get-items.js

@@ -0,0 +1,24 @@
+QUnit.test( 'getItems', function( assert ) {
+  var defaultElem = document.querySelector('#default');
+  var defaultPckry = new Packery( defaultElem );
+
+  var filtered = document.querySelector('#filtered');
+  var filteredPckry = new Packery( filtered, {
+    itemSelector: '.item'
+  });
+
+  var found = document.querySelector('#found');
+  var foundPckry = new Packery( found, {
+    itemSelector: '.item'
+  });
+
+  var filterFound = document.querySelector('#filter-found');
+  var filterFoundPckry = new Packery( filterFound, {
+    itemSelector: '.item'
+  });
+
+  assert.equal( defaultPckry.items.length, defaultElem.children.length, 'no itemSelector, all children' );
+  assert.equal( filteredPckry.items.length, 6, 'filtered, itemSelector = .item, not all children' );
+  assert.equal( foundPckry.items.length, 4, 'found itemSelector = .item, querySelectoring' );
+  assert.equal( filterFoundPckry.items.length, 5, 'filter found' );
+});

node_modules/packery/test/unit/grid.js

@@ -0,0 +1,81 @@
+QUnit.test( 'layout with columnWidth and rowHeight', function( assert ) {
+  var container = document.querySelector('#gridded1');
+  appendRandomSizedItems( container );
+
+  var pckry = new Packery( container, {
+    itemSelector: '.item',
+    columnWidth: 25,
+    rowHeight: 30
+  });
+
+  var done = assert.async();
+
+  function checkPackeryGrid() {
+    var colW = pckry.columnWidth + pckry.gutter;
+    var rowH = pckry.rowHeight + pckry.gutter;
+    for ( var i=0, len = pckry.items.length; i < len; i++ ) {
+      var elem = pckry.items[i].element;
+      var x = parseInt( elem.style.left, 10 );
+      var y = parseInt( elem.style.top, 10 );
+      assert.equal( x % colW, 0, 'item ' + i + ' x position is multiple of columnWidth' );
+      assert.equal( y % rowH, 0, 'item ' + i + ' y position is multiple of rowHeight' );
+    }
+  }
+
+  assert.equal( pckry.options.columnWidth, 25, 'columnWidth option is set' );
+  assert.equal( pckry.options.rowHeight, 30, 'rowHeight option is set' );
+  assert.equal( pckry.columnWidth, 25, 'columnWidth is set' );
+  assert.equal( pckry.rowHeight, 30, 'rowHeight is set' );
+  checkPackeryGrid( pckry );
+
+  var gridSizer = container.querySelector('.grid-sizer');
+
+  pckry.options.columnWidth = gridSizer;
+  pckry.options.rowHeight = gridSizer;
+  pckry.once( 'layoutComplete', function() {
+    checkPackeryGrid( pckry );
+    setTimeout( setGutter );
+  });
+
+  pckry.layout();
+
+  assert.equal( pckry.columnWidth, 30, 'columnWidth is set from element width, in px' );
+  assert.equal( pckry.rowHeight, 25, 'rowHeight is set from element height, in px' );
+
+  function setGutter() {
+    pckry.options.gutter = container.querySelector('.gutter-sizer');
+    pckry.once( 'layoutComplete', function() {
+      checkPackeryGrid( pckry );
+      setTimeout( setPercentageGrid );
+    });
+    pckry.layout();
+    assert.equal( pckry.gutter, 10, 'gutter set from element width, in px' );
+  }
+
+  function setPercentageGrid() {
+    gridSizer.style.width = '40%';
+    pckry.once( 'layoutComplete', function() {
+      checkPackeryGrid( pckry );
+      done();
+    });
+    pckry.layout();
+    assert.equal( pckry.columnWidth, 32, 'columnWidth is set from element width, in percentage' );
+  }
+
+});
+
+QUnit.test( 'columnWidth, rowHeight, gutter via selector', function( assert ) {
+  var container = document.querySelector('#gridded2');
+  appendRandomSizedItems( container );
+
+  var pckry = new Packery( container, {
+    itemSelector: '.item',
+    columnWidth: '.grid-sizer',
+    rowHeight: '.grid-sizer',
+    gutter: '.gutter-sizer'
+  });
+
+  assert.equal( pckry.columnWidth, 30, 'columnWidth' );
+  assert.equal( pckry.rowHeight, 25, 'rowHeight' );
+  assert.equal( pckry.gutter, 10, 'gutter' );
+});

node_modules/packery/test/unit/hidden-items.js

@@ -0,0 +1,8 @@
+QUnit.test( 'hidden items', function( assert ) {
+  var container = document.querySelector('#hidden-items');
+  var pckry = new Packery( container );
+  var itemElem1 = pckry.items[1].element;
+  var itemElem2 = pckry.items[2].element;
+  assert.equal( itemElem1.style.left, '0px', '2nd item on left' );
+  assert.equal( itemElem2.style.top, '0px', '3rd item on top' );
+});

node_modules/packery/test/unit/is-init-layout.js

@@ -0,0 +1,8 @@
+QUnit.test( 'initLayout', function( assert ) {
+  var container = document.querySelector('#is-init-layout');
+  var pckry = new Packery( container, {
+    initLayout: false
+  });
+  assert.ok( !pckry._isLayoutInited, 'packy is not layout initialized' );
+  assert.equal( container.children[0].style.left, '', 'no style on first child' );
+});

node_modules/packery/test/unit/jquery-plugin.js

@@ -0,0 +1,31 @@
+QUnit.test( 'jQuery plugin', function( assert ) {
+  var $ = window.jQuery;
+  var done = assert.async();
+  var $elem = $('#jquery');
+
+  assert.ok( $.fn.packery, '.packery is in jQuery.fn namespace' );
+  assert.equal( typeof $elem.packery, 'function', '.packery is a plugin' );
+  $elem.packery();
+  var pckry = $elem.data('packery');
+  assert.ok( pckry, 'packery instance via .data()' );
+  assert.equal( pckry, Packery.data( $elem[0] ), 'instance matches the same one via Packery.data()' );
+
+  var item4 = $elem.children()[4];
+  assert.equal( item4.style.left, '0px', '5th item left' );
+  assert.equal( item4.style.top, '40px', '5th item top' );
+
+  $elem.children().first().css({
+    width: 48,
+    height: 8,
+    background: 'blue'
+  });
+
+  $elem.packery( 'on', 'layoutComplete', function() {
+    assert.ok( true, 'layoutComplete event emitted' );
+    assert.equal( item4.style.left, '20px', '4th item left after layout' );
+    assert.equal( item4.style.top, '30px', '4th item top after layout' );
+    done();
+  });
+
+  $elem.packery();
+});

node_modules/packery/test/unit/layout-extra-big.js

@@ -0,0 +1,14 @@
+QUnit.test( 'layout extra big', function( assert ) {
+  var container = document.querySelector('#layout-extra-big');
+  var pckry = new Packery( container );
+
+  var elem1 = pckry.items[1].element;
+  var elem2 = pckry.items[2].element;
+  var elem3 = pckry.items[3].element;
+  var elem4 = pckry.items[4].element;
+
+  assert.equal( elem1.style.top, '20px', '2nd item top' );
+  assert.equal( elem2.style.top, '40px', '3rd item top' );
+  assert.equal( elem3.style.top, '20px', '4th item top' );
+  assert.equal( elem4.style.top, '60px', '5th item top' );
+});

node_modules/packery/test/unit/layout.js

@@ -0,0 +1,55 @@
+QUnit.test( 'layout', function( assert ) {
+
+  var done = assert.async();
+
+  function checkItemPosition( elem, left, top, message ) {
+    message = message || '';
+    var actual = elem.style.left + ' ' + elem.style.top;
+    var expected = left + 'px ' + top + 'px';
+    assert.equal( actual, expected, expected + ' ' + message );
+  }
+
+  var container = document.querySelector('#layout');
+  var pckry = new Packery( container );
+  var elem0 = pckry.items[0].element;
+  var elem1 = pckry.items[1].element;
+  var elem2 = pckry.items[2].element;
+  var elem3 = pckry.items[3].element;
+
+  checkItemPosition( elem0, 0, 0, 'first item' );
+  checkItemPosition( elem1, 40, 0, '2nd item' );
+  checkItemPosition( elem2, 0, 20, '3rd item' );
+  assert.equal( container.style.height, '60px', 'height set' );
+
+  // change size of elems to change layout
+  elem0.style.width = '18px';
+  elem3.style.height = '58px';
+  var items = pckry._getItemsForLayout( pckry.items );
+  pckry.once( 'layoutComplete', function( completeItems ) {
+    assert.equal( true, true, 'layoutComplete event did fire' );
+    assert.equal( completeItems.length, items.length, 'event-emitted items matches layout items length' );
+    assert.strictEqual( completeItems[0], items[0], 'event-emitted items has same first item' );
+    var len = completeItems.length - 1;
+    assert.strictEqual( completeItems[ len ], items[ len ], 'event-emitted items has same last item' );
+    checkItemPosition( elem1, 20, 0, '2nd item' );
+    checkItemPosition( elem2, 40, 0, '3nd item' );
+
+    setTimeout( checkHorizontal );
+  });
+
+  pckry.layout();
+  assert.equal( container.style.height, '80px', 'height set' );
+
+  function checkHorizontal() {
+    // disable transition
+    pckry.options.transitionDuration = 0;
+    pckry.options.horizontal = true;
+    pckry.layout();
+    checkItemPosition( elem0, 0, 0, 'horizontal, first item' );
+    checkItemPosition( elem1, 0, 20, 'horizontal, 2nd item' );
+    checkItemPosition( elem2, 0, 60, 'horizontal, 2nd item' );
+    assert.equal( container.style.width, '60px', 'width set' );
+
+    done();
+  }
+});

node_modules/packery/test/unit/prepend.js

@@ -0,0 +1,35 @@
+QUnit.test( 'prepend', function( assert ) {
+  var container = document.querySelector('#prepend');
+  var pckry = new Packery( container );
+  var itemElemA = pckry.items[0].element;
+  var itemElemB = pckry.items[1].element;
+  var itemElemC = gimmeAnItemElement();
+  itemElemC.style.background = 'orange';
+  var itemElemD = gimmeAnItemElement();
+  itemElemD.style.background = 'magenta';
+
+  var done = assert.async();
+  var ticks = 0;
+
+  pckry.on( 'layoutComplete', function() {
+    assert.ok( true, 'layoutComplete triggered' );
+    ticks++;
+    if ( ticks == 2 ) {
+      assert.ok( true, '2 layoutCompletes triggered' );
+      done();
+    }
+  });
+
+
+  var fragment = document.createDocumentFragment();
+  fragment.appendChild( itemElemC );
+  fragment.appendChild( itemElemD );
+  container.insertBefore( fragment, container.firstChild );
+  pckry.prepended([ itemElemC, itemElemD ]);
+
+  assert.equal( pckry.items[0].element, itemElemC, 'item C is first' );
+  assert.equal( pckry.items[1].element, itemElemD, 'item D is second' );
+  assert.equal( pckry.items[2].element, itemElemA, 'item A is third' );
+  assert.equal( pckry.items[3].element, itemElemB, 'item B is fourth' );
+
+});

node_modules/packery/test/unit/remove.js

@@ -0,0 +1,24 @@
+QUnit.test( 'remove', function( assert ) {
+  var done = assert.async();
+  var container = document.querySelector('#add-remove');
+  // packery starts with 4 items
+  var pckry = new Packery( container, {
+    itemSelector: '.item'
+  });
+  // remove two items
+  var w2Elems = container.querySelectorAll('.w2');
+  pckry.on( 'removeComplete', function( removedItems ) {
+    assert.equal( true, true, 'removeComplete event did fire' );
+    assert.equal( removedItems.length, w2Elems.length, 'remove elems length matches 2nd argument length' );
+    for ( var i=0, len = removedItems.length; i < len; i++ ) {
+      assert.equal( removedItems[i].element, w2Elems[i], 'removedItems element matches' );
+    }
+    assert.equal( container.children.length, 2, 'elements removed from DOM' );
+    assert.equal( container.querySelectorAll('.w2').length, 0, 'matched elements were removed' );
+    done();
+  });
+
+  pckry.remove( w2Elems );
+  assert.equal( pckry.items.length, 2, 'items removed from Packery instance' );
+
+});

node_modules/packery/test/unit/stamped.js

@@ -0,0 +1,124 @@
+QUnit.test( 'stamped1', function( assert ) {
+  var container = document.querySelector('#stamped1');
+  var stamps = container.querySelectorAll('.stamp');
+  var pckry = new Packery( container, {
+    itemSelector: '.item',
+    stamp: stamps
+  });
+
+  assert.equal( pckry.stamps.length, 2, '2 stamped elements' );
+  var elem0 = pckry.items[0].element;
+  assert.equal( elem0.style.left, '0px', '1st item left' );
+  assert.equal( elem0.style.top, '0px', '1st item top' );
+  var elem1 = pckry.items[1].element;
+  assert.equal( elem1.style.left, '52px', '2nd item left' );
+  assert.equal( elem1.style.top, '0px', '2nd item top' );
+  var elem2 = pckry.items[2].element;
+  assert.equal( elem2.style.left, '52px', '3rd item left' );
+  assert.equal( elem2.style.top, '20px', '3rd item top' );
+  var elem3 = pckry.items[3].element;
+  assert.equal( elem3.style.left, '13px', '4th item left' );
+  assert.equal( elem3.style.top, '35px', '4th item top' );
+
+  assert.equal( container.style.height, '75px', 'container height' );
+
+  // unstamp first stamp
+  pckry.unstamp( stamps[1] );
+  assert.equal( pckry.stamps.length, 1, 'element was unstamped' );
+  // stamp it back
+  pckry.stamp( stamps[1] );
+  assert.equal( pckry.stamps.length, 2, 'element was stamped back' );
+
+});
+
+QUnit.test( 'stamped2, items are stamped', function( assert ) {
+  var container = document.querySelector('#stamped2');
+  var stamps = container.querySelectorAll('.stamp');
+  var pckry = new Packery( container, {
+    itemSelector: '.item',
+    stamp: stamps
+  });
+
+  var done = assert.async();
+  var layoutItems = pckry._getItemsForLayout( pckry.items );
+
+  assert.equal( layoutItems.length, 7, '7 layout items' );
+  var elem0 = layoutItems[0].element;
+  assert.equal( elem0.style.left, '28px', '1st item left' );
+  assert.equal( elem0.style.top, '0px', '1st item top' );
+  var elem3 = layoutItems[3].element;
+  assert.equal( elem3.style.left, '0px', '4th item left' );
+  assert.equal( elem3.style.top, '28px', '4th item top' );
+  var elem4 = layoutItems[4].element;
+  assert.equal( elem4.style.left, '20px', '5th item left' );
+  assert.equal( elem4.style.top, '40px', '5th item top' );
+
+  // unplacing
+  pckry.unstamp( stamps );
+  layoutItems = pckry._getItemsForLayout( pckry.items );
+  assert.equal( layoutItems.length, 9, '9 layout items' );
+  assert.equal( pckry.stamps.length, 0, '0 stamps items' );
+
+  pckry.on( 'layoutComplete', function() {
+    var elem0 = pckry.items[0].element;
+    assert.equal( elem0.style.left, '0px', '1st item left' );
+    assert.equal( elem0.style.top, '0px', '1st item top' );
+    var elem4 = pckry.items[4].element;
+    assert.equal( elem4.style.left, '0px', '5th item left' );
+    assert.equal( elem4.style.top, '20px', '5th item top' );
+    done();
+  });
+
+  pckry.layout();
+});
+
+QUnit.test( 'stamped3, stamp with selector string ', function( assert ) {
+  var container3 = document.querySelector('#stamped3');
+  var pckry3 = new Packery( container3, {
+    itemSelector: '.item',
+    stamp: '.stamp'
+  });
+
+  assert.equal( pckry3.stamps.length, 2, '2 stamped elements' );
+
+  assert.equal( pckry3.stamps.length, 2, '2 stamped elements' );
+  var elem0 = pckry3.items[0].element;
+  assert.equal( elem0.style.left, '0px', '1st item left' );
+  assert.equal( elem0.style.top, '0px', '1st item top' );
+  var elem1 = pckry3.items[1].element;
+  assert.equal( elem1.style.left, '52px', '2nd item left' );
+  assert.equal( elem1.style.top, '0px', '2nd item top' );
+  var elem2 = pckry3.items[2].element;
+  assert.equal( elem2.style.left, '52px', '3rd item left' );
+  assert.equal( elem2.style.top, '20px', '3rd item top' );
+  var elem3 = pckry3.items[3].element;
+  assert.equal( elem3.style.left, '13px', '4th item left' );
+  assert.equal( elem3.style.top, '35px', '4th item top' );
+
+  assert.equal( container3.style.height, '75px', 'container height' );
+
+  var container4 = document.querySelector('#stamped4');
+  var pckry4 = new Packery( container4, {
+    itemSelector: '.item',
+    stamp: 'foobar'
+  });
+
+  assert.ok( pckry4._isLayoutInited, 'bad selector didnt cause error' );
+});
+
+QUnit.test( 'stamped with borders', function( assert ) {
+  var container = document.querySelector('#stamped-borders');
+  var pckry = new Packery( container, {
+    itemSelector: '.item',
+    stamp: '.stamp'
+  });
+
+  var elem0 = pckry.items[0].element;
+  var elem1 = pckry.items[1].element;
+  var elem2 = pckry.items[2].element;
+
+  assert.equal( elem0.style.left, '50px', '1st item left' );
+  assert.equal( elem1.style.left, '50px', '2nd item left' );
+  assert.equal( elem2.style.top, '30px', '3rd item top' );
+
+});

node_modules/packery/test/unit/sub-pixel-fit.js

@@ -0,0 +1,33 @@
+QUnit.test( 'sub-pixel fit', function( assert ) {
+
+  var pckry = new Packery( '#sub-pixel-fit', {
+    itemSelector: '.item',
+    transitionDuration: 0
+  });
+
+  function getItemsTotalY() {
+    var y = 0;
+    for ( var i=0, len = pckry.items.length; i < len; i++ ) {
+      var item = pckry.items[i];
+      y += item.rect.y;
+    }
+    return y;
+  }
+
+  // iterate over multiple container widths
+  for ( var containerWidth = 290; containerWidth < 310; containerWidth++ ) {
+    pckry.element.style.width = containerWidth + 'px';
+    pckry.layout();
+    assert.equal( 0, getItemsTotalY(), 'items fit at ' + containerWidth + 'px' );
+  }
+
+  // set grid sizer and do it again
+  pckry.options.columnWidth = '.grid-sizer';
+
+  for ( containerWidth = 290; containerWidth < 310; containerWidth++ ) {
+    pckry.element.style.width = containerWidth + 'px';
+    pckry.layout();
+    assert.equal( 0, getItemsTotalY(), 'items fit with columnWidth at ' + containerWidth + 'px' );
+  }
+
+});

node_modules/packery/test/unit/test-packer.js

@@ -0,0 +1,137 @@
+/**
+ * Packer tests
+ */
+
+( function() {
+
+QUnit.module('Packer');
+
+var Packer = Packery.Packer;
+var Rect = Packery.Rect;
+
+QUnit.test( 'basics', function( assert ) {
+  assert.equal( typeof Packer === 'function', true, 'Packery is a function' );
+});
+
+QUnit.test( 'packing', function( assert ) {
+  var packr = new Packer( 30, 100 );
+
+  // 112
+  // 352
+  // 344
+  // xxx
+  // xxx
+
+  var rect1 = new Rect({ width: 20, height: 10 });
+  var rect2 = new Rect({ width: 10, height: 20 });
+  var rect3 = new Rect({ width: 10, height: 20 });
+  var rect4 = new Rect({ width: 20, height: 10 });
+  var rect5 = new Rect({ width: 10, height: 10 });
+
+  packr.pack( rect1 );
+  packr.pack( rect2 );
+  packr.pack( rect3 );
+  packr.pack( rect4 );
+  packr.pack( rect5 );
+
+  assert.equal( rect1.x, 0, 'rect1.x top left' );
+  assert.equal( rect1.y, 0, 'rect1.y top left' );
+  assert.equal( rect2.x, 20, 'rect2.x top right' );
+  assert.equal( rect2.y, 0, 'rect2.y top right' );
+  assert.equal( rect3.x, 0, 'rect3.x bottom left' );
+  assert.equal( rect3.y, 10, 'rect3.y bottom left' );
+  assert.equal( rect4.x, 10, 'rect4.x bottom right' );
+  assert.equal( rect4.y, 20, 'rect4.y bottom right' );
+  assert.equal( rect5.x, 10, 'rect5.x packed in center' );
+  assert.equal( rect5.y, 10, 'rect5.y packed in center' );
+
+  // bottom space is open
+  assert.equal( packr.spaces.length, 1, 'one space open' );
+  var space = packr.spaces[0];
+  assert.equal( space.width, 30, 'space.width' );
+  assert.equal( space.height, 70, 'space.height' );
+  assert.equal( space.x, 0, 'space.x' );
+  assert.equal( space.y, 30, 'space.y' );
+
+});
+QUnit.test( 'packing with a placed', function( assert ) {
+  var packr = new Packer( 30, 100 );
+
+  // 225
+  // 311
+  // 34x
+  // x4x
+  // xxx
+  // xxx
+
+  var rect1 = new Rect({
+    width: 20,
+    height: 10,
+    x: 10,
+    y: 10
+  });
+  var rect2 = new Rect({ width: 20, height: 10 });
+  var rect3 = new Rect({ width: 10, height: 20 });
+  var rect4 = new Rect({ width: 10, height: 20 });
+  var rect5 = new Rect({ width: 10, height: 10 });
+
+  packr.placed( rect1 );
+  packr.pack( rect2 );
+  packr.pack( rect3 );
+  packr.pack( rect4 );
+  packr.pack( rect5 );
+
+  assert.equal( rect2.x, 0, 'rect2.x top left' );
+  assert.equal( rect2.y, 0, 'rect2.y top left' );
+  assert.equal( rect3.x, 0, 'rect3.x left side' );
+  assert.equal( rect3.y, 10, 'rect3.y left side' );
+  assert.equal( rect4.x, 10, 'rect4.x bottom center' );
+  assert.equal( rect4.y, 20, 'rect4.y bottom center' );
+  assert.equal( rect5.x, 20, 'rect5.x packed in top right' );
+  assert.equal( rect5.y, 0, 'rect5.y packed in top right' );
+
+  assert.equal( packr.spaces.length, 3, '3 spaces left' );
+
+});
+
+QUnit.test( 'packing horizontal', function( assert ) {
+
+  function checkRect( rect, x, y ) {
+    assert.equal( rect.x, x, 'x: ' + x );
+    assert.equal( rect.y, y, 'y: ' + y );
+  }
+
+  var packr = new Packer( 100, 30, 'rightwardTopToBottom' );
+
+  // 133xx
+  // 154xx
+  // 224xx
+
+  var rect1 = new Rect({ width: 10, height: 20 });
+  var rect2 = new Rect({ width: 20, height: 10 });
+  var rect3 = new Rect({ width: 20, height: 10 });
+  var rect4 = new Rect({ width: 10, height: 20 });
+  var rect5 = new Rect({ width: 10, height: 10 });
+
+  packr.pack( rect1 );
+  packr.pack( rect2 );
+  packr.pack( rect3 );
+  packr.pack( rect4 );
+  packr.pack( rect5 );
+
+  checkRect( rect1, 0, 0 );
+  checkRect( rect2, 0, 20 );
+  checkRect( rect3, 10, 0 );
+  checkRect( rect4, 20, 10 );
+  checkRect( rect5, 10, 10 );
+
+  // bottom space is open
+  assert.equal( packr.spaces.length, 1, 'one space open' );
+  var space = packr.spaces[0];
+  assert.equal( space.width, 70, 'space.width' );
+  assert.equal( space.height, 30, 'space.height' );
+  checkRect( space, 30, 0 );
+
+});
+
+})();

node_modules/packery/test/unit/test-rect.js

@@ -0,0 +1,150 @@
+/**
+ * Rect tests
+**/
+
+( function() {
+
+var Rect = Packery.Rect;
+
+QUnit.module('Rect');
+
+QUnit.test( 'Rect defaults', function( assert ) {
+  var rect = new Rect();
+  assert.equal( rect.x, 0, 'rect.x = 0' );
+  assert.equal( rect.y, 0, 'rect.y = 0' );
+  assert.equal( rect.width, 0, 'rect.width = 0' );
+  assert.equal( rect.height, 0, 'rect.height = 0' );
+});
+
+QUnit.test( 'set properties with initial argument object', function( assert ) {
+  var rect = new Rect({
+    x: 40,
+    y: 390,
+    width: 103,
+    height: -4
+  });
+  assert.equal( rect.x, 40, 'x' );
+  assert.equal( rect.y, 390, 'y' );
+  assert.equal( rect.width, 103, 'width' );
+  assert.equal( rect.height, -4, 'default height property' );
+});
+
+QUnit.test( 'contains', function( assert ) {
+
+  var rectA = new Rect({
+    x: 10,
+    y: 30,
+    width: 100,
+    height: 400
+  });
+
+  var rectB = new Rect({
+    x: 40,
+    y: 60,
+    width: 10,
+    height: 20
+  });
+
+  assert.strictEqual( rectA.contains( rectB ), true, 'A clearly contains B' );
+
+  rectB = new Rect({
+    x: 500,
+    y: 40,
+    width: 40,
+    height: 20
+  });
+
+  assert.strictEqual( rectA.contains( rectB ), false, 'A clearly does not contain B' );
+
+  rectB = new Rect({
+    x: 20,
+    y: 40
+  });
+
+  assert.strictEqual( rectA.contains( rectB ), true,
+    'A contains B, which has no width or height' );
+
+  rectB = new Rect({
+    x: 20,
+    y: 50,
+    width: 60,
+    height: 150
+  });
+
+  assert.strictEqual( rectA.contains( rectB ), true, 'B is at upper left corner of A' );
+
+  rectB = new Rect({
+    x: rectA.x,
+    y: rectA.y,
+    width: rectA.width,
+    height: rectA.height
+  });
+
+  assert.strictEqual( rectA.contains( rectB ), true, 'A contains B. B is equal to A' );
+
+  rectB = new Rect({
+    x: rectA.x - 20,
+    y: rectA.y,
+    width: rectA.width,
+    height: rectA.height
+  });
+
+  assert.strictEqual( rectA.contains( rectB ), false,
+    'A does not contain B. B same size A, but offset' );
+
+});
+
+
+QUnit.test( 'overlaps', function( assert ) {
+
+  var rectA = new Rect({
+    x: 100,
+    y: 50,
+    width: 300,
+    height: 200
+  });
+
+  var rectB = new Rect({
+    x: 150,
+    y: 100,
+    width: 100,
+    height: 50
+  });
+
+  assert.strictEqual( rectA.overlaps( rectB ), true, 'B is inside A, A overlaps B' );
+  assert.strictEqual( rectB.overlaps( rectA ), true, 'B is inside A, B overlaps A' );
+
+  rectB.x = 50;
+
+  assert.strictEqual( rectA.overlaps( rectB ), true,
+    'B overlaps left edge of A, A overlaps B' );
+  assert.strictEqual( rectB.overlaps( rectA ), true,
+    'B overlaps left edge of A, B overlaps A' );
+
+  rectB.y = 25;
+
+  assert.strictEqual( rectA.overlaps( rectB ), true,
+    'B overlaps left top corner of A, A overlaps B' );
+  assert.strictEqual( rectB.overlaps( rectA ), true,
+    'B overlaps left top corner of A, B overlaps A' );
+
+  rectB.x = 0;
+  rectB.y = 0;
+
+  assert.strictEqual( rectA.overlaps( rectB ), false,
+    'B bottom right corner meets A top left corner, A DOES NOT overlap B' );
+  assert.strictEqual( rectB.overlaps( rectA ), false,
+    'B bottom right corner meets A top left corner, B DOES NOT overlap A' );
+
+  rectB.x = rectA.x - rectB.width;
+  rectB.y = rectA.y;
+  rectB.height = rectA.height;
+
+  assert.strictEqual( rectA.overlaps( rectB ), false,
+    'B is completely adjacent to A, A DOES NOT overlap B' );
+  assert.strictEqual( rectB.overlaps( rectA ), false,
+    'B is completely adjacent to A, B DOES NOT overlap A' );
+
+});
+
+})();