MixItUp- A Dependency Free Filtering Plugin

In Front-end development we often have to use some plugin to filter products/items category wise. There are some plugins available for that like mixitup. MixItUp is a dependency free filter plugin which comes with lots of modification options. Let’s take a look at how we can integrate it in our project

Step 1: At first download the latest version of mixitup from Github. Then copy the mixitup.min.js file to your project folder and link them to your html file.

Step 2:   Basic HTML markup for the filter

<div class="controls">
    <button type="button" class="control" data-filter="all">All</button>
    <button type="button" class="control" data-toggle=".green">Green</button>
    <button type="button" class="control" data-toggle=".blue">Blue</button>
    <button type="button" class="control" data-toggle=".pink">Pink</button>
</div>
<div class="container">
    <div class="mix green"></div>
    <div class="mix green"></div>
    <div class="mix blue"></div>
    <div class="mix pink"></div>
    <div class="mix green"></div>
    <div class="mix blue"></div>
    <div class="mix pink"></div>
    <div class="mix blue"></div>
</div>

Step 3: Now it’s time to add some css. Add the following css for basic style. However, you can avoid this & add your own css in your project.

.controls {
    padding: 1rem;
    background: #333;
    font-size: 0.1px;
}

.control {
    position: relative;
    display: inline-block;
    width: 2.7rem;
    height: 2.7rem;
    background: #444;
    cursor: pointer;
    font-size: 0.1px;
    color: white;
    transition: background 150ms;
}

.control:hover {
    background: #3f3f3f;
}

.control[data-filter]:after,
.control[data-toggle]:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    border: 2px solid currentColor;
    border-radius: 2px;
    background: currentColor;
    transition: background-color 150ms, border-color 150ms;
}

.mixitup-control-active {
    background: #393939;
}

.mixitup-control-active[data-toggle]:after {
    background: transparent;
}

.control:first-of-type {
    border-radius: 3px 0 0 3px;
}

.control:last-of-type {
    border-radius: 0 3px 3px 0;
}

.control[data-filter=".green"],
.control[data-toggle=".green"] {
    color: #91e6c7;
}

.control[data-filter=".blue"],
.control[data-toggle=".blue"] {
    color: #5ecdde;
}

.control[data-filter=".pink"],
.control[data-toggle=".pink"] {
    color: #d595aa;
}
.mix {
    background: #fff;
    border-top: .5rem solid currentColor;
    border-radius: 2px;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.mix:before {
    content: '';
    display: inline-block;
    padding-top: 56.25%;
}

.mix.green {
    color: #91e6c7;
}

.mix.pink {
    color: #d595aa;
}

.mix.blue {
    color: #5ecdde;
}

Step 4: We are almost there. Now add the following js code in the script tag to activate the filtering.

<script>
   var containerEl = document.querySelector('.container');
   var mixer = mixitup(containerEl);
</script>

That’s it. I hope the plugin is working well.

To explore more options & functionality please visit mixitup official site https://www.kunkalabs.com/mixitup/

HAPPY CODING!!!