Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by salalaslam

HTML

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">

  <h1>HOMECHEF</h1>
<!-- ########################### CART START -->
<div class="container">
  <div class="panel panel-default" id="cart">
    <div class="panel-body">
      <ul class="nav nav-tabs" role="tablist">
      </ul>
      <div class="tab-content">
      </div>
    </div>
  </div>
</div>
<!-- ########################### / CART END -->

<!-- ########################### ITEMS START -->
<div style="border:1px solid #ccc;width: 260px;float:left;padding:10px;">
  <h2>dolor simits</h2>
  <p class="price">$530</p>
  <p class="chef">chef 2</p>
  <p class="quantity"><input type="text" name="quantity" value="1"></p>
  <p class="order-time">earliest delivery by 10</p>
  <a href="#" class="add-to-cart" data-dish-name="dolor simits" data-dish-price="530" data-quantity="1" data-merchant-id="2" data-merchant-name="chef 2">+ Add to cart</a>
</div>
<div style="border:1px solid #ccc;width: 260px;float:left;padding:10px;">
  <h2>lorem ipsum</h2>
  <p class="price">$480</p>
  <p class="chef">chef 3</p>
  <p class="quantity"><input type="text" name="quantity" value="1"></p>
  <p class="order-time">earliest delivery by 10</p>
  <a href="#" class="add-to-cart" data-dish-name="lorem ipsum" data-dish-price="480" data-quantity="1" data-merchant-id="3" data-merchant-name="chef 3">+ Add to cart</a>
</div>
<!-- ########################### /ITEMS END -->

CSS

#cart { width: 500px; margin: 10px; padding: 10px; border: 1px solid #ccc; float: right; }
.nav-tabs > li { position: relative; }
.nav-tabs > li > a { display: inline-block; }
.nav-tabs > li > span { display: none; cursor: pointer; position: absolute; right: 6px; top: 8px; color: red; }
.nav-tabs > li:hover > span { display: inline-block; }

JavaScript

// IF CART NOT IN LOCALSTORAGE
    if (localStorage.getItem('cart') === null) {
      var cart = {
        items: {}
      };

      localStorage.setItem('cart', JSON.stringify(cart));
    }
    // DISPLAY ITEMS FROM CART
    outputIt();

    // DISPLAY METHOD OF CART
    function outputIt() {
      var restoredCart = JSON.parse(localStorage.getItem('cart'));
      var outputs = "";
      if (restoredCart.items.length === 0) {
        outputs = 'cart is empty'
      }
      $(".nav-tabs").html('')
      $(".tab-content").html('')
      // LOOP THROUGH CARTS AS EACH MERCHANT
      for(var merchantId in restoredCart.items)
      {
        $(".nav-tabs").append('<li><a href="#cart_' + merchantId + '">'+restoredCart.items[merchantId][0].merchant_name+'</a> <span> x </span></li>');
        var octpus = '<div class="tab-pane" id="cart_' + merchantId + '">'
        for (var i = restoredCart.items[merchantId].length - 1; i >= 0; i--) {
          octpus += '<p>' + restoredCart.items[merchantId][i].dish_name + ': $' + restoredCart.items[merchantId][i].price + ' x ' + restoredCart.items[merchantId][i].quantity + '</p>'
        }
        octpus += '<button>checkout</button></div>';
        $('.tab-content').append(octpus);
      }
    }

    // ON TABS CLICK CNANGE
    $(".nav-tabs").on("click", "a", function (e) {
        e.preventDefault();
        $(this).tab('show');
    })

    // ADD ITEM TO CART
      $('.add-to-cart').click(function (e) {
        e.preventDefault();

    // GET EXISTING CART ITEMS FROM LOCALSTORAGE
      var restoredCart = JSON.parse(localStorage.getItem('cart'));
    // CHECK IF MERCHANT ARRAY NOT EXISTS IN CART
        if (!restoredCart.items[$(this).data('merchant-id')]) {
          restoredCart.items[$(this).data('merchant-id')] = [];
        }

    // PUSH ITEM TO MERCHANT'S ARRAY
        restoredCart.items[$(this).data('merchant-id')].push({
          dish_name: $(this).data('dish-name'), price: $(this).data('dish-price'), quantity:...