Outlayer

Layout class

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

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

<divclass="container"><divclass="item"></div><divclass="item"></div><divclass="item"></div>
...
</div>

Outlayer.create()

Create a layout class with Outlayer.create()

varLayout=Outlayer.create(namespace);// for examplevarMasonry=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 a class of .js-namespace on the element. Options can be set via a data-namespace-options attribution. For example:

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

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

.data()

Get a layout instance from an element.

var myMasonry = Masonry.data( document.querySelector('#container') );

jQuery plugin

The layout class also works as jQuery plugin.

// create Masonry layout class, namespace will be the jQuery methodvarMasonry=Outlayer.create('masonry');// rock some jQuery$(function(){// .masonry() to initializevar$container=$('#container').masonry({// options...});// methods are available by passing a string as first parameter$container.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){newOutlayer(/*...*/)});

Or set a path config for all Outlayer dependencies.

requirejs.config({paths: {eventie: 'bower_components/eventie','doc-ready': 'bower_components/doc-ready',eventEmitter: 'bower_components/eventEmitter','get-style-property': 'bower_components/get-style-property','get-size': 'bower_components/get-size','matches-selector': 'bower_components/matches-selector'}});

MIT license

Outlayer is released under the MIT license.