masonify.js

jQuery plugin for displaying, sorting, filtering and searching tabular data in a stylish way.

Better description coming soon

Official website

This plugin is inspired by isotope. Isotope uses some javascript css generation rules to smoothly transition items during search, filter and order actions. Those rules make arranging the items imposible and the animation breaks during filtering, searching or ordering. Also isotope comes with many css rules that I found hard to overwrite and it took me a lot of time to implement select2 to work with isotope.

Instead of forking isotope repository and trying to modify it, I decided to create my own jQuery plugin from scratch and that is how masonify.js was born.

This is my first time creating a jQuery plugin and I hope that reading all those guides on how to do it will not be for nothing.

Features

• Responsive design based on Bootstrap 3.*
• Drag & drop to rearrange items
• Support for server api to preserve ordering
• Filtering, searching and ordering by data attributes
• Minimal css styling, but looks excellent thanks to bootstrap
• Custom data attributes names

Dependencies

• bootstrap (Out of the box responsive design)
• font-awesome (Many cool icons)
• jquery-ui (Support for implementing arranging items)
• jquery (No comment)
• lightbox2 (Display images in a nice way)
• select2 (Excellent select plugin, but with bad styling)

Documentation

Documentation is generated from comments in the source code. Comments are written in markdown language and I use docco to generate a HTML file from those comments and code. This is very exciting.

You can find the annotated source code in /docs folder.

Usage

Installation

The suggested way to use this plugin is by bower.io

bower install masonify.js

Or you can download the zip file from GitHub

When manually downloading the zip file be sure to checkout the latest version by tag and not the latest commit, since I commit unstable versions and tag stable ones.

You can also download the latest tagged version from GitHub.

Examples

You can download the source and open index.html file to check the working real estate example.

In the following days I will put that example online somewhere.

Extra

I apologize in advance for my bad english here and in the documentation :)

Minification

To provide minified .js and .css files I have added a file called minify.js in root.

From command promt type the following:

node ./minify.js

In order to run it you must have installed: node.js, npm and node-minify. Also please read the comments in minify.js if you are on Windows.

Updating documentation

In order to create updated documentation after every code change, you need to run

docco js/masonify.js