0

I have a page with an unordered list and inside that list many list items which fall into various categories. Each list item fills 6 columns of a 12 column grid with Bourbon Neat.

I would like to be able to filter each list item by category with a menu. The best way I've found of filtering the items is with Isotope.js. Unfortunately when I try to use isotope it overrides the bourbon neat layout. Is there a way to use isotope with bourbon neat?

I've created a codepen with the relevant code here:

http://codepen.io/patrickaltair/pen/MaMeZX?editors=001

$('.grid').isotope({
        itemSelector: '.wp-project',
    });

    $('#all').click(function(){
        $('.grid').isotope({ filter: '*' });
    });

    $('#mountain').click(function(){
        $('.grid').isotope({ filter: '.Mountain' });
    });

    $('#trees').click(function(){
        $('.grid').isotope({ filter: '.Trees' });
    });

    $('#desert').click(function(){
        $('.grid').isotope({ filter: '.Desert' });
    });

You can see how if you remove the js then the elements are displayed as they should be.

I found this post which makes me think it is possible.

Community
  • 1
  • 1
patrick.altair
  • 351
  • 1
  • 2
  • 11

1 Answers1

0

Yes, it is possible. The neat class/mixin was overrided so, in a responsive layout, you have to use only the % for the item's width not @include span-columns() mixin. I used this solution: http://isotope.metafizzy.co/layout-modes/fitrows.html. It works good for me. Also for the gutter. I created a class to calculate the correct magin between the items.

Mauro
  • 1