Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

Build a Dynamic Grid with Salvattore and Bootstrap in 10 Minutes

by

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.

Getting started: What You'll Need

First, you'll need to grab the Salvattore JavaScript library (minified or source). Next, you'll want to link up Twitter Bootstrap's CSS. Instead of downloading and hosting our own copy, we'll borrow this directly from NetDNA's BootstrapCDN.

Once this is complete, you're ready to get started with configuring Salvattore! 

Next, you'll need either an external stylesheet or a <style type='text/css'> tag in your header. Most of our work will be done in the stylesheet. 

Note: you must include type and rel attributes for Salvattore to work properly.

A Quick Bootstrap Grid Primer

Twitter Bootstrap provides a powerful, flexible grid structure which focuses on bottom-up media queries. Let's take a look at a common row of columns.

You'll notice in the above markup the pattern of col-[size]-[column number]. With available sizes of xssm,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:

Next, we will go to our stylesheet and add the following labels via pseudo-elements:

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:

Note:  jQuery Required

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.

Salvattore will fill in the columns for us.

Our final markup looks like this:

Conclusion

Salvattore makes creating dynamic Masonry-style grids very easy for someone who doesn't know a lot of JavaScript. Saying that, with a small amount of JavaScript, creating dynamic grids coupled with dynamic content is a breeze. Lastly, Bootstrap provides flexible class naming structure to easily construct grids for any breakpoint.

Advertisement