This documentation is for MixItUp 3. Looking for the MixItUp 2 docs? They can be found on the GitHub v2 branch
Most commonly, MixItUp is applied to a "container" of "target" elements, which could be a portfolio of projects, a list of blog posts, a selection of products, or any kind of UI where filtering and/or sorting would be advantageous.
To get started, follow these simple steps:
Building the Container
By default, MixItUp will query the container for targets matching the selector
Targets can be filtered using any valid selector e.g.
'.category-a', and are sorted via optional custom data attributes e.g.
Further reading: Marking-up MixItUp Containers
Client-side or "DOM-based" filtering and sorting should not be used as an alternative to server-side filtering when dealing with large or growing datasets containing hundreds or thousands of items. MixItUp works best for moderately sized or static datasets with up to 1000 items. Want to integrate MixItUp with server-side/ajax filtering? Check out the Dataset API.
One way that filtering and sorting happens is when "controls" are clicked. You may use any clickable element as a control, but
<button type="button"> is recommended for accessibility.
Filter controls are queried based on the presence of a
data-filter attribute, whose value must be
'none', or a valid selector string e.g.
Further reading: Filtering with MixItUp
Sort controls are queried based on the presence of a
data-sort attribute, whose value takes the form of a "sort string" made up of the name of the attribute to sort by, followed by an optional colon-separated order component e.g.
'random' are also valid, with
'default' referring to the original order of target elements in the DOM at the time of mixer instantiation.
Further reading: Sorting with MixItUp
Styling the Container
While MixItUp can be added on top of any existing CSS layout, we strongly recommend inline-block or flexbox-based styling over floats and legacy grid frameworks when dealing with grid-based designs for a number of reasons.
Further reading: MixItUp Grid Layouts
The most simple way to load MixItUp in your project is to include it via a
<script> tag before the closing
</body> tag on your page.
With this technique, the MixItUp factory function will be made available via the global variable
npm install mixitup --save-dev
Creating a Mixer
mixitup() factory function available, you may now instantiate a "mixer" on your container to enable MixItUp functionality.
Call the factory function passing a selector string or a reference to your container element as the first parameter, and a the newly instantiated mixer will be returned.
Your mixer is now ready for you to interact with, either via its controls (see above), or its API (see Mixer API Methods). Click a control or call an API method to check that everything is working correctly.
If you wish to customize the functionality of your mixer, an optional "configuration object" can be passed as the second parameter to the
mixitup function. If no configuration object is passed, the default settings will be used.
Further reading: Configuration Object
Using the API
If you wish to interact with your mixer via its API, the mixer reference returned by the factory function can be used to call API methods.
Further reading: Mixer API Methods
.insert(), etc. When used, insertion, removal, sorting and pagination can be achieved purely via changes to your data model, without the uglyness of having to interact with or query the DOM directly.
Further reading: Using the Dataset API