Cacher is the code snippet organizer for pro developers

##Isotope sorting plugin setup

###1. Install

bower install isotope

###2. Usage

#####2.1 CONNECT JS TO HTML

<!-- Plugins JavaScript -->
<script src="js/isotope.pkgd.min.js"></script>

#####2.2 HTML

<div class="row">
    <div id="filters" class="portfolio-filters text-center col-md-6 col-md-offset-3">
        <ul class="list-inline">
            <li><a class="btn btn-default active" id="all" href="#portfolio" data-filter="*">All</a></li>   
            <li><a class="btn btn-default" href="#portfolio" data-filter=".web">Web</a></li>
            <li><a class="btn btn-default" href="#portfolio" data-filter=".apps">Apps</a></li>
            <li><a class="btn btn-default" href="#portfolio" data-filter=".icons">Icons</a></li>
        </ul>
    </div>
    <!-- /#filters -->
</div>
<!-- /.row -->
<div id="posts" class="row">
    <div class="item col-md-6 text-center web icons">
        <img src="http://placehold.it/200x200" alt="" />
        <h3>1stPostItemHeading</h3>
    </div>
    <!-- /.item -->
    <div class="item col-md-6 text-center apps icons">
        <img src="http://placehold.it/200x200" alt="" />
        <h3>1ndPostItemHeadingI</h3>
    </div>
    <!-- /.item -->
    <div class="item col-md-6 text-center icons">
        <img src="http://placehold.it/200x200" alt="" />
        <h3>3rdPostItemHeading</h3>
    </div>
    <!-- /.item -->
    <div class="item col-md-6 text-center web app">
        <img src="http://placehold.it/200x200" alt="" />
        <h3>4thPostItemHeading</h3>
    </div>
    <!-- /.item -->
</div>
<!-- /#posts.row -->

#####2.3 CSS

#filters {
    .btn {
        font-size: 18px;
        color: #3c4761;
        border-color: transparent;
        text-transform: uppercase;
        background: rgba(0,0,0,.1);
        box-shadow: none;
        .transition-all;
        
        &:hover,
        &.active {
            background: #fff;
        }
    }
}

.item {

    h3 {
        color: #3c4761;
        font-size: 20px;
        text-transform: uppercase;
    }
}

#####2.4 JS

// Isotope
$(window).load(function(){
    $(function(){
        var $container = $('#posts');

        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'fitRows'
        });

        $('#filters').on( 'click', 'a', function() {
            var filterValue = $(this).attr('data-filter');
            $('#filters a').removeClass('active');
            $(this).addClass('active');
            $container.isotope({ filter: filterValue });
        });
    }); 
});