summaryrefslogtreecommitdiffstats
path: root/js/vendor/outlayer/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'js/vendor/outlayer/README.md')
-rw-r--r--js/vendor/outlayer/README.md125
1 files changed, 125 insertions, 0 deletions
diff --git a/js/vendor/outlayer/README.md b/js/vendor/outlayer/README.md
new file mode 100644
index 000000000..2891c811b
--- /dev/null
+++ b/js/vendor/outlayer/README.md
@@ -0,0 +1,125 @@
+# 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).