CodePen

HTML

            
              <h1>Sortboard</h1>
  <p>Easy sorting and filtering of elements.</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 id="dsortlist" 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-2">&#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-2">&#9820;</li>

      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>

      <li data-filter="white first-line rooks-2">&#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-2">&#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">
  <a href="https://github.com/joseluisq/sortboardjs" target="_blank">View on Github</a> 
</p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  font-family: 'Monaco', monospace;
  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: 5px;
  font-weight: normal;
}

#chessboard {
  margin: 0 auto;
  max-width: 800px;
  overflow: hidden;
  position: relative;
}

/* Filters */
#filters {
  text-align: center;
  color: #b0b0b0;
  font-size: 12px;
  padding: 15px 0 0 0;
}

#filters a {
  color: #2e3032;
  margin-left: 0;
  margin-right: 0;
  text-decoration: none;
  transition: all .2s ease-out;
  font-size: 11px;
}

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

#sortlist {
  position: relative;
  display: block;
  padding: 0;
  margin: 1.5em auto;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.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;

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

#sortlist > li:hover {
  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 {
  font-size: 11px;
  display: block;
  padding: 2em 0;
}

.link a {
  color: #2e3032;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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

(function() {
  'use strict';

  // Initializing the board.
  var sortlist = document.getElementById('sortlist');
  var sb = new Sortboard(sortlist, {
    gutter: 10,
    filterComplete: function(e) {
      console.log(e);
    },
    sortComplete: function() {
      console.log('Sort is completed.');
    }
  });

  // Filtering
  var i, filter,
    links = document.getElementsByTagName('a');

  // Click link event callback
  function clickCallback() {
    return function() {
      if (this.className !== 'active') {
        resetActiveLinks();

        // Retrieve the filter value
        filter = this.getAttribute('data-filter');

        // Filtering by retrieved value
        sb.filterBy(filter);

        // Set active class for current link
        this.className = 'active';

        // Set filter class for sortlist
        sortlist.className = (filter === 'all') ? '': 'filtered';
      }
    };
  }

  // Reset active link classes
  function resetActiveLinks() {
    for (var i = 0; i < links.length; ++i) {
      links[i].className = '';
    }
  }

  // Click event handler for each filter link
  for (i = 0; i < links.length; ++i) {
    links[i].addEventListener('click', clickCallback(), false);
  }

  // Default trigger for first filter link
  clickCallback().apply(links[0], []);
})(this);

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................