Masonry.js for Splash Pages

Masonry is a JavaScript routine that manages html code blocks and images on a Web  page area giving them a neatly stacked portfolio layout. Masonry works best when the width of the blocks are the same or multiples like 200px, 400px, 800px etc. The height of the blocks can vary but if it is too widely varying then the fit of the layout can suffer. A screenshot example shows how Masonry attempts to layout in close packed fashion all of the blocks:

Masonry is useful for product or portfolio sites that have to cater to mobile as well as PC web users with their widely varying screen sizes. Masonry is responsive and intelligently rebalances the blocks and images. The following screenshot shows how:
masonryfull
Notice 3 things about this sample screen:
1)if you widen or narrow the screen sufficiently Masonry rebalances the blocks on the screen to fit most closely the Masonry options for padding, margin, and block columnWidth;
2)However, Masonry does not maintain the order of the blocks as laid out on the underlying  HTML page but rather moves blocks around for the tightest fit. Note the pink block is the last one on the original HTML page;
3)But Masonry also has a block, class=cornerstamp, which will be stamped into the upper right corner which is is convenient for a non-shuffling  info block which will stay locked into the upper right corner  providing details about the portfolio or products on display. Quick note, corner stamping the upper left corner, does not work as well as the upper right.

An important point to note is that Masonry v.2.1.08 provides capabilities that are not available in Masonry version 3 including the ability to provide border, padding and background CSS for the Masonry container plus embedding the Masonry container in other wrappers for a structured wireframe layout. Also Masonry’s animation options are curtailed in the move to version 3. So given that WordPress has upgraded to Masonry v3, you may have to use the Iframe or Insert CSS/JS plugins to restore the older Masonry v2 if you rely on its features.

There are a number of competitors to Masonry including Shuffle [using bleeding edge Web technology – so it is complex to learn]; Isotope which adds sorting and filtering of blocks to Masonry and is very approachable; salvattore [also uses advanced CSS constructs for a basic 2, 3 or more column layout but not sorting and filtering as in Isotope]; and Packery which further extends Isotope and Masonry but as of this date is not ready for prime time.

Summary

Masonry has proved to be a very popular splash page creator. It has been added as an extension to such  popular Web Development environs as Bootstrap 3, WordPress, and Drupal among others. It works well with tools like FancyBox.js , video media, and sophisticated Ajax dynamic loading of Masonry blocks. But users should not defeat the beauty of Masonry by using unwieldy blocks sizes,particularly blocks of poorly fitting widths. But more than ever, Masonry is built for portfolio and Splash pages which it serves very well.

Advertisements

About warkworth1

Web Designer and Developer that uses WordPress primarily but also Bootstrap, Foundation Zurb, Ink, and even Magento etc. Love teaching full stack developer tricks with HTML/CSS/JavaScript/PHP/SQL at WordCamps and on my blogs
This entry was posted in coding, ui. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s