outlayer

What is outlayer?

Outlayer is a JavaScript library for creating and managing layouts. It provides a foundation for layout libraries like Masonry, Isotope, and Packery. Outlayer handles the positioning of items within a container, allowing for dynamic and responsive layouts.

What are outlayer's main functionalities?

Basic Layout Initialization

This code initializes a basic layout using Outlayer. It selects a container element and applies the layout to items within that container.

const Outlayer = require('outlayer');
const elem = document.querySelector('.container');
const layout = new Outlayer(elem, {
  itemSelector: '.item'
});

Adding Items to Layout

This code demonstrates how to add new items to an existing layout. After creating a new item, it is added to the layout and the layout is updated.

const newItem = document.createElement('div');
newItem.className = 'item';
layout.addItems([newItem]);
layout.layout();

Removing Items from Layout

This code shows how to remove items from the layout. The specified item is removed and the layout is updated accordingly.

const itemToRemove = document.querySelector('.item-to-remove');
layout.remove([itemToRemove]);
layout.layout();

Filtering Items

This code filters the items in the layout to only show those that match the specified selector. In this case, only items with the class 'active' will be displayed.

layout.filter('.active');

Other packages similar to outlayer

masonry-layout

Masonry is a JavaScript grid layout library that arranges elements vertically, positioning each element in the next open spot in the grid. It is similar to Outlayer but focuses specifically on the masonry layout style.

isotope-layout

Isotope is a versatile layout library that extends Outlayer. It provides filtering, sorting, and dynamic layout capabilities. Isotope builds on Outlayer's foundation to offer more advanced features.

packery

Packery is a bin-packing layout library that uses a different algorithm to arrange items. It is similar to Outlayer but focuses on packing items in the most efficient way possible, often resulting in a more compact layout.

README

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.

<div class="container">
  <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 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') -->
<div id="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 method
var Masonry = Outlayer.create('masonry');
// rock some jQuery
$( function() {
  // .masonry() to initialize
  var $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 ) {
  new Outlayer( /*...*/ )
});

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.