All styling & sizing of items in the grid, as well as the filter buttons is controlled within Webflow. You decide how to setup your columns/grid - for each media query size. Isotope will handle the filtering/interaction/screen re-drawing. All filtering is handled by adding classes to a grid item.
You have a “.grid” container that holds all your stuff you want to be in your filterable grid layout…
Your stuff is any div, image, etc with an “.item” class within the “.grid” container…
You have a container called “.filters” that holds all your buttons.
Want to filter by blue? Simply add a blank class named “blue” to any item you want filtered in your grid container. Then create or duplicate a button & give it a custom “data-filter” attribute with a value of “.blue”.
I couldn’t seem to get the built-in “current” class in the jQuery code to carry over for the life of me. So the faux “current” class functionality you see on the filter buttons is actually just a “focused” state within Webflow. So again, no custom code or styles outside of the editor to mess with in terms of styling - you have complete creative freedom within the Webflow interface. Want your filters to be pictures of cats, dogs, and unicorns? Go for it.
I have been trying this plugin before but it didn’t work. Now I know why!!! Should put custom code NOT in the head part, but end of the body tag! Even link to connect js file should be at the end of the body tag!
Yeeep @sabanna all custom code should go in the footer for js or jquery it’ll help load speeds, and it’ll make sure that it all works haha. Yay! Learning from each other rocks! haha
I just wanted to contribute something back to everybody that would be useful. We’re all learning/building off each other here. I knew people have been wanting to see a working demo of this for a long time now, including me. So I just jumped into it yesterday, excited to finally see it in action myself
@sabanna Go for it. I’m actually pretty novice at html/css/jquery. I’m learning as I go but a more advanced user could probably do some pretty cool stuff with it & along with a better write up.
Some more advanced stuff could be pulled off by some of the jQuery ninjas that hang around here rather easily. Isotope has great documentation… At this point it just uses the default “masonry” layout, along with an additional ImagesLoaded plugin to ensure those are loaded into the DOM prior to handling the layout. Otherwise the layout gets all wonky looking.
@Mogeek Really nice! I have been wanting to try this for a while. Awesome implementation of isotope with all of the styling and layout in Webflow - exactly what I was hoping for. Opens up a number of cool options to explore. Thanks Brandon!
@ChrisR - I believe you figured it out. You just click through the link above, it takes you to my profile page. Then in the top right there is a big “clone” button.
@sabanna mentioned she might do a more thorough write up on how to use/implement this into a project.
For now, the basic steps are to copy the jquery script over from the cloned site into the bottom section called, “Footer” within the Custom Code section of your specific site, you do this through your dashboard. These contain hosted cdn links to the actual isotope plugin + the imagesloaded plugin, along with the code to run/invoke the script…
Then follow steps 1-3 as noted in the original post. Btw, the top link on the actual page links directly to the Isotope documentation. If you feel like trying some different stuff you can play around with their code pens, try to change some of the options in the plugin, etc… if you know some jQuery.
As mentioned above, I wanted to make it “extendable” for actual use in projects - so at this point its only setup for basic “class” based filtering, as in you just add an arbitrary class linked up to a filter/button with a custom data attribute with that same class name.
“Sorting” is more specific to an individual project, and it seemed like it required some custom written code/functions to get it working… Maybe not - again - I’m a novice at all this stuff. I’m sure if somebody needed some basic alphabetical/etc type of sorting in addition to filtering then a more experienced javascript/jquery developer could help get that type of functionality working without too much effort.
Isotope also has a really cool code pen demo that uses a form field & “live search” to filter… The code to get that kind of functionality working didn’t look too daunting, so that might be something to try to play around with as well.
@sabanna The preview example link that features Isotope is a 404 http://isotop-tutorial.webflow.io/38. Would you please re-link it? I’d really like to take a peek under the hood.
@Mogeek
Thank you for the awesome work you did explaining how it works, and for making it clonable.
Just adding to the love here with my link where I tweaked your filters and fit in my content. Let me know what you guys think. http://isotopelearning.webflow.io/
Hello mate,
I tried to implement the filter but it just didn’t worked.
My masonry script is OK but when I tried to filter the thumbs nothing happend, I added 2 custom classes to the thumbs, I added the “data-filter” and the value.
Enjoy.
Lovely reflowing as well 
Even link to connect js file should be at the end of the body tag!
