Build a Dynamic Grid with Salvattore and Bootstrap in 10 Minutes

Salvattore touts itself as a jQuery Masonry alternative with one important difference: it uses CSS configuration instead of JavaScript. These kinds of grids can be seen all over the web, probably most famously on Pinterest.

Today, we will use Salvattore in combination with Twitter Bootstrap 3 to make a responsively awesome flowing grid structure.

You'll notice in the above markup the pattern of col-[size]-[column number]. With available sizes of xs, sm,md, and lg, we are able to set different column sizes for different breakpoints without writing specific media queries. Take a look at this example which shows how the columns shift at different screen widths.

Bootstrap Panels

We will be creating a flowing grid using Bootstrap's panel component. The markup to create the panel is built like this:

Putting it Together with Salvattore Magic

Now that we have the Bootstrap pieces we need, we're going to put it all together with Salvattore. For now, we'll start with six empty panels; later, we will make it all dynamic to give each panel some content.

For Salvattore to work properly, our grid container needs a data-columns attribute. Here is what our markup currently looks like:

The breakpoints we've chosen map directly to Bootstrap's media queries. Salvattore uses the::before pseudo-element and content attribute to define the classes of the columns created, and then attempts to split the elements evenly into those columns.

Making it Dynamic

We've kept thing strictly within CSS so far, but if you'd like to go the extra mile, JavaScript can offer a few goodies.

Salvattore takes things a step further by offering appending functionality. With these functions and a connection to an API (we're using Google's Book API to pull in books by Ernest Hemingway), we can build a dynamic grid. Here's the JavaScript we'll use:

First we create an append function which takes our title and content, and wraps them in our panel markup. We then use the salvattore['append_elements'](grid, [item]) function to add the item to our grid. Finally, we run the AJAX call to pull in the dynamic data.

For this to work properly, we'll want to remove all of the contents in the grid holder.

I am the director of technology at Whiteboard, a company based in Chattanooga, TN. I hold a masters degree in Digital Media from Georgia Tech. I'm passionate about building incredibly useful and beautiful things, and inspiring others to do the same through teaching.