Posts Tagged ‘Pinterest’

There are many different solutions for creating Pinterest-like, dynamic-column layouts.

Salvattore is another good one that comes with an important difference: it is not configured in JavaScript but in CSS.

It is again a JavaScript-powered solution but doesn’t require any frameworks.

Salvattore

The number of columns are mentioned in CSS and it is pretty easy to define different numbers for different devices using @media queries.

And, Salvattore works on almost all modern browsers (IE9+).

Pinterest-like responsive grid layouts became one of the standard ways to present “lots of content” in an organized way.

For anyone willing to use such layouts on any web project, Grid Layout Shock is one of the easiest yet feature-rich solutions out there. And, they are giving away 5 Developers licenses to WRD readers (details at the bottom).

GridLayoutShock

It is available in 2 versions:

  • WordPress plugin
  • jQuery plugin

which makes the usage for almost any type of website so quick and painless.

They are both responsive, have multiple styles and can be customized in means of look/feel.

The WordPress plugin integrates with the site completely as it can pull the content from posts, custom post types, taxonomies, galleries and portfolios (both versions can get the data from RSS).

GridLayoutShock Sample

Using the shortcode generated in the plugin’s settings page, it can be added anywhere inside pages, posts and widgets. Or, the whole site can be displayed with a responsive grid template.

Also, the number of the posts, their order or dimensions can all be set.

Grid Layout Shock has both free (with limited features) and paid versions. Make sure you check them all.

How to join the giveaway?

5 Developer licenses ($99/each) are being given away. In order to join you can choose one or both of the actions to increase the chances:

The winners will be selected randomly and announced a week later (26 August 2013).

Good luck to all.

The winners

Here they are:

  • pete (comment #1271135)
  • Farhan (comment #1271164)
  • @AhmetCAKIR
  • Ashmita Dobariya (comment #1271411)
  • Paula (comment #1271493)

Congratulations and thanks very much everyone for joining.

There are various JavaScript-powered solutions for creating dynamic-column grid layouts (like Pinterest).

Although most of them are great, sometimes, the grids contain gaps or ragged edges.

Mason.js is a jQuery plugin that aims to perfect such grids by filling those gaps smartly.

Mason.js

One the grid is created, the plugin calculates where those gaps exist and fills them with either predefined elements or by duplicating the content in the grid.

It is possible to define the sizes to be used for elements, the size of columns/rows, breakpoints and if the layout will be fluid or fixed.

Ok, copying is not good.. but getting inspired from other successful projects and learning from them definitely makes sense.

Pinry, an open source web application, eases building Pinterest-like (dynamic-column-grid-layout) websites.

It allows users to register to the app and pin, tag and share media (images, videos and webpages) quickly.

Pinry - Pinterest Clone

And, a bookmarklet exists for saving the content without leaving the pages being browsed.

The application is built with Python (Django) and it is a good starting for creating a community around pinning contents or a bookmarking site for personal use.

Nested is a jQuery plugin for generating multi-column grid layouts with zero gaps.

The plugin creates a matrix of all elements, builds a multi column grid and tries to fill any gaps by reordering the elements.

jQuery Nested

There are various other solutions out there that does the same. However, Nested applies one small action: it resizes any element at the bottom of the grid to guarantee the gap-free layout.

Its usage is very easy by simply targeting a container element through a jQuery function.

And, various options exist for customization like enabling/disabling animation, min. number of columns and more.