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.

web design, Isotope + Twitter Bootstrap + Infinite Scroll + Fluid/Responsive layout, Shambix

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

<div id="iso">

	<div class="row">
		<div class="post col-xs-12 col-sm-6 col-md-3 col-lg-3">
			<div class="post_img"><img src="#"></div>
			<div class="content">
				<h2><a href="#">Item Title</a></h2>
			</div>
		</div>
	</div>

	 <div class="pagination">
		<a href="#/page/2/">Next</a>
	</div>	

</div>

CSS

#iso {
    margin: 0 auto;
    width: 100%;
}

/* Browser Support of ':first-of-type' pseudo-class
Chrome 	Safari 	Firefox  Opera 	IE 	Android   iOS
Works 	 3.2+ 	 Works 	  9.5+ 	9+ 	 Works 	 Works
*/
#iso .row:first-of-type {
  margin: 0;
}

.post {
    margin: 10px 0;
    max-width: 100%;
    padding: 0;
}

.post .content {
    padding: 20px;
}

/* 
* PAGINATION
*/
.pagination {
    display: none;
    visibility: hidden;
}

/* 
* MEDIA QUERIES
*/

@media (min-width: 768px) and (max-width: 980px) {
  #iso .col-md-3, #iso .col-lg-3 {
    width: 300px;
  }
}

@media (min-width: 980px) and (max-width: 1300px) {
  #iso .col-md-3, #iso .col-lg-3 {
    width: 350px;
  }
}

@media (min-width: 1300px) {
  #iso .col-md-3, #iso .col-lg-3 {
    width: 400px;
  }
}

JS

<script>
$(document).ready(function() {

	var $container = $('#iso');
       
        // Fire Isotope only when images are loaded
	$container.imagesLoaded(function(){
		$container.isotope({
			itemSelector : '.post',
			masonry: {
				isFitWidth: true,
				gutter: 20
			}
        });
    });

	// Infinite Scroll
	$('#iso').infinitescroll({
		navSelector  : 'div.pagination', 
		nextSelector : 'div.pagination a:first', 
		itemSelector : '.post',
		bufferPx     : 200,
		loading: {
			finishedMsg: 'We\'re done here.',
                        //img: +templateUrl+'ajax-loader.gif'
		}
	},

	// Infinite Scroll Callback
	function( newElements ) {
		var $newElems = jQuery( newElements ).hide(); 
		$newElems.imagesLoaded(function(){
			$newElems.fadeIn();
			$container.isotope( 'appended', $newElems );
		});
	});

});
</script>

<!--[if lte IE 8]>
<script>
$(document).ready(function() {
	// IE8 compatibility of pseudo-class
	$('#iso .row').first().css({margin:'0'});
});
</script>
<![endif]-->

Media Temple Hosting

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!