the brains and guts of a layout library
npm install 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.
`` html`
...
Install with Bower: bower install outlayer
Install with npm: npm install outlayer
Create a layout class with Outlayer.create()
` js`
var Layout = Outlayer.create( namespace );
// for example
var Masonry = Outlayer.create('masonry');
+ namespace _{String}_ should be camelCasedLayoutClass
+ returns _{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:
` html`
...
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 = Masonry.data( document.querySelector('.grid') );
The layout class also works as jQuery plugin.
` js`
// 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.
` js
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.
` js``
requirejs.config({
paths: {
'ev-emitter': 'bower_components/ev-emitter',
'get-size': 'bower_components/get-size',
'matches-selector': 'bower_components/matches-selector'
}
});
Outlayer is released under the MIT license.