Creating a Responsive Website from Scratch with Isotope

This is a continuation on my previous post Creating A Responsive Website From Scratch For Absolute Beginners, but this time I decided to take this tutorial to a new level by adding Isotope or other Web Developer known by using other javascript library called Masonry but actually there’s a lot alternative out there, I just prefer this over Masonry.

What I love this library is it adds column to any available space; a great example is the Pinterest site, look how it displays the grid beautifully without leaving space.

Let’s get started.

Demo

Click here to view demo page.

HTML

Still same format from previous tutorial, what new are the classes we use for Isotope

<div class="row grid-wrap"> // notice the new "grid-wrap" class
	<div class="four columns grid-box"> // notice the new "grid-box" class
		...
	</div>
	<div class="four columns grid-box"> // notice the new "grid-box" class
		...
	</div>
</div>

// add this before the BODY closing tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/rs-scripts.js"></script>

CSS

Lets take care the width of the images as Isotope overlap those if it has more than the size of its parent DIV

img, object, embed { max-width: 100%; height: auto; }

/* Reset for strange margins by default on <figure> elements */
figure { margin: 0; }
</figure>

JS

Put all into action by calling isotope(), javascript file is located in assets/js/HERE

jQuery(window).load(function(){
	var container = jQuery('.grid-wrap');

	// initialize isotope
	container.each(function(){ // we use each so we can use .grid-wrap many times on our page
		container.isotope({

			itemSelector : '.grid-box',
			masonry: {
				columnWidth: '.columns'
			}
		});
	});

});

That’s it happy coding 😉