• Stars
    star
    163
  • Rank 231,097 (Top 5 %)
  • Language
    JavaScript
  • Created over 11 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

👷 the brains & guts of a layout library

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.

More Repositories

1

isotope

💞 Filter & sort magical layouts
HTML
11,040
star
2

zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
JavaScript
10,327
star
3

flickity

🍃 Touch, responsive, flickable carousels
JavaScript
7,511
star
4

infinite-scroll

📜 Automatically add next page
HTML
7,407
star
5

packery

🍱 Gapless, draggable grid layouts
JavaScript
4,128
star
6

huebee

🐝 1-click color picker
JavaScript
402
star
7

unidragger

👇 Draggable base class
JavaScript
82
star
8

ev-emitter

🔔 Lil' event emitter
JavaScript
65
star
9

flickity-fade

Fade between Flickity slides
JavaScript
62
star
10

zdog-demos

Round, flat, designer friendly demos for Zdog
Makefile
57
star
11

fizzy-ui-utils

UI utilities & helpers
JavaScript
46
star
12

flickity-fullscreen

Enable fullscreen view for Flickity carousels
HTML
46
star
13

tap-listener

Listens to taps
JavaScript
42
star
14

isotope-packery

packery layout mode for Isotope
JavaScript
42
star
15

flickity-bg-lazyload

Flickity lazyload background images
HTML
31
star
16

flickity-as-nav-for

Enable asNavFor for Flickity
HTML
30
star
17

flickity-sync

Sync up two Flickity carousels
HTML
29
star
18

metafizzy.co

🐻 Metafizzy site!
Handlebars
29
star
19

flickity-docs

📝 documentation for Flickity
Handlebars
28
star
20

unipointer

☝️ Do one thing with one pointer
JavaScript
27
star
21

flickity-imagesloaded

enables imagesLoaded option for Flickity
JavaScript
19
star
22

zdog-docs

Documentation site for Zdog
Handlebars
19
star
23

fizzy.school

🎃 Lessons for anyone writing jQuery
HTML
17
star
24

logo.pizza

🍕 Logo Pizza site
JavaScript
16
star
25

next-project

Help us decide what to build next
16
star
26

isotope-docs

📝 documentation for Isotope
Handlebars
13
star
27

isotope-masonry-horizontal

masonryHorizontal layout mode for Isotope
HTML
13
star
28

droppabilly

Drag and drop
JavaScript
11
star
29

flickity-hash

Select Flickity slides with links
HTML
11
star
30

packery-docs

📝 Documentation for Packery
HTML
9
star
31

isotope-horizontal

horizontal layout mode for Isotope
JavaScript
8
star
32

isotope-fit-columns

fitColumns layout mode for Isotope
JavaScript
7
star
33

eslint-plugin-metafizzy

ESLint config and rules for Metafizzy
JavaScript
3
star
34

transfob

get a transform stream, like through2.obj()
JavaScript
3
star
35

isotope-cells-by-column

cellsByColumn layout mode for Isotope
JavaScript
3
star
36

flickity-dev

Little demos made in development of Flickity
JavaScript
3
star
37

fizzy-docs-modules

Modules used in Metafizzy documentation sites
Handlebars
3
star
38

isotope-cells-by-row

cellsByRow layout mode for Isotope
JavaScript
2
star
39

huebee-docs

Huebee documentation
Handlebars
2
star
40

infinite-scroll-docs

📝 Documentation for Infinite Scroll
Handlebars
2
star
41

grunt-fizzy-docs

Grunt tasks for Masonry, Isotope, and Packery docs
JavaScript
2
star