Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/patrickkunka/mixitup

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
https://github.com/patrickkunka/mixitup

animation dom-manipulation filter sort vanilla-js

Last synced: about 2 months ago
JSON representation

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

Host: GitHub
URL: https://github.com/patrickkunka/mixitup
Owner: patrickkunka
Created: 2013-04-30T17:09:44.000Z (over 11 years ago)
Default Branch: v3
Last Pushed: 2022-01-29T02:38:32.000Z (almost 3 years ago)
Last Synced: 2024-04-14T04:39:48.741Z (8 months ago)
Topics: animation, dom-manipulation, filter, sort, vanilla-js
Language: JavaScript
Homepage: https://www.kunkalabs.com/mixitup/
Size: 2.39 MB
Stars: 4,509
Watchers: 159
Forks: 732
Open Issues: 69
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

awesome-javascript - mixitup - A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more - ★ 4158 (Misc)

README

# MixItUp 3

[![Build Status](https://travis-ci.org/patrickkunka/mixitup.svg?branch=v3)](https://travis-ci.org/patrickkunka/mixitup)
[![Coverage Status](https://coveralls.io/repos/github/patrickkunka/mixitup/badge.svg?branch=v3)](https://coveralls.io/github/patrickkunka/mixitup?branch=v3)
[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/gh/patrickkunka/mixitup/badge?style=rounded)](https://www.jsdelivr.com/package/gh/patrickkunka/mixitup)

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](https://www.kunkalabs.com/mixitup/).

Migrating from MixItUp 2? Check out the [MixItUp 3 Migration Guide](./docs/mixitup-3-migration-guide.md).

#### Licensing

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](https://www.kunkalabs.com/mixitup/licenses/) page.

#### Documentation

- [Factory Function](./docs/mixitup.md)
- [Configuration Object](./docs/mixitup.Config.md)
- [Mixer API Methods](./docs/mixitup.Mixer.md)
- [State Object](./docs/mixitup.State.md)
- [Mixer Events](./docs/mixitup.Events.md)

#### Browser Support

MixItUp 3 has been tested for compatibility with the following browsers.

- Chrome 16+
- Firefox 16+
- Safari 6.2+
- Yandex 14+
- Edge 13+
- IE 10+ (with animations), IE 8-9 (no animations)

## Getting Started

#### Contents

- [Building the Container](#building-the-container)
- [Building Controls](#building-controls)
- [Styling the Container](#styling-the-container)
- [Loading MixItUp](#loading-mixitup)
- [Creating a Mixer](#creating-a-mixer)
- [Configuration](#configuration)

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 `'.mix'`.

```html

```

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](https://www.kunkalabs.com/tutorials/marking-up-mixitup-containers/)

### Building Controls

One way that filtering and sorting happens is when controls are clicked. You may use any clickable element as a control, but `` is recommended for accessibility.

#### Filter Controls

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'`.

```html
All
Category A
Category B
Category C
```

Further reading: [Filtering with MixItUp](https://www.kunkalabs.com/tutorials/filtering-with-mixitup/)

#### Sort Controls

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'`.

```html
Ascending
Descending
Random
```

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](https://www.kunkalabs.com/tutorials/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](https://www.kunkalabs.com/tutorials/mixitup-grid-layouts/)

### Loading MixItUp

Firstly, load the MixItUp JavaScript library using the preferred method for your project.

#### Script Tag

The most simple way to load MixItUp in your project is to include it via a `` tag before the closing `</body>` tag on your page.

```html
...