This content originally appeared on DEV Community and was authored by Joost van der Schee
I saw the original Isotope Javascript fancyness and I just had to write a rebuild using modern web standards. Check out my rebuild! My version of Isotope uses a grid layout and animates using view transition. It is silky smooth, blazing fast and has graceful degredation. The code consists of only 63 lines of vanilla JS, while the old version required an astonishing 3500+ lines. If you choose to leave the sorting out, you can even reduce the code to 37 lines. Yup... the web has come a long way.
How to use it?
Just set id="isotope" on any container and give its children classes that represent categories, like class="metal". Then create some buttons with data attributes, like data-filter=".metal" or data-sortby="symbol". Load the JS from the demo in the footer and it works. You don't need ANY of the CSS. That is all just fancy stuff.
Caveats
Note that my version only supports basic filtering and sorting (which are the only things I ever used from the original code). Also note that the animations do not work in Firefox (yet). Finally, be aware that you can not use this Isotope filter twice on the same page, as it lacks abstraction for that.
This content originally appeared on DEV Community and was authored by Joost van der Schee
Joost van der Schee | Sciencx (2025-10-22T22:54:56+00:00) Isotope in just 60 lines…. Retrieved from https://www.scien.cx/2025/10/22/isotope-in-just-60-lines/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.