Setting up a single-width column system (Simple)

Exclusive offer: get 50% off this eBook here
Instant jQuery Masonry How-to [Instant]

Instant jQuery Masonry How-to [Instant] — Save 50%

Utilize the power of Masonry in short, easy-to-follow recipes with this book and ebook.

£7.99    £4.00
by Kyle Taylor | September 2013 | Open Source Web Development

The purpose of this article by Kyle Taylor, author of Instant jQuery Masonry How-to, is to give you an instant understanding of how jQuery Masonry works and how to implement it in general scenarios.

Masonry works by arranging elements in a grid-based structure. By using a grid, Masonry tiles will flow and get stacked in a very neat and organized manner, which will give us the brick-like appearance we want to achieve. In this article, we will learn how to set up Masonry, at the very minimum, for a single-column system.

(For more resources related to this topic, see here.)

Getting ready

To perform the steps listed in this article, we will need a text editor, a browser, and a copy of the Masonry plugin. Any text editor will do, but my browser of choice is Google Chrome, as the V8 JavaScript engine that ships with it generally performs better and supports CSS3 transitions, and as a result we see smoother animations when resizing the browser window. We need to make sure we have a copy of the most recent version of Masonry, which was Version 2.1.08 at the time of writing this article. This version is compatible with the most recent version of jQuery, which is Version 1.9.1. A production copy of Masonry can be found on the GitHub repository at the following address:

https://github.com/desandro/masonry/blob/master/jquery.masonry.min.js

For jQuery, we will be using a content delivery network (CDN) for ease of development. Open the basic single-column HTML file to follow along. You can download this file from the following location:

http://www.packtpub.com/sites/default/files/downloads/1-single-column.zip

How to do it...

  1. Set up the styling for the masonry-item class with the proper width, padding, and margins. We want our items to have a total width of 200 pixels, including the padding and margins.

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

  2. Set up the HTML structure on which you are going to use Masonry. At a minimum, we need a tagged Masonry container with the elements inside tagged as Masonry items.

    <div id='masonry-container'>
    <div class='masonry-item '>
    Maecenas faucibus mollis interdum.
    </div>
    <div class='masonry-item '>
    Maecenas faucibus mollis interdum. Donec sed odio dui. Nullam
    quis risus eget urna mollis ornare vel eu leo. Vestibulum id
    ligula porta felis euismod semper.
    </div>
    <div class='masonry-item '>
    Nullam quis risus eget urna mollis ornare vel eu leo. Cras
    justo odio, dapibus ac facilisis in, egestas eget quam. Aenean
    eu leo quam. Pellentesque ornare sem lacinia quam venenatis
    vestibulum.
    </div>
    </div>

  3. All Masonry options need not be included, but it is recommended (by David DeSandro, the creator of Masonry) to set itemSelector for single-column usage. We will be setting this every time we use Masonry.

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

How it works...

Using jQuery, we select our Masonry container and use the itemSelector option to select the elements that will be affected by Masonry. The size of the columns will be determined by the CSS code.

Using the box model, we set our Masonry items to a width of 90 px (80-px wide, with a 5-px padding all around the item). The margin is our gutter between elements, which is also 5-px wide. With this setup, we can con firm that we have built the basic single-column grid system, with each column being 100-px wide. The end result should look like the following screenshot:

Summary

This article showed you how to set up the very basic Masonry single-width column system around which Masonry revolves.

Resources for Article :


Further resources on this subject:


Instant jQuery Masonry How-to [Instant] Utilize the power of Masonry in short, easy-to-follow recipes with this book and ebook.
Published: May 2013
eBook Price: £7.99
See more
Select your format and quantity:

About the Author :


Kyle Taylor

Kyle Taylor is a 2012 graduate from the University of North Texas with a Bachelor of Arts in Information Technology, with a focus on network security. While in school, he and his colleague, Brett McCormick, published their paper on Public Transportation Tracking System Powered by Mobile Phones from the American Public Transportation Association.

He is also currently a Startup Weekend organizer and StartupDigest curator in the North Texas area and is very passionate about the Startup community. He is currently working with an organization that promotes open data and civic engagement in the city of Dallas.

When he's not working on startup projects, organizing hackathons, or networking with other entrepreneurs at meet ups, he enjoys being a frontend developer while dipping into mobile development whenever he can.

Currently, Kyle works as a Drupal developer for LevelTen Interactive in Dallas, Texas.

Books From Packt


Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

Responsive Web Design by Example
Responsive Web Design by Example

HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

Learning Kendo UI Web Development
Learning Kendo UI Web Development

RapidWeaver 5 Beginner's Guide
RapidWeaver 5 Beginner's Guide

HTML5 Web Application Development By Example
HTML5 Web Application Development By Example

jQuery for Designers: Beginner’s Guide
jQuery for Designers: Beginner’s Guide

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software