CodePen

HTML

            
              <h1>My Chessboard</h1>
<p>Sample of filter and sorting list by CSS3 Matrix and Mootools</p>

<nav id="filters">
  Filter by: 
  <a href="javascript:;" data-filter="all">All</a> | 
  <a href="javascript:;" data-filter="black">Black</a> | 
  <a href="javascript:;" data-filter="white">White</a> | 
  <a href="javascript:;" data-filter="first-line">First Line</a> | 
  <a href="javascript:;" data-filter="second-line">Second Line</a> | 
  <a href="javascript:;" data-filter="royalty">Royalty</a> | 
  <a href="javascript:;" data-filter="infantry-black">Black Infantry</a> | 
  <a href="javascript:;" data-filter="infantry-white">White Infantry</a> | 
  <a href="javascript:;" data-filter="rooks">Rooks</a>
</nav>


<div id="chessboard">

  <ul id="sortlist">

    <li data-filter="black second-line infantry-black">&#9823;</li>
    <li data-filter="black second-line infantry-black">&#9823;</li>
    <li data-filter="black second-line infantry-black">&#9823;</li>
    <li data-filter="black second-line infantry-black">&#9823;</li>
    <li data-filter="black second-line infantry-black">&#9823;</li>
    <li data-filter="black second-line infantry-black">&#9823;</li>
    <li data-filter="black second-line infantry-black">&#9823;</li>
    <li data-filter="black second-line infantry-black">&#9823;</li>

    <li data-filter="black first-line rooks">&#9820;</li>
    <li data-filter="black first-line infantry-black">&#9822;</li>
    <li data-filter="black first-line infantry-black">&#9821;</li>
    <li data-filter="black first-line royalty">&#9819;</li>
    <li data-filter="black first-line royalty">&#9818;</li>
    <li data-filter="black first-line infantry-black">&#9821;</li>
    <li data-filter="black first-line infantry-black">&#9822;</li>
    <li data-filter="black first-line rooks">&#9820;</li>

    <li data-filter="empty"></li>
    <li data-filter="empty"></li>
    <li data-filter="empty"></li>
    <li data-filter="empty"></li>
    <li data-filter="empty"></li>
    <li data-filter="empty"></li>
    <li data-filter="empty"></li>
    <li data-filter="empty"></li>

    <li data-filter="white first-line rooks">&#9814;</li>
    <li data-filter="white first-line infantry-white">&#9816;</li>
    <li data-filter="white first-line infantry-white">&#9815;</li>
    <li data-filter="white first-line royalty">&#9813;</li>
    <li data-filter="white first-line royalty">&#9812;</li>
    <li data-filter="white first-line infantry-white">&#9815;</li>
    <li data-filter="white first-line infantry-white">&#9816;</li>
    <li data-filter="white first-line rooks">&#9814;</li>

    <li data-filter="white second-line infantry-white">&#9817;</li>
    <li data-filter="white second-line infantry-white">&#9817;</li>
    <li data-filter="white second-line infantry-white">&#9817;</li>
    <li data-filter="white second-line infantry-white">&#9817;</li>
    <li data-filter="white second-line infantry-white">&#9817;</li>
    <li data-filter="white second-line infantry-white">&#9817;</li>
    <li data-filter="white second-line infantry-white">&#9817;</li>
    <li data-filter="white second-line infantry-white">&#9817;</li>

  </ul>

</div>


<p class="link">On github:  <a href="https://github.com/joseluisq/uFilterGrid">https://github.com/joseluisq/uFilterGrid</a></p>
            
          
!

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body {
  font-family: 'Open Sans Condensed', sans-serif;
  background: rgba(226, 226, 226, 0.3);
  cursor: default;
  margin: 0;
}
h1, p {
  text-align: center;
  padding: 0;
  display: block;
  margin: 0;
}
p {
  padding: 0;
  color: #B0B0B0;  
}
h1 {
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: normal;
}

#chessboard {
  max-width: 757px;
  margin: 0 auto;
}

/* Filters */
#filters {
  text-align: center;
  color: #ccc;
  font-size: 15px;
  padding: 15px 0 0 0;
}
#filters a {
  color: #373A3C;
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;

  transition: all .2s ease-out;
}
#filters a:first-child {
}

#filters a:hover,
#filters a.active {
  color: #d37070;
}

/* Sortlist */
#sortlist {
  position: relative;
  display: block;
  padding: 0;
  margin: 1.5em auto;

  transition: all .4s ease-out;
}
#sortlist li {
  position: absolute;
  width: 90px;
  height: 90px;
  display: block;
  text-align: center;
  font-size: 3.2em;
  line-height: 1.6em;
  overflow: hidden;    
  color: #868686;
  background-color: #E9E9E9;
  box-shadow: inset 0px 0px 0px 1px #CECECE;

  transition: all 0.4s ease-out;
}
#sortlist > li:hover {
  /*color: #d37070;*/
  color: #D17E7E;
}

/* Creating the chessboard */
#sortlist li:nth-child(-2n+8),
#sortlist li:nth-child(8) ~ li:nth-child(-2n+15), 
#sortlist li:nth-child(16) ~ li:nth-child(-2n+24), 
#sortlist li:nth-child(24) ~ li:nth-child(-2n+31), 
#sortlist li:nth-child(32) ~ li:nth-child(-2n+40), 
#sortlist li:nth-child(40) ~ li:nth-child(-2n+47), 
#sortlist li:nth-child(48) ~ li:nth-child(-2n+56), 
#sortlist li:nth-child(56) ~ li:nth-child(-2n+63) {
  background-color: white;
}

#sortlist.filtered > li {
  color: #D17E7E;
  background-color: white;
}

.link {
  padding: 10px 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // On Github: 
// https://github.com/joseluisq/uFilterGrid

var uFilterList = new Class({
    version: '1.0',
    Implements: [Events, Options],
    currentFilter: 'all',
    options: {
        margin: 0
    },
    initialize: function(sortlist, options) {
        this.sortlist = sortlist;
        this.setOptions(options);
        this._build();
    },
    _build: function() {
        window.addEvent('resize', this.sort.bind(this));
        this.sort();
    }.protect(),
    sort: function() {
        var sortlist = this.sortlist,
                w, h, sw, tw, th, rtw, cth, ctw, items,
                mr = this.options.margin;

        w = w = sw = tw = th = ctw = cth = rtw = 0;
        sw = sortlist.getParent().getSize().x;

        items = sortlist.getElements('li:not(.hidden)');
        this.size = items.length;

        items.each(function(li, i) {
            w = li.getSize().x;
            h = li.getSize().y;

            if (tw >= (sw - h - mr)) {
                tw = 0;
                th += h + mr;

                if (!ctw) {
                    ctw = i * w + ((i * mr) - mr);
                }
            } else {
                tw += i ? mr : 0;
            }

            tw += w;
            rtw = tw - w;
            cth = th + h;

            li.store('data-cords', rtw + ',' + th);
            this._effect(li, rtw + ',' + th, false);
        }.bind(this));

        sortlist.setStyles({
            'width': ctw ? ctw : this.size * w,
            'height': cth
        });
    },
    filterBy: function(filter) {
        if (this.currentFilter !== filter) {
            var xy, list = this.sortlist.getElements('li'),
                    matches = list.filter(function(li, i) {
                        return li.get('data-filter').test(filter, 'i');
                    }).length;

            if (!matches && filter !== 'all') {
                return;
            }

            this.currentFilter = filter;
            this.filtered = this.unfiltered = [];

            list.each(function(li) {
                xy = li.retrieve('data-cords');

                if (filter === 'all') {
                    this.filtered.push(li);
                    this._effect(li, xy, false);
                } else {
                    var b = li.get('data-filter').test(filter, 'i');

                    if (b) {
                        this.filtered.push(li);
                    } else {
                        this.unfiltered.push(li);
                    }

                    this._effect(li, xy, !b);
                }
            }.bind(this));

            this.sort();
        }
    },
    _effect: function(li, xy, h) {
        if (h) {
            li.addClass('hidden');
        } else {
            li.removeClass('hidden');
        }
        li.setStyles({
            'opacity': h ? 0 : 1,
            '-webkit-transform': 'matrix(1,0,0,1,' + xy + ') scale(' + (h ? '0.001' : '1') + ')',
            '-moz-transform': 'matrix(1,0,0,1,' + xy + ') scale(' + (h ? '0.001' : '1') + ')',
            'transform': 'matrix(1,0,0,1,' + xy + ') scale(' + (h ? '0.001' : '1') + ')'
        });
    }.protect(),
    getFilter: function() {
        return this.currentFilter;
    },
    getSize: function() {
        return this.size;
    },
    getItemsMatched: function() {
        return this.filtered;
    },
    getItemsUnmatched: function() {
        return this.unfiltered;
    }
});


// uFilterList In action
document.addEvent('domready', function() {
  // Initializing
  var sortlist = $('sortlist');
  var mg = new uFilterList(sortlist, {
    // you can set the margin in pixels
    margin: 5
  });

  // Filtering
  var filter, links = $$('a');
  links.addEvent('click', function() {
    if (!this.hasClass('active')) {

      // Retrieve the filter value
      filter = this.get('data-filter');
      // Filtering by retrieved value
      mg.filterBy(filter);

      links.removeClass('active');
      this.addClass('active');

      if (filter === 'all') {
        sortlist.removeClass('filtered');
      } else {
        sortlist.addClass('filtered');
      }
    }

  });

  // Trigger click event for first link
  links[0].fireEvent('click');
  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................