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.
...
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;// for examplevar Masonry = Outlayer;
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') -->...
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 methodvar Masonry = Outlayer;// rock some jQuery;
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;;
Or set a path config for all Outlayer dependencies.
requirejs;
MIT license
Outlayer is released under the MIT license.