metafizzy/outlayer

Outlayer

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>
  ...
</div>

Install

Install with Bower: bower install outlayer

Install with npm: npm install outlayer

Outlayer.create()

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
});

Item

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

Declarative

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 }'>
  ...
</div>

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

.data()

Get a layout instance from an element.

var myMasonry = Masonry.data( 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 );
});

RequireJS

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.

requirejs.config({
  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.

requirejs.config({
  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.