Design Lunatic

Isotope Tutorial

I’m sure many of you have heard of jQuery Masonry. It “Arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.” Now, I’m not going to lie to you, masonry is definitely an amazing plugin. However, it is missing some functionality that would definitely not be extra, such as advanced filtering and layout modes. Isotope builds upon Masonry, and is basically an enhanced version of it with more features and functionality.

Today, I will show you how to use Isotope to create a simple design with content “boxes”, and an insanely simple navigation that filters the “boxes”.

Well, let’s get started.

HTML

We’ll have a navigation section, and a main content div which will hold the content “boxes”.

Take a look at the navigation:

<div id="nav">
	<ul>
		<li><a href="" data-filter="*">All</a></li>
		<li><a href="" data-filter=".cat1">Category 1</a></li>
		<li><a href="" data-filter=".cat2">Category 2</a></li>
		<li><a href="" data-filter=".cat3">Category 3</a></li>
	</ul>
</div>

At a first glance, it looks like a typical navigation. It is, but the links do have a “data-filter” attribute. This is what allows them to control what is displayed in the main content div. Later on, we’ll make out javascript read these values and sort the “boxes” accordingly.

Now, here’s the main content:

<div id="content">
			<div class="box cat1 cat3">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus!
				</div>
			</div>
			
			<div class="box cat1">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus! Odio placerat pellentesque risus urna elit, odio phasellus, rhoncus, est ridiculus purus etiam, penatibus integer! 
				</div>
			</div>
			
			<div class="box cat2 cat3">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur?
				</div>
			</div>
			
			<div class="box cat1">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
			<div class="box cat2">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
			<div class="box cat2">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
			
			<div class="box cat2 cat3">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit.
				</div>
			</div>
			
			<div class="box cat1">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
			
			<div class="box cat2 cat3">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
		</div>

As you can see, the markup is really quite simple. A main content div, which holds 9 “box” divs. The “box” divs have a title and some text. Also, take a look at the classes of the boxes. Remind you of something? That’s right, our nav links’ “data-filter” attributes had the same values.

Now, before we can reorder the boxes, we have to style them.

CSS

We will give the body a nice light grey background, and we will give the boxes a white background to make them a tad more noticeable. We’ll also make the boxes a mere 280px wide, so that 3 of them can fit on an average screen with no problem.

Also, while you’re following this tutorial, don’t forget to copy-paste Eric Meyer’s awesome CSS reset into your stylesheet. It can be found right here.

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 28px;
}

#content {
width: 920px;
margin: 0 auto;
margin-top: 20px;
}

.box-title {
font-size: 30px;
margin-bottom: 10px;
}

.box {
color: #212121;
padding: 15px;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 250px;
background: #ffffff;
border: 2px solid #787878;
margin-bottom: 20px;
}

We also want our nav to be more than just a few blue links with underlines.

#nav {
float: left;
margin-left: 20px;
margin-top: 20px;
position: fixed;
}

#nav a {
text-decoration: none;
font-size: 15px;
line-height: 25px;
color: #595959;
}

#nav a:hover {
color: #393939;
}

#nav a:active {
color: #151515;
}

Now, we can move on to the awesome javascript that will make this work. Grab a copy of isotope right here. Also, don’t forget to include jquery in your document – I can’t even count how many times I’ve banged my head against the wall because the javascript wasn’t working. (Of course, I would later realise that jQuery was missing, after which I would include it and everything would start to work).

Javascript

$(document).ready(function(){
	var $container = $('#content');
	$container.isotope({
		filter: '*',
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
	});
});

The above code sorts our “boxes”. As you can see, they are now fit together, much like a jigsaw puzzle.

Now, we have to make our nav links work.

$('#nav a').click(function(){
	var selector = $(this).attr('data-filter');
	$container.isotope({ 
		filter: selector,
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false, 
		}
	});
  return false;
});

Now, step by step. When we click on a navigation link, we store the link’s “data-filter” attribute in a variable called “selector”. We then filter our content boxes using the “selector” variable. We also have a “return false” at the end so that the browser doesn’t follow the link.

If you did everything right, the links should sort the content. However, the content “boxes” don’t animate. That’s the reason this CSS exists:

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

As you can see, we give the isotope items(the “boxes”) CSS3 transition properties. Now, let me explain why we defined animation parameters in the javascript. Isotope includes Modernizr, which means that it knows when the browser supports CSS3 animations, and when it doesn’t therefore, depending on the browser, Isotope uses either javascript animation or CSS3. If you were using an old browser, than the elements would animate just fine without the above CSS.

Also, the HTML we have here won’t validate because of the “data-filter” attribute. However, you could use the title attribute instead.

<div id="nav">
	<ul>
		<li><a href="" title="*">All</a></li>
		<li><a href="" title="cat1">Category 1</a></li>
		<li><a href="" title="cat2">Category 2</a></li>
		<li><a href="" title="cat3">Category 3</a></li>
	</ul>
</div>

We would have to edit the javascript accordingly:

$('#nav a').click(function(){
	var selector1 = $(this).attr('title');
	var selector = "." + selector1;
	$container.isotope({ 
		filter: selector,
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
  });
  return false;
});

As you can see, we just concatenate a dot to the beginning of the title attribute. However, the “All” link wont work. To fix this, we would have to add a simple “if..else” statement. If the text is “All”, don’t concatenate the period to the beginning. Otherwise, go ahead.

$('#nav a').click(function(){
  var selector1 = $(this).attr('title');
  var text = $(this).text();
  if(text == "All"){
  var selector = selector1;
  }
  else {
  var selector = "." + selector1;
  }
    $container.isotope({ 
	filter: selector,
	animationOptions: {
     duration: 750,
     easing: 'linear',
     queue: false,
	 
   }
  });
  return false;
});

This is much more complicated, but it does bring with it the benefit of having valid HTML.

Well, you’ve reached the end of this tutorial. Good luck and have fun!