Download

THIS VERSION OF MIXITUP IS NO LONGER MAINTAINED AND THIS SITE EXISTS FOR ARCHIVAL PURPOSES ONLY. For the latest version please see: mixitup.kunkalabs.com

Download Latest Version v1.5.5

MixItUp is free for non-commercial and commercial use.

If you use MixItUp, we'd love to see your project in our Gallery!

Latest Development Updates

11/13/13 - Version 1.5.5
• Fixes a layout bug in Chrome 31.x (fixed in Canary 33.x). More info here.

5/12/13 - Version 1.5 released with many new features:
• Integrate MixItUp with Ajax using the new remix method (see Development FAQs for a code example).
• Perform simultaneous filter, sort, and layout operations with the new multimix method.
• Perform complex multi-dimensional filtering (see our new National Parks demo).
• Sort your target elements on instantiation with the new sortOnLoad configuration option.
• Various bug fixes (see git commits).

More demos coming soon!

Persistent Issues:

If you're experimenting with our sandbox demo on Chrome and wondering why the "WindUp" and "WindBack" easings aren't working, this is caused by a Chrome regression bug that's been left unfixed since version 25. We're hoping to see this fixed with the release of Chrome version 28 version 29 (confirmed in Canary), but in the mean time check out the demo in Safari or Firefox to see the easings working.

What Is MixItUp?

MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content! Check out our demos for some inspiration »

How does it work?

MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations. It's an extremely efficient approach that makes the most of your modern browser's rendering power, and avoids more resource-heavy approaches involving jQuery .animate() and position: absolute.

+

By not forcing absolute positioning on your design, all elements remain in the document flow and your fluid layout will behave exactly as it normally would - leaving you free to use percentages and media queries to achieve that pixel-perfect responsive design! When MixItUp is finished working its magic, it cleans up its code and gets outta your DOM.

Which browsers and devices can I use it with?

MixItUp is optimized for the current generation of modern, CSS3-ready browsers. Due to its light-weight and efficient approach, It works beautifully and smoothly on all modern devices including smartphones and tablets.

In older browsers (such as Internet Explorer 9 and below) that do not support CSS3 transitions, MixItUp will degrade gracefully to a simple hide/show filter. By not including extensive jQuery animation fall-backs, we've kept MixItUp ultra-light and optimized for the future of the web.

MixItUp is fully functional in:

Chrome Firefox Opera Safari IE
4.0+ 4+ 10.5+ 3.1+ 10+

How may I use MixItUp?

You are free to use MixItUp on any commercial or non-commercial project. Just be sure to keep the license information and attribution in the code.

Demos

We're building some nifty demos of MixItUp to show you some cool applications and help get you off the ground.

Here's a couple to get you started:

Don't forget to take a look under the hood!

Documentation

Getting Started

MixItUp couldn't be easier to setup. Just follow these simple steps in your HTML, CSS and JavaScript:

HTML

» Build Your Container and Content

MixItUp can be applied to any type of elements within a container, such as an unordered list. Your container should have a unique ID (e.g. 'Grid') that we will use to instantiate MixItUp in your JavaScript. By default, MixItUp will apply itself only to elements within your container with the class 'mix', but this can be changed with the 'targetSelector' configuration option.

The filtering categories of each target element should be entered into its class attribute (after the targetSelector class if you are using a class):

				<ul id="Grid">
					<li class="mix dogs"></li>
					<li class="mix cats"></li>
					<li class="mix krakens"></li>
					<li class="mix dogs cats"></li>
					<li ...
				</ul>

Additional alphabetic or numeric HTML5 data attributes for sorting may also be added to your target elements:

				<ul id="Grid">
					<li class="mix dogs" data-name="Abby" data-age="2"></li>
					<li class="mix cats" data-name="Bucky" data-age="9"></li>
					<li class="mix dogs" data-name="Molly" data-age="5"></li>
					<li class="mix krakens" data-name="Kraken" data-age="3987"></li>
					<li ...
				</ul>

» Build Your Filter Controls

Filtering happens when filter buttons are clicked. By default MixItUp will apply filtering click handlers to any element with the class 'filter', but this can be changed with the the 'filterSelector' configuration option. When a filter category is active, its corresponding filter buttons gets the class 'active', which can be used for styling active buttons.

These buttons could also be part of an unordered list. The desired filter categories of each filter button should be entered as the "data-filter" attribute. See the 'filterLogic' option for details on how MixItUp handles multiple filters.

				<ul>
					<li class="filter" data-filter="dogs"></li>
					<li class="filter" data-filter="cats"></li>
					<li class="filter" data-filter="krakens"></li>
					<li class="filter" data-filter="dogs cats"></li>
				</ul>

Alternatively, elements may be filtered directly via javascript with the 'filter' method.

» Build Your Sort Controls

Sorting happens when sort buttons are clicked. By default MixItUp will apply sorting click handlers to any element with the class 'sort', but this can be changed with the the 'sortSelector' configuration option.

These buttons could also be part of an unordered list, with the data attribute to sort by entered as the "data-sort" attribute, and the order to sort by entered as the "data-order" attribute:

				<ul>
					<li class="sort" data-sort="data-name" data-order="desc"></li>
					<li class="sort" data-sort="data-name" data-order="asc"></li>
					<li class="sort" data-sort="data-age" data-order="desc"></li>
					<li class="sort" data-sort="data-age" data-order="asc"></li>
					<li class="sort" data-sort="default" data-order="asc"></li>
					<li class="sort" data-sort="random"></li>
				</ul>

Sorting by 'default' maintains the order that elements are originally entered into the DOM, and is useful for toggling between descending and ascending order, without sorting by a specific attribute.

Alternatively, elements may be sorted directly via javascript with the 'sort' method.

CSS

If you're not sure where to begin with your styling, check out our boilerplate template and Demos.

If you want to go it alone though, here are some dos and don'ts:

» Dos

Because MixItUp never interferes the flow, width, or height of your elements, the styling and design is completely up to you. Just be sure to make sure your target elements have the following CSS properties in your stylesheet:

					#Grid .mix{
						opacity: 0;
						display: none;
					}

These two styles ensure that there's no FOUC (flash of unstyled content) or showing of hidden target elements before MixItUp instantiates. This way, MixItUp controls the initial loading of your elements, when your page is ready.

You'll probably want to add these two properties only once you've finished designing your layout and you're ready to instantiate MixItUp - otherwise you won't be able to see your elements!

» Don'ts

Avoid applying styles such as position: absolute or float: left/right to your elements, as doing so removes your elements from the natural flow of the document. If you're looking to build a layout that doesn't follow the natural horizontal documental flow, we recommend David DeSandro's excellent plugin Isotope. MixItUp is intended as a lightweight and modern filter and sort plugin - not a layout tool.

JavaScript

MixItUp uses the jQuery JavaScript library. Make sure you have jQuery loaded into your project's head before MixItUp:

					<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
					<script src="js/jquery.mixitup.min.js"></script>
					...

MixItUp is instantiated on your container in your JavaScript like this:

				$(function(){
					
					$('#Grid').mixitup();
					
				});

And we're done!

As long as you use the default selectors in your HTML, MixItUp should run straight out of the box. If you're looking to do something more advanced, see below for all available configuration options.

Configuration Options

This is the complete list of available configuration options with their default values. For detailed information about each option, use the menu on the left.

						$('#Grid').mixitup({
							targetSelector: '.mix',
							filterSelector: '.filter',
							sortSelector: '.sort',
							buttonEvent: 'click',
							effects: ['fade','scale'],
							listEffects: null,
							easing: 'smooth',
							layoutMode: 'grid',
							targetDisplayGrid: 'inline-block',
							targetDisplayList: 'block',
							gridClass: '',
							listClass: '',
							transitionSpeed: 600,
							showOnLoad: 'all',
							sortOnLoad: false,
							multiFilter: false,
							filterLogic: 'or',
							resizeContainer: true,
							minHeight: 0,
							failClass: 'fail',
							perspectiveDistance: '3000',
							perspectiveOrigin: '50% 50%',
							animateGridList: true,
							onMixLoad: null,
							onMixStart: null,
							onMixEnd: null
						});

Objects

Callbacks

The following callback functions are also declared in the configuration object:

Methods

MixItUp has six methods that can be called directly via JavaScript. MixItUp must first be instantiated before calling any of these methods.

Development FAQs

Does MixItUp have any layout limitations?

MixItUp is a filter and sort tool — not a layout tool. This means that you control the layout of your content 100% via CSS, and MixItUp animates the manipulation of that content — whether that's hiding and showing elements, or re-ordering them.

In terms of the layout, MixItUp works best in layouts where elements are flowed inline like text, and not floated or absolutely positioned. Our favorite fluid grid layout uses percentages, inline-block elements, media queries and our secret sauce, text-align: justify. Read more about this layout technique at the Barrel blog.

MixItUp isn't limited only to grids though — it works beautifully on horizontal and vertical lists too!

How can I dynamically load (Ajax) new target elements to the container?

When dynamically loading new target elements via Ajax or another method, elements can be added to the DOM using jQuery's .after(), or similar methods. If you are using a text-align: justify layout, as recommended above, care should be taken to ensure new elements have whitespace before and after them to allow for margins, and also that new elements are added after the last target element, but before any 'gap' elements. For example:

				// Get total number of target elements:
				
				var totalElements = $('#Grid')[0].config.origOrder.length;
				
				// Add new elements(s) after last target element (subtract 1 as .eq() is zero-based):
				
				$('#Grid').find('.mix').eq(totalElements - 1).after(' <li class="mix dogs">...</li> ');
				// Note the spaces before and after the <li> tag to ensure whitespace is maintained.
				
				// Perform a remix and fade-in all new elements:
				
				$('#Grid').mixitup('remix','all');

After the new elements have been added, the remix method must always be called to rebuild the default order array, otherwise new elements will be deleted on sort.

Is MixItUp compatible with Drag & Drop functionality?

Yes — Just instantiate jQuery UI Sortable on the same container as MixItUp, and drag & drop away. For an example, see our Playing Cards demo »

How consistent is the rendering performance of MixItUp?

CSS3 transition performance is best when animating graphically simple elements such as those containing text, pure css, and vectors. Adding images such as pngs and jpgs, and complex CSS3 effects like filters and box-shadows to elements will negatively impact framerate on slower devices such as smartphones. If you keep your image file sizes as low as possible however, this should not be noticeable.

Also worth nothing is that the rendering performance of CSS3 transitions is currently better in Webkit-based browsers than Firefox.

Are MixItUp methods chainable?

Yes — all MixItUp methods maintain jQuery object chainability.

Can I apply click handlers to MixItUp target elements?

Yes — however, as target elements must be removed and re-added to the DOM during MixItUp's sort function, any click handlers bound directly to these elements will be destroyed. To prevent this, we recommend using jQuery's .delegate() method, or re-binding your handlers after the sort function is finished.

How do I achieve a layout with no margins between my elements?

While easily achieved using floats, when using inline-block-based layouts, there will always be "white-space" between elements, equal to the width of the space between words of text, even when margins are set to 0. To collapse this whitespace, the following css property should be added to your container:

				#Grid{
					font-size: 0.1px;
					...
				}

Reducing line-height, word-spacing, and letter spacing, will also achieve the same result of collapsing whitespace. If your target elements contain text, these properties should then be defaulted back to the desired amounts at the child level. For example:

				#Grid .mix{
					font-size: 16px;
					...
				}

What is the "mix_all" class for?

You may have noticed that this class is added automatically to all MixItUp target elements. This simply allows MixItUp perform filtering and sorting on "all" elements as if it were any other filter category. It is added only on instantiation and remix, and not on individual filter or sort operations. It should never be added manually to your target elements.

Why are there no fallback animations for non-CSS3 browsers (IE9 and below)?

MixItUp can still be used as an effective filter and sort tool in IE8/9, albeit with no animations. The reason for this is as follows.

While we realize that animations in IE8/9 may be important to some developers, the market-share of these browsers is declining, and the people that use them are already accustomed to receiving an inferior user-experience on a daily basis. As well as keeping MixItUp as lightweight as possible, we'd like to play our part in moving the web forward and getting users onto standards-compatible browsers, and as such we currently have no plans to integrate fallback animations for IE8/9 into MixItUp.

Are you using MixItUp on your logo?

We sure are — we'd like to think there are many creative visual uses for MixItUp beyond just the filtering and sorting of content, so please let us know if you do something cool with MixItUp!

The logo uses MixItUp with a few of its methods firing in a setInterval() function. To save on resources, we also pause the logo while the sand box is in use, and resume it after 3 seconds of inactivity. Feel free to check out our code »

Resize Me

MixItUp is perfect for percentage-based fluid layouts!

»