Comment utiliser Bourbon Neat avec Isotope.js?

Question

J'ai une page avec une liste non ordonnée et dans cette liste de nombreux éléments de liste qui entrent dans diverses catégories. Chaque élément de liste remplit 6 colonnes d'une grille de 12 colonnes avec Bourbon Neat.

Je voudrais être en mesure de filtrer chaque élément de la liste par catégorie avec un menu. La meilleure façon de filtrer les éléments est avec Isotope.js. Malheureusement, lorsque j'essaie d'utiliser un isotope, il remplace la disposition soignée du bourbon. Existe-t-il un moyen d'utiliser des isotopes avec du bourbon pur?

J'ai créé un codepen avec le code correspondant ici:

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' }); 
    }); 

Vous pouvez voir comment si vous supprimez les js alors les éléments sont affichés comme ils le devraient.

J'ai trouvé ce post ce qui me fait penser que c'est possible.

Answer 1

Oui, c'est possible. La classe/mixin a été redéfinie, donc, dans une mise en page responsive, vous devez utiliser uniquement le% pour la largeur de l'élément et non @include span-columns() mixin. J'ai utilisé cette solution: http://isotope.metafizzy.co/layout-modes/fitrows.html. Cela fonctionne bien pour moi. Aussi pour la gouttière. J'ai créé une classe pour calculer le magin correct entre les éléments.