Skip to content

Commit

Permalink
Release v2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Patrick Kunka committed Mar 5, 2014
1 parent 1c149cf commit a8e7a89
Show file tree
Hide file tree
Showing 15 changed files with 3,329 additions and 1,360 deletions.
14 changes: 4 additions & 10 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
Icon?
ehthumbs.db
Thumbs.db
node_modules
components
.tmp
.DS_Store
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
MixItUp ChangeLog
=================

## 2.0.0
- Complete rewrite. See [Version 1 Migration Guide](docs/version-1-migration.md) for more information.
96 changes: 96 additions & 0 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
module.exports = function(grunt) {
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
replace: {
clearBanner: {
src: ['src/jquery.mixitup.js'],
dest: ['src/jquery.mixitup.js'],
replacements: [{
from: /\/\*([\s\S]*?)\*\//,
to: ''
}]
}
},
jshint: {
ignore_warning: {
options: {
'-W032': true,
'-W030': true,
'-W103': true,
'-W004': true,
'-W122': true
},
src: ['src/*.js']
}
},
uglify: {
build: {
options: {
preserveComments: 'some'
},
src: 'src/jquery.mixitup.js',
dest: 'build/jquery.mixitup.min.js'
}
},
bump: {
options: {
files: ['package.json','bower.json'],
updateConfigs: ['pkg'],
commit: false,
push: false,
createTag: true
}
},
usebanner: {
addBanner:{
options: {
position: 'top',
banner: '/**!\n' +
' * MixItUp v<%= pkg.version %>\n' +
' *\n' +
' * @copyright Copyright '+(new Date().getFullYear())+' KunkaLabs Limited.\n' +
' * @author KunkaLabs Limited.\n' +
' * @link https://mixitup.kunkalabs.com\n' +
' *\n' +
' * @license Commercial use requires a commercial license.\n' +
' * https://mixitup.kunkalabs.com/licenses/\n' +
' *\n' +
' * Non-commercial use permitted under terms of CC-BY-NC license.\n' +
' * http://creativecommons.org/licenses/by-nc/3.0/\n' +
' */',
linebreak: false
},
files: {
src: ['src/jquery.mixitup.js']
}
}
}
});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-bump');
grunt.loadNpmTasks('grunt-banner');

grunt.registerTask('build', [
'jshint',
'uglify:build'
]);

grunt.registerTask('release', function(target){
if(!target){
target = 'patch';
}
return grunt.task.run(
'bump-only:'+target,
'replace:clearBanner',
'usebanner:addBanner',
'build',
'bump-commit'
);
});

grunt.registerTask('default', 'build');
}
169 changes: 66 additions & 103 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,97 @@
## MixItUp - A CSS3 and jQuery Filter & Sort Plugin
MixItUp
=========

### What Is MixItUp?
### 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!
MixItUp is a jQuery plugin providing animated filtering and sorting.

### How does it work?
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 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.
### Why MixItUp?

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.
MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts.

### Which browsers and devices can I use it with?
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!

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.
### Basic Overview

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.
For a getting started guide, tutorials, documentation and support, please visit the MixItUp website at [mixitup.kunkalabs.com](https://mixitup.kunkalabs.com)

### How did it begin development?
A typical MixItUp workflow looks like this:

At Barrel LLC, many of the designs we create for our clients involve pages with responsive grid layouts and filtering between categories. We weren't satisfied with how the existing filtering plugins out there handled percentage-based responsive behavior, and seeing a need for something lighter and more forward-looking, we decided to build our own solution!
#### HTML

### How may I use MixItUp?
Build your container:

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.
```
<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.
## Getting Started
Build your filter controls:

For the full documentation and list of configuration options please visit out marketing site at [mixitup.io](http://mixitup.io).
```
<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.
MixItUp couldn't be easier to setup. Just follow these simple steps in your HTML, CSS and JavaScript:

### HTML
Build your sort controls:

#### Build Your Container and Content
```
<button class="sort" data-filter="my-order:asc">Ascending Order</button>
<button class="sort" data-sort="my-order:desc">Descending Order</button>
```
> Sorting happens when sort buttons are clicked.
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.
#### CSS

The filtering categories of each target element should be entered into its class attribute (after the targetSelector class if you are using a class):
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.
<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>
#### JS

Additional alphabetic or numeric HTML5 data attributes for sorting may also be added to your target elements:
Instantiate MixItUp on your container using jQuery:

<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="Francis" data-age="5"></li>
<li class="mix krakens" data-name="Kraken" data-age="3987"></li>
<li ...
</ul>
```
$(function(){
$('#Container').mixItUp();
});
```
> Using our container's ID, we can instantiate MixItUp with the jQuery method `.mixItUp()`
#### Build Your Filter Controls
### Full Documentation

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.
1. [Configuration Object](docs/configuration-object.md)
1. [API Methods](docs/api-methods.md)
1. [State Object](docs/state-object.md)
1. [Events](docs/events.md)
1. [Version 1 Migration Guide](docs/version-1-migration.md)

A much prettier version of the full documentation is also available at [mixitup.kunkalabs.com/docs](https://mixitup.kunkalabs.com/docs)

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.
### ChangeLog

<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>
1. [ChangeLog](CHANGELOG.md)

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

#### Build Your Sort Controls
MixItUp is free to use in non-commercial projects under the terms of the creative commons CC-BY-NC license. However, for use in commercial projects and products we require that you purchase a commercial license.

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.
For more information see [mixitup.kunkalabs.com/licenses](https://mixitup.kunkalabs.com/licenses)

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:
<br/>

<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 our the full documentation on [mixitup.io](http://mixitup.io) for all available configuration options.
-------
*&copy; 2014 KunkaLabs Limited*
5 changes: 2 additions & 3 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{
"name": "mixitup",
"version": "1.5.5",
"main": "jquery.mixitup.min.js",
"version": "2.0.0",
"dependencies": {
"jquery": ">=1.4"
"jquery": ">=1.7"
}
}
14 changes: 14 additions & 0 deletions build/jquery.mixitup.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit a8e7a89

Please sign in to comment.