Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
A high-performance, dependency-free library for animated filtering, sorting and more
MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove DOM elements with beautiful animations.
MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts and compatible with inline-flow, percentages, media queries, flexbox and more.
For a live sandbox, full documentation, tutorials and more, please visit kunkalabs.com/mixitup.
Migrating from MixItUp 2? Check out the MixItUp 3 Migration Guide.
MixItUp is open source and free to use for non-commercial, educational and non-profit use. For use in commercial projects, a commercial license is required. For licensing information and FAQs please see the MixItUp Licenses page.
MixItUp 3 has been tested for compatibility with the following browsers.
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:
By default, MixItUp will query the container for targets matching the selector '.mix'
.
<div class="container">
<div class="mix category-a" data-order="1"></div>
<div class="mix category-b" data-order="2"></div>
<div class="mix category-b category-c" data-order="3"></div>
<div class="mix category-a category-d" data-order="4"></div>
</div>
Targets can be filtered using any valid selector e.g. '.category-a'
, and are sorted via optional custom data attributes e.g. 'data-order'
.
Further reading: Marking-up MixItUp Containers
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 'all'
, 'none'
, or a valid selector string e.g. '.category-a'
.
<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".category-a">Category A</button>
<button type="button" data-filter=".category-b">Category B</button>
<button type="button" data-filter=".category-c">Category C</button>
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 sorting order e.g. 'order'
, 'order:asc'
, 'order:desc'
.
<button type="button" data-sort="order:asc">Ascending</button>
<button type="button" data-sort="order:descending">Descending</button>
<button type="button" data-sort="random">Random</button>
The values 'default'
and '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
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
Firstly, load the MixItUp JavaScript library using the preferred method for your project.
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.
...
<script src="/path/to/mixitup.min.js"></script>
</body>
</html>
With this technique, the MixItUp factory function will be made available via the global variable mixitup
.
If you are building a modular JavaScript project with Webpack, Browserify, or RequireJS, MixItUp can be installed using your package manager of choice (e.g. npm, jspm, yarn) and then imported into any of your project's modules.
npm install mixitup --save
// ES2015
import mixitup from 'mixitup';
// CommonJS
var mixitup = require('mixitup');
// AMD
require(['mixitup'], function(mixitup) {
});
With the 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.
var mixer = mixitup('.container');
var mixer = mixitup(containerEl);
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
var mixer = mixitup(containerEl, {
selectors: {
target: '.blog-item'
},
animation: {
duration: 300
}
});
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.
var mixer = mixitup(containerEl);
mixer.filter('.category-a');
Further reading: Mixer API Methods
You may wish to use MixItUp 3's new "dataset" API. Dataset is designed for use in API-driven JavaScript applications, and can be used instead of DOM-based methods such as .filter()
, .sort()
, .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
FAQs
A high-performance, dependency-free library for animated filtering, sorting and more
The npm package mixitup receives a total of 2,094 weekly downloads. As such, mixitup popularity was classified as popular.
We found that mixitup demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.