Muuri creates responsive, sortable, filterable and draggable layouts. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable.
You can build pretty amazing layouts without a single line of JavaScript these days. However, sometimes (rarely though) CSS just isn't enough, and that's where Muuri comes along. At it's very core Muuri is a layout engine which is limited only by your imagination. You can seriously build any kind of layout, asynchronously in web workers if you wish.
Custom layouts aside, you might need to sprinkle some animations and/or interactivity (filtering / sorting / drag & drop) on your layout (be it CSS or JS based). Stuff gets complex pretty fast and most of us probably reach for existing libraries to handle the complexity at that point. This is why most of these extra features are built into Muuri's core, so you don't have to go hunting for additional libraries or re-inventing the wheel for the nth time.
The long-term goal of Muuri is to provide a simple (and as low-level as possible) API for building amazing layouts with unmatched performance and most of the complexity abstracted away.
Muuri's layout system allows positioning the grid items within the container in pretty much any way imaginable. Essentially, a layout in Muuri is just a function - feed it dimensions (via grid items) and it returns positions. Provide your own layout function and you can build any layout you want.
Built-in support for sorting the grid items by dragging and dropping, even between grids. Works beautifully also on touch devices and with as many fingers as you have at hand. Additionally, Muuri can handle all the scrolling business for you automatically while you are busy dragging the items around ;)
Showing and/or hiding hundreds of DOM elements simultaneously can quickly become a performance issue due to layout thrashing, which is why Muuri provides simple utility methods for controlling the visibility of items, performantly.
In addition to sorting items by dragging them around you can also sort them directly via the API. Muuri provides methods for sorting all the grid items, moving an item within a grid and sending an item to another grid.
Designed to be fast in every aspect. DOM operations are batched and queued to make sure there is minimal amount of layout thrashing, all animations use Web Animations API (and run outside the main thread), web workers are utilized where needed, and then some.
Extensive and quite straightforward API with enough options, methods, events and escape hatches to gain full control over the library's behaviour. One of the key design goals is to provide smart defaults, which can be easily overriden when needed.
Works in all modern browsers and IE9+. All the utilized Web APIs and language features (except Web Animations API) are automatically "ponyfilled" all the way down to IE9.
Muuri is MIT licensed, which means you're free to use it in commercial projects also. That being said, please do consider sponsoring or contributing to the project to make sure the fairy dust doesn't fade away.
This project owes much to David DeSandro's Masonry, Packery and Isotope libraries. You should go ahead and check them out right now if you haven't yet. Thanks Dave!
Jukka Jylänki's survey "A Thousand Ways to Pack the Bin - A Practical Approach to Two-Dimensional Rectangle Bin Packing" came in handy when building Muuri's layout algorithms. Thanks Jukka!
Big thanks to the people behind Web Animations polyfill for making it possible to use Web Animations API reliably across browsers today.
Haltu Oy was responsible for initiating this project in the first place and funded the intial development. Thanks Haltu!