Isotope + Twitter Bootstrap + Infinite Scroll + Fluid/Responsive layout


29th April 2014 – I updated the code below and I think that now it really is as good as this can possibly get.
Perfect result!

I love both Isotope and Twitter Bootstrap framework, I think they’re great tools for developers & web designers alike.
However, due to the nature of TB’s fluid structure (with widths in % rather than px) and Isotope being originally developed way before this kind of layout structures were popular…. they don’t work nicely together out of the box.

Desandro (who, ironically, is a designer at Twitter), Isotope‘s developer, has recently released a beta for Isotope v.2 and the direction is definitely going towards making the library more accomodating of responsive and fluid layouts.
That said, I still had some trouble to make a full width website work as I wished, while implementing both, but I finally managed to make everything work beautifully.

isotope-8

Also, I am using Infinite Scroll (developed by Paul Irish), imagesLoaded (also developed by Desandro) and WP Imager (developed by me), to accomplish 3 more objectives:

– resize and cache images inside items
– make an endless list of items without needing to click on pagination
– make sure all images inside the items load before firing Isotope (mostly to avoid overlapping of partially formed items, while images are still loading).

All of this, on a WordPress site.

Media Temple Hosting

So here I’ll show you how they all work together.

Download and setup in your site, the (latest versions of) necessary scripts:

Isotope v2 beta .
Twitter Bootstrap (or use their CDN)
Infinite Scroll
imagesLoaded
WP Imager (keep in mind that this only works on WordPress)

I have removed pretty much all WordPress related code, so feel free to adapt it to whatever you need it for.

Template file

CSS

JS

There’s probably more solutions on how to achieve all of this, however after I researched extensively, this was the only solution that did the trick for me.
So, take all of this and adapt it to your needs!

I’m a Digital Consultant, Web Designer & Developer, specialized in WordPress.
I’ve been making websites for 17 years and have specialized in WordPress since 2009.
I like to work with PHP/MySQL, HTML5/CSS3/Javascript, Twitter Bootstrap and, of course, WordPress.
I help companies, professionals and startups grow with technology, I hand-pick the perfect team for them, plan projects from the ground-up, develop & deploy websites, online stores and apps.

By browsing this website, you explicitly and fully agree to the site's Cookies & Privacy Policy More Info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close