Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    outlayer

    2.1.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    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',
        'matches-selector': 'bower_components/matches-selector'
      }
    });

    MIT license

    Outlayer is released under the MIT license.

    Keywords

    Install

    npm i outlayer

    DownloadsWeekly Downloads

    142,351

    Version

    2.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar