MixItUp is a jQuery plugin providing animated filtering and sorting.

MixItUp is great for managing any categorized or ordered content like portfolios, galleries and blogs, but can also function as a powerful tool for engaging application UI and data-visualisation.

MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts.

Rather than using absolute positioning to control layout, MixItUp is designed to work with your existing inline-flow layout. Want to use percentages, media queries, inline-block, or even flex box? No problem!

For a getting started guide, tutorials, documentation and support, please visit the MixItUp website at mixitup.kunkalabs.com

A typical MixItUp workflow looks like this:

Build your container:

<div id="Container">
	<div class="mix category-1" data-my-order="1"> ... </div>
	<div class="mix category-1" data-my-order="2"> ... </div>
	<div class="mix category-2" data-my-order="3"> ... </div>
	<div class="mix category-2" data-my-order="4"> ... </div>
</div>

MixItUp targets elements with the class mix inside a container. Categories for filtering are added as classes, and sort attributes are added as custom data attributes.

Build your filter controls:

<button class="filter" data-filter=".category-1">Category 1</button>
<button class="filter" data-filter=".category-2">Category 2</button>

Filtering happens when filter buttons are clicked.

Build your sort controls:

<button class="sort" data-sort="my-order:asc">Ascending Order</button>
<button class="sort" data-sort="my-order:desc">Descending Order</button>

Sorting happens when sort buttons are clicked.

Hide target elements:

#Container .mix{
	display: none;
}

In your project's stylesheet, set the display property of target elements to none. MixItUp will show only those elements which match the current filter.

Instantiate MixItUp on your container using jQuery:

$(function(){
	$('#Container').mixItUp();	
});

Using our container's ID, we can instantiate MixItUp with the jQuery method .mixItUp()

1. Configuration Object
2. API Methods
3. State Object
4. Events
5. Version 1 Migration Guide

A much prettier version of the full documentation is also available at mixitup.kunkalabs.com/docs

1. ChangeLog

For use in commercial projects and products we require that you purchase a commercial license.

For more information see mixitup.kunkalabs.com/licenses

MixItUp is free to use in non-commercial projects under the terms of the Creative Commons CC-BY-NC license.

Support forums are provided at mixitup.kunkalabs.com/support

We ask that all general support questions and issues are posted there and that GitHub issues be used only for bug-related issues. All non-bug-related issues posted to GitHub will be closed without comment.

• Please be patient while we respond to your questions as we have very limited resources. The support forum is provided as a courtesy to MixItUp users so that knowledge can be shared – support is not guaranteed.
• Please be as detailed as possible when posting. If you can include a link to your project, a CodePen or JSFiddle demo, or a even just a code snippet of your setup, it is much more likely your question will be answered quickly and correctly.
• Do not email KunkaLabs with support questions. All support emails will be ignored.
• If you think you’ve found a bug we encourage you to submit a GitHub Issue rather than posting in the support forums. This way we can keep bugs tracked efficiently and hopefully fix them swiftly.
• When submitting a bug report please provide as much details as possible about your development environment, browser and OS, and the expected vs. resulting behaviour. Please also include any console errors that arise.
• If you can pinpoint the erroneous code even better. Pull requests are always appreciated.

© 2014 KunkaLabs Limited