Filtering and sorting parts of your website is a great way to organize content. Portfolios, albums, and blogs are just a few examples of things you might want to categorize. To achieve this, many JavaScript libraries can help. Two of the most popular ones are the MixItUp and Isotope libraries.
In this article, I'll go over the basic features of MixItUp 3 (the latest release at the time of writing) and show you all the steps needed to take advantage of it in your projects. To better demonstrate how this library works, I've also created a demo, which I'll refer to throughout the article.
Note: This article was updated in February 2017 to cover v3 of the MixItUp library
What is MixItUp 3?
As mentioned above, MixItUp 3 is a dependency-free, JavaScript library that allows you to filter and sort elements using CSS-based animations. Created by Patrick Kunka, it comes with a number of different customization options and detailed documentation. You can integrate it easily into your existing layouts. All that's needed is to target the desired elements and the library will do the grunt work for you.
For non-commercial projects, you can use it for free. However, commercial projects require a license. More information is available on this page.
The library works in all modern browsers (including IE10+ with full functionality, and a fallback functional but with no animations in IE8+).
Now that we've seen what the library does, let's see the required steps in order to use it.
Getting Started with MixItUp 3
To get started with MixItUp 3, you first have to include it in your projects. You can download it by visiting its GitHub page or by using a package manager like npm.
For our demo, we'll use the first option. The required script will be placed before the closing </body> tag, like this:
...
<script src="/path/to/mixitup.min.js"></script>
</body>
Continue reading %Animated Filtering & Sorting with the MixItUp jQuery Plugin%
by George Martsoukos via SitePoint
No comments:
Post a Comment