Setting up a single-width column system (Simple) shows you how to set up the very basic Masonry single-width column system around which Masonry revolves.

Setting up a multi-width column system (Simple) shows how Masonry allows us to define a set of multiple widths in CSS so elements can span across multiple columns.

Using Masonry with images (Intermediate) talks about how we can properly use images in conjunction with Masonry. Because Masonry depends on using the height and width of an element, we need to account for that.

Adding media for multi-width columns (Intermediate) shows how we can handle instances where we need to account for the addition of multiple types of media, such as videos and images; this is considering the fact that multi-width columns give a great look to blog rolls and news feeds.

Using fluid layouts (Intermediate) goes over how to set the column widths to use fluid layout instead of responsive layout when building sites for mobile interfaces.

Animating using jQuery (Intermediate) shows how we can have a little fun using animations, which comes shipped with Masonry, when resizing the container area.

Animating using CSS3 (Intermediate) goes over how we use CSS3 animations and Modernizr to help us fall back to jQuery.

Integrating with WordPress (Advanced) goes over how we can integrate Masonry with the popular WordPress CMS, owing to the rising popularity of using content management systems.

Integrating with Drupal (Advanced) goes over the modules and integration process of Masonry with Drupal, which is the next most popular used content management system.

Adding and reloading (Advanced) goes over using Masonry's append and reload methods to align newly added content into the existing grid. This recipe is helpful for situations where we work on specialized projects that might involve dynamically adding content to a web page.

Placing a corner stamp (Advanced) shows how to implement a corner stamp in our Masonry grid. This would be helpful because Masonry moves content around when the container has different widths, and sometimes we want to keep a specific element at the top at all times, such as an author bio or featured product.

Aligning items from right to left (Advanced) shows us how to use the built-in Right-To-Left support within Masonry because in some instances when using Middle Eastern or Hebrew languages, the text needs to be aligned from right to left.

For this book, you will need a text editor or IDE, an up-to-date browser such as Google Chrome or Mozilla Firefox, and a copy of the jQuery Masonry plugin. We will be using a CDN in some cases, such as the base jQuery library.

If you have a basic understanding of jQuery, HTML, and CSS3, this book is for you. It is recommended that you have some prior experience working with JavaScript and/or jQuery. If you are used to working with JavaScript and want to learn a new jQuery plugin that can add a beautiful, clean grid layout to your site, you will find this book a breeze to read.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "Using jQuery, we select our Masonry container and use the itemSelector option to select the elements that will be affected by Masonry."

A block of code is set as follows:

<style>
   .masonry-item {
      background: #FFA500;
      direction: rtl;
      float: left;
      margin: 5px;
      padding: 5px;
      width: 130px;
   }
</style>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<script>
  $(function() {
    $('#masonry-container').masonry({
      itemSelector: '.masonry-item',
      columnWidth : function(containerWidth) {
        return containerWidth / 4;
      }
    });
  });
</script>

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.