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.


Click here to view demo page.


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


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


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

That’s it happy coding 😉

by Ryan Sutana