Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Data Storage Media</h1>
<h5>A Classification</h5>

<div class="filters">

  <div class="ui-group">
    <h3>material</h3>
    <div class="button-group js-radio-button-group" data-filter-group="material">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".wire">steel wire</button>
      <button class="button" data-filter=".tape">tape</button>
      <button class="button" data-filter=".surface">disc/surface</button>
      <button class="button" data-filter=".coated">coated disc</button>
      <button class="button" data-filter=".disk">metal coated disk</button>
      <button class="button" data-filter=".paper">paper</button>
      <button class="button" data-filter=".film">film</button>
      <button class="button" data-filter=".semi">semiconductor</button>
    </div>
  </div>

  <div class="ui-group">
    <h3>inscription</h3>
    <div class="button-group js-radio-button-group" data-filter-group="inscription">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".magnetic">magnetic</button>
      <button class="button" data-filter=".optical">optical</button>
      <button class="button" data-filter=".manual">manual</button>
      <button class="button" data-filter=".mechanical">mechanical</button>
      <button class="button" data-filter=".chemical">chemical</button>
      <button class="button" data-filter=".electrical">electrical</button>
    </div>
  </div>

  <div class="ui-group">
    <h3>signal</h3>
    <div class="button-group js-radio-button-group" data-filter-group="signal">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".analog">analog</button>
      <button class="button" data-filter=".digital">digital</button>
      <button class="button" data-filter=".discrete">discrete</button>
    </div>
  </div>

  <div class="ui-group">
    <h3>category</h3>
    <div class="button-group js-radio-button-group" data-filter-group="category">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".symbols">symbols</button>
      <button class="button" data-filter=".sound">sound</button>
      <button class="button" data-filter=".image">image</button>
      <button class="button" data-filter=".moving">moving image</button>
    </div>
  </div>

</div>

<div id='formats' class="grid">
  <div class="color-shape tape magnetic"><i>cassette</i></div>
  <div class="color-shape tape magnetic"><i>1/4" tape reel</i></div>
  <div class="color-shape tape magnetic"><i>1/2" tape reel</i></div>
  <div class="color-shape disk magnetic digital"><i>hard disk</i></div>
  <div class="color-shape disk magnetic digital"><i>floppy disk</i></div>
  <div class="color-shape semi electrical digital"><i>USB flash drive</i></div>
  <div class="color-shape disk optical digital"><i>CD-R(W)</i></div>
  <div class="color-shape surface mechanical analog"><i>record</i></div>
  <div class="color-shape tape magnetic moving"><i>video cassette</i></div>
  <div class="color-shape film chemical analog moving"><i>film reel</i></div>
  <div class="color-shape tape magnetic sound"><i>audio cassette</i></div>
  <div class="color-shape surface mechanical analog sound"><i>phonograph record</i></div>
  <div class="color-shape surface mechanical analog sound"><i>phonograph cylinder</i></div>
  <div class="color-shape surface mechanical analog sound"><i>shellac record</i></div>
  <div class="color-shape surface mechanical analog sound"><i>microgroove record</i></div>
  <div class="color-shape coated mechanical analog sound"><i>acetate disc</i></div>
  <div class="color-shape wire magnetic analog sound"><i>wire recording</i></div>
  <div class="color-shape paper mechanical fysical sound"><i>piano roll</i></div>
  <div class="color-shape film chemical analog image"><i>photograph</i></div>
</div>

<div id='standards' class="grid">
  <button class="color-shape tape magnetic analog moving"><a href="https://en.wikipedia.org/wiki/VHS" target="_blank">VHS</a></button>
  <button class="color-shape tape magnetic analog moving"><a href="https://en.wikipedia.org/wiki/8_mm_video_format" target="_blank">Video8</a></button>
  <button class="color-shape tape magnetic analog moving"><a href="https://en.wikipedia.org/wiki/Video_Cassette_Recording" target="_blank">VCR</a></button>
  <div class="color-shape tape magnetic analog moving"><a href="https://en.wikipedia.org/wiki/S-VHS" target="_blank">S-VHS</a></div>
  <div class="color-shape tape magnetic digital moving">D-VHS</div>
  <div class="color-shape tape magnetic digital moving">D-Theater</div>
  <div class="color-shape tape magnetic analog moving">Betamax</div>
  <button class="color-shape tape magnetic analog sound">Compact Cassette</button>
  <button class="color-shape tape magnetic digital sound">DAT</button>
  <div class="color-shape disk magnetic digital sound">MiniDisc</div>
  <div class="color-shape disk optical digital sound">CD</div>
  <div class="color-shape disk optical digital moving">VCD</div>
  <div class="color-shape disk optical digital moving">DVD</div>
  <div class="color-shape disk optical digital moving">Blu-ray</div>
  <div class="color-shape disk optical analog moving">LaserDisc</div>
  <div class="color-shape tape magnetic analog sound">8-track tape</div>
  <div class="color-shape tape mechanical analog sound">Tefiphon</div>
  <div class="color-shape tape mechanical analog sound">Teficord</div>
  <div class="color-shape tape mechanical analog sound">Tefifon</div>
  <div class="color-shape surface mechanical analog sound">LP</div>
  <div class="color-shape surface mechanical analog sound">78rpm</div>
  <div class="color-shape surface mechanical analog sound">45rpm single</div>
   <div class="color-shape surface mechanical analog sound">45rpm EP</div>
  <div class="color-shape coated mechanical analog sound"><a href="https://en.wikipedia.org/wiki/Electrical_transcription#Transcription_discs" target="_blank">Transcription disc</a></div>
  <div class="color-shape film chemical analog moving">8mm film</div>
  <div class="color-shape film chemical analog moving">16mm film</div>
  <div class="color-shape film chemical  analog moving">35mm film</div>
  <div class="color-shape paper mechanical fysical symbols">Book</div>
  <div class="color-shape paper mechanical fysical symbols">Magazine</div>
  <div class="color-shape paper mechanical discrete symbols">Document</div>
  <div class="color-shape paper mechanical fysical symbols">Poster</div>
  <div class="color-shape paper manual fysical symbols">Handwritten letter</div>
  <div class="color-shape paper manual fysical symbols">Handwritten score</div>
  <div class="color-shape paper mechanical discrete symbols">Printed score</div>
  <div class="color-shape paper mechanical discrete symbols">Typed letter</div>
  <div class="color-shape paper manual symbols">Autograph</div>
  <div class="color-shape paper mechanical discrete symbols">Programme</div>
  <div class="color-shape film chemical image">Polaroid picture</div>
  <div class="color-shape paper manual image">Painting</div>
  <div class="color-shape paper manual image">Drawing</div>
  <div class="color-shape paper mechanical fysical image">Computer artwork</div>
</div>
              
            
!

CSS

              
                html {
  font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma,
    Sans-Serif;
}

* {
  box-sizing: border-box;
}

h1 {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.7 rem;
  font-weight: normal;
  line-height: 20px;
}

h5 {
  letter-spacing: 1px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #9396a4;
  font-weight: normal;
  line-height: 10px;
}

body {
  background: #393c42;
  color: white;
}

/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.5em 1em;
  background: #eee;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0.2)
  );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #8cf;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28f;
}

.button.is-checked{
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button.highlighted {
  background-color: #70fc49;
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
  content: "";
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child {
  border-radius: 0.5em 0 0 0.5em;
}
.button-group .button:last-child {
  border-radius: 0 0.5em 0.5em 0;
}

/* ---- isotope ---- */

.grid {
  background: #5d6068;
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ui group */

.ui-group {
  display: table;
}

.ui-group h3 {
  display: inline-block;
  margin-right: 1em;
  width: 80px;  
  text-align: right;
  vertical-align: text-bottom;
  font-size: 16px;
  font-weight: normal;  
  line-height: 15px;  
}

.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}

/* color-shape */

.color-shape {
  width: 88px;
  height: 35px;
  padding: 3px;
  margin: 8px;
  border-radius: 4px;
  color: black;
  background: grey;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
  line-height: 14px;
}

.color-shape:hover {
  background-color: #8cf;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.color-shape:active,
.color-shape.is-checked {
  background-color: #28f;
}

.color-shape.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.color-shape:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

.color-shape.round {
  border-radius: 35px;
}

.color-shape.big.round {
  border-radius: 75px;
}

.color-shape.moving {
  background: #e5654b;
}
.color-shape.sound {
  background: #fffc72;
}
.color-shape.image {
  background: #66ccff;
}
.color-shape.symbols {
  background: #8df274;
}

.color-shape.wide,
.color-shape.big {
  width: 150px;
}
.color-shape.tall,
.color-shape.big {
  height: 150px;
}

              
            
!

JS

              
                // external js: isotope.pkgd.js

// init Isotope
var $grid = $(".grid").isotope({
  itemSelector: ".color-shape"
});

// store filter for each group
var filters = {};

$(".filters").on("click", ".button", function(event) {
  var $button = $(event.currentTarget);
  // get group key
  var $buttonGroup = $button.parents(".button-group");
  var filterGroup = $buttonGroup.attr("data-filter-group");
  // set filter for group
  filters[filterGroup] = $button.attr("data-filter");
  // combine filters
  var filterValue = concatValues(filters);
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

/////////////feedback hover to filters
var highlights = {};

$(".grid").on(
  {
    mouseenter: function(event) {
      //alert(event.type);
      var $standard = $(event.currentTarget);
      var classValue = $standard.attr("class");
      var highlights = classValue.split(" ").slice(1, 5); //array of "color-shape" + 4 filter values
      //var highlights = filterValue.slice(1, 5);
      //alert(highlights[0]);
      var $filters = $(".filters");
      var $button = $filters.find("button[data-filter*=" + highlights[0] + "]");
      $button.addClass("highlighted");
      $button = $filters.find("button[data-filter*=" + highlights[1] + "]");
      $button.addClass("highlighted");
      $button = $filters.find("button[data-filter*=" + highlights[2] + "]");
      $button.addClass("highlighted");
      $button = $filters.find("button[data-filter*=" + highlights[3] + "]");
      $button.addClass("highlighted");
    },
    mouseleave: function(event) {
      $(".filters").find(".highlighted").removeClass("highlighted");
    }
  },
  ".color-shape"
);

// change is-checked class on buttons
$(".button-group").each(function(i, buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on("click", "button", function(event) {
    $buttonGroup.find(".is-checked").removeClass("is-checked");
    var $button = $(event.currentTarget);
    $button.addClass("is-checked");
  });
});

// flatten object by concatting values
function concatValues(obj) {
  var value = "";
  for (var prop in obj) {
    value += obj[prop];
  }
  return value;
}

// split object by concatting values
function splitValues(obj) {
  var value = "";
  for (var prop in obj) {
    value += obj[prop];
  }
  return value;
}

              
            
!
999px

Console