Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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.

You can’t perform that action at this time.