# outlayer

> the brains and guts of a layout library

Latest version **2.1.1** (published 2017-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install outlayer
pnpm add outlayer
yarn add outlayer
bun add outlayer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2017-05-19 |
| First published | 2014-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 166 |
| Author | David DeSandro |
| Maintainers | desandro |
| Keywords | DOM, layout |

## Links

- npm: https://www.npmjs.com/package/outlayer
- Repository: https://github.com/metafizzy/outlayer
- Issues: https://github.com/metafizzy/outlayer/issues
- npm.io page: https://npm.io/package/outlayer

## Dependencies (3)

- [get-size](https://npm.io/package/get-size.md) ^2.0.2
- [ev-emitter](https://npm.io/package/ev-emitter.md) ^1.0.0
- [fizzy-ui-utils](https://npm.io/package/fizzy-ui-utils.md) ^2.0.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2017-05-19
- 2.1.0 — 2016-04-27
- 2.0.1 — 2016-02-08
- 2.0.0 — 2016-01-13
- 1.4.2 — 2015-08-21
- 1.4.1 — 2015-07-01
- 1.4.0 — 2015-04-07
- 1.3.0 — 2014-11-21

## README

# Outlayer

_Brains and guts of a layout library_

Outlayer is a base layout class for layout libraries like [Isotope](http://isotope.metafizzy.co), [Packery](http://packery.metafizzy.co), and [Masonry](http://masonry.desandro.com)

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

``` html
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>
```

## Install

Install with [Bower](http://bower.io): `bower install outlayer`

[Install with npm](http://npmjs.org/package/outlayer): `npm install outlayer`

## Outlayer.create()

Create a layout class with `Outlayer.create()`

``` js
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`](docs/outlayer.md).

```
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](docs/item.md).

## 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:

``` html
<!-- 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.

``` 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 );
});
```

## RequireJS

To use Outlayer with [RequireJS](http://requirejs.org/), you'll need to set some config.

Set [baseUrl](http://requirejs.org/docs/api.html#config-baseUrl) to bower_components and set a [path config](http://requirejs.org/docs/api.html#config-paths) 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'
  }
});
```

## MIT license

Outlayer is released under the [MIT license](http://desandro.mit-license.org).

---
_Source: https://npm.io/package/outlayer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._