cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- github-ribbon -->
<a href="https://github.com/joseluisq/sortboard" target="_blank" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#353a43; color:#eee; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- //github-ribbon -->

<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>

            
          
!
            
              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;
}

@media screen and (max-width: 480px) {

  #filters a {
    margin: 20px 5px;
  }
 
}
            
          
!
            
              const sb = window.sortboard({
  container: '#sortlist',
  selector: 'li'
})

const anchors = children('#filters a')

anchors.forEach(el => {
  el.addEventListener(
    'click',
    event => {
      const an = event.target

      if (!an.classList.contains('active')) {
        const data = an.getAttribute('data-filter')
        sb.filter(data)

        anchors.forEach(a => {
          a.classList.remove('active')
        })
        an.classList.add('active')
      }
    },
    false
  )
})

function children(selector, parent = document) {
  return Array.prototype.slice
    .call(parent.querySelectorAll(selector))
}

            
          
!
999px
Loading ..................

Console