Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Brains and guts of a layout library

Outlayer is a base layout class for layout libraries like Isotope, Packery, and Masonry

Outlayer layouts work with a container element and children item elements.

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>


Install with Bower: bower install outlayer

Install with npm: npm install outlayer


Create a layout class with Outlayer.create()

var Layout = Outlayer.create( namespace );
// for example
var Masonry = Outlayer.create('masonry');
  • namespace {String} should be camelCased
  • returns LayoutClass {Function}

Create a new layout class. namespace is used for jQuery plugin, and for declarative initialization.

The Layout inherits from Outlayer.prototype.

var elem = document.querySelector('.selector');
var msnry = new Masonry( elem, {
  // set options...
  columnWidth: 200


Layouts work with Items, accessible as Layout.Item. See Item API.


An Outlayer layout class can be initialized via HTML, by setting an attribute of data-namespace on the element. Options are set in JSON. For example:

<!-- var Masonry = Outlayer.create('masonry') -->
<div class="grid" data-masonry='{ "itemSelector": ".item", "columnWidth": 200 }'>

The declarative attributes and class will be dashed. i.e. Outlayer.create('myNiceLayout') will use data-my-nice-layout as the attribute.


Get a layout instance from an element.

var myMasonry = document.querySelector('.grid') );

jQuery plugin

The layout class also works as jQuery plugin.

// create Masonry layout class, namespace will be the jQuery method
var Masonry = Outlayer.create('masonry');
// rock some jQuery
$( function() {
  // .masonry() to initialize
  var $grid = $('.grid').masonry({
    // options...
  // methods are available by passing a string as first parameter
  $grid.masonry( 'reveal', elems );


To use Outlayer with RequireJS, you'll need to set some config.

Set baseUrl to bower_components and set a path config for all your application code.

  baseUrl: 'bower_components',
  paths: {
    app: '../'

requirejs( [ 'outlayer/outlayer', 'app/my-component.js' ], function( Outlayer, myComp ) {
  new Outlayer( /*...*/ )

Or set a path config for all Outlayer dependencies.

  paths: {
    'ev-emitter': 'bower_components/ev-emitter',
    'get-size': 'bower_components/get-size',
    'desandro-matches-selector': 'bower_components/desandro-matches-selector'

MIT license

Outlayer is released under the MIT license.