Reactive Block Grid

What does it do ?

This plugin will create a reactive Isotope masonry for you. If you update or filter your collection/cursor it will be automatically reflected in the layout.

Live demo

You can find a live demo here : http://smeevil-responsive-block-grid.meteor.com

And the source of it here : https://github.com/smeevil/responsive-block-grid-example

Block grid preview:

Pinterest like preview:

Why?

I was looking for a solution that would help me animate newly inserted templates in a block grid that was ordered by newest first. Using the default options of just rendering your collection in an each block made for a jarring user experience when a new item would be added or removed in this way. For example you are looking at an item and all of the sudden you see something flicker and you are looking at a different item. Using an animation makes for a more natural transition and understanding of what happend. As I could not find any easy solution yet, I started to make one myself.

Usage

Installation:

meteor add smeevil:reactive-block-grid

Basic usage:

The most basic option to use it in your templates is as follows :

{{> reactiveBlockGrid cursor=myCursor template='myTemplate'}}

To add classes to the generated <ul/> you can pass them using the cssClass option like so :

{{> reactiveBlockGrid cursor=myCursor template='myTemplate' cssClass='small-block-grid-3 medium-block-grid-6'}}

Options:

You can pass the following isotope options to the template: transitionDuration, layoutMode, gutter, columnWidth. Please look at the isotope read me for more information on these options.

Full example:

{{> reactiveBlockGrid cursor=myCursor template='myTemplate' transitionDuration='1.5s' layoutMode='fitRows' gutter=20 columnWidth='.gutter-width'}}

Licensed under the WTFPL License. See the LICENSE file for details.