JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

CSS

/*
* Testament Shopify theme
* Copyright 2014, Underground Media
* www.shopifythemes.net
*
* Gridlock - A CSS responsive grid system [12 column - Desktop standard]
* @author Ben Plum
* @version 0.2.0
*
* Copyright © 2013 Ben Plum <[email protected]>
* Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/

/* !Reset Box-sizing */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; *behavior: url(boxsizing.htc); }

/* !Defaults */
.gridlock .row { margin-left: auto; margin-right: auto; width: 960px; /* Fallback */ }
.gridlock .row:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
.gridlock .row .row { margin-left: -1.0416666666666667%; margin-right: -1.0416666666666667%; width: 102.0833333333333334%; }
.gridlock .row [class*="desktop-"] { float: left; margin-left: 1.0416666666666667%; margin-right: 1.0416666666666667%; }
.gridlock .row [class*="desktop-"].right { float: right; }
.gridlock .row [class*="desktop-"].padded { margin-left: 0; margin-right: 0; padding-left: 1.0416666666666667%; padding-right: 1.0416666666666667%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; *behavior: none; }

.fl { float: left; }
.fr { float: right; }
.first { clear: left; }

/* !Rows, Widest to Thinest */	
@media screen and (min-width: 1180px) {
  .gridlock .row { position: absolute; width: 1150px; left: 50%; margin-left: -575px; }
}
@media screen and (max-width: 1180px) {
  .gridlock .row { position: absolute; width: 870px; left: 50%; margin-left: -435px; }
}
@media screen and (max-width: 900px) {
  .gridlock .row { position: absolute; width: 610px; left: 50%; margin-left: -305px; }
}

/* !Desktop - Default, 12 column, 1220 + 960 (min 980), IE Standard */
.gridlock .row .desktop-1  { width: 6.25%; }
.gridlock .row...

JavaScript

$(window).load(function () {
      $(document.body).fadeIn(1000);
  });



$(window).load(function () { 
 
  
    setTimeout(function () {
        $('#product-grid').masonry('reload');
    }, 1000);

  
    $('.sub-list-click a').click(function() {
    event.preventDefault();
      
      var sub = $(this).parent("li").next(".sub, .homepage-sub");

            if (sub.css('display') == 'none') {
              	
              	$(".sub, .homepage-sub").slideUp();
                  $(".sub, .homepage-sub").children("li").animate({
                      opacity: "0"
                  }, 10);               
              
              	setTimeout(function () {	
              		sub.slideDown();                  
                }, 200);
              	setTimeout(function () {
                  sub.children("li").animate({
                      opacity: "1"
                  }, 200); 
                }, 500);   
              
            } else {
                sub.slideUp();
            }      

        return false;
    });
          
  

    var go = true;
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100 && go) {
            $("header").fadeIn();
            go = false;
        } else if ($(this).scrollTop() < 100 && !go) {
            $("header").fadeOut();
            go = true;
        }
    });  
  
  
  
  // Quantity values
  
  $('.up').click(function(e){
    e.preventDefault();
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
      // Increment
      $('input[name='+fieldName+']').val(currentVal + 1);
    } else {
      // Otherwise put a 0 there
      $('input[name='+fieldName+']').val(1);
    }
  });
  $(".down").click(function(e) {
    e.preventDefault();
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal =...