JSFiddle - React, Tailwind, and code Playground

by desandro

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="blog" class="container section dark">
    <div id="board" class="row">
        <div id="streamwrapper">
            <div id="stream">
                <article id="509" class="post-509 post type-post status-publish format-chat hentry category-photographie category-portrait big photo">
                    <a class="ajaxed" href="http://www.gablabelle.com/eve-et-son-cafe"><img data-src="http://www.gablabelle.com/wp-content/themes/gablabelle/images/transparent.gif" src="http://www.gablabelle.com/wp-content/uploads/gablabelle-20120312-0060-570x570.jpg" alt="" /></a>
                </article>
                <article id="514" class="post-514 post type-post status-publish format-image hentry category-corporatif category-photographie category-portrait small photo">
                    <a class="ajaxed" href="http://www.gablabelle.com/olivier-m-2"><img data-src="http://www.gablabelle.com/wp-content/themes/gablabelle/images/transparent.gif" src="http://www.gablabelle.com/wp-content/uploads/gablabelle-20120717-_GAB2249-Edit-copy-e1348195892766.jpg" alt="" /></a>
                </article>
                <article id="506" class="post-506 post type-post status-publish format-image hentry category-photographie category-portrait small photo">
                    <a class="ajaxed" href="http://www.gablabelle.com/valene-t-2"><img data-src="http://www.gablabelle.com/wp-content/themes/gablabelle/images/transparent.gif" src="http://www.gablabelle.com/wp-content/uploads/gablabelle-20120417-00751-270x270.jpg" alt="" /></a>
                </article>
                <article id="469" class="post-469 post type-post status-publish format-chat hentry category-photographie category-portrait big photo">
                    <a class="ajaxed" href="http://www.gablabelle.com/karine-et-les-feuilles"><img data-src="http://www.gablabelle.com/wp-content/themes/gablabelle/images/transparent.gif"...

CSS

html {
    overflow-x: hidden;
    overflow-y: scroll;
}
body {
    background: #161616;
    padding: 0;
}
.dark {
    background: #161616;
}
/**** Posts ****/
article.post {
    position: relative;
    color: white !important;
    float: left;
    display: block;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

body:after { display: none; }

/**** Media queries ****/
@media (max-width: 767px) {
    body:after { content: 'small'; }

    article.post {
        margin: 0 0 1px;
    }
    article.small img,
    article.articles img,
    article.long img,
    article.tall img ,
    article.big img {
        width: 100%;
        border-left: solid 1px #161616;
        border-right: solid 1px #161616;
    }
    article.small,
    article.articles,
    article.long,
    article.tall,
    article.big {
        width: 49.5%; /* hack so it always fits */
    }
}
@media (min-width: 768px) and (max-width: 979px) {

    body:after { content: 'medium'; }

    article.post {
        margin: 0 0 20px 20px;
    }
    .isotope article.post { margin: 0 0 20px; }

    article.small,
    article.small img,
    article.articles,
    article.articles img {
        width: 166px;
        height: 166px;
    }
    article.long,
    article.long img {
        width: 352px;
        height: 166px;
    }
    article.tall,
    article.tall img {
        width: 166px;
        height: 352px;
    }
    article.big,
    article.big img {
        width: 352px;
        height: 352px;
    }
}
@media (min-width: 980px) and (max-width: 1199px) {

    body:after { content: 'big'; }

    article.post {
        margin: 0 0 20px 20px;
    }

    .isotope article.post { margin: 0 0 20px; }
    article.small,
    article.small img,
    article.articles,
    article.articles img {
        width: 220px;
        height: 220px;
    }
    article.long,
    article.long img {
        width: 460px;
        height: 220px;
    }
    article.tall,
    article.tall img {
      ...

JavaScript

/*jshint undef: true, browser: true, jquery: true */

var layoutI = 0;

// modified Isotope methods for gutters in masonry
// http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html
$.Isotope.prototype._getMasonryGutterColumns = function() {
  var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
  var containerWidth = this.element.width();
  
  this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
                // or use the size of the first item
                this.$filteredAtoms.outerWidth(true) ||
                // if there's no items, use size of container
                containerWidth;

  this.masonry.columnWidth += gutter;

  this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );

    this.masonry.cols = Math.max( this.masonry.cols, 1 );


};

$.Isotope.prototype._masonryReset = function() {
  // layout-specific props
  this.masonry = {};
  // FIXME shouldn't have to call this again
  this._getMasonryGutterColumns();
  var i = this.masonry.cols;
  this.masonry.colYs = [];
  while (i--) {
    this.masonry.colYs.push( 0 );
  }
};

$.Isotope.prototype._masonryResizeChanged = function() {
  var prevSegments = this.masonry.cols;
  // update cols/rows
  this._getMasonryGutterColumns();
  // return if updated cols/rows is not equal to previous
  return ( this.masonry.cols !== prevSegments );
};

$(document).ready(function(){

  var $container = $("#stream");

  // cache jQuery window
  var $window = $(window);

  // start up isotope with default settings
  $container.imagesLoaded( function(){
    reLayout();
    $window.smartresize( reLayout );
  });


  function reLayout() {
  
    var mediaQueryId = getComputedStyle( document.body, ':after' ).getPropertyValue('content');
    // console.log( mediaQueryId );
    var windowSize = $window.width();
    var masonryOpts;
    // update sizing options 
    switch ( mediaQueryId ) {
      case 'bigger' :
       ...