JSFiddle - React, Tailwind, and code Playground

Responsive Flat UI

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<div class="container"> 
    <div class="padding">
      <div class="row">
        <div class="col-lg-12">
          <h1>Responsive Flat UI <small>Hover Everything!</small></h1>
          <p class="lead hidden-xs hidden-sm">I've built these UI elements to both integrate and sit side by side with the latest version of Bootstrap. Everything is my own except for the custom select boxes, written by <a href="http://codepen.io/catalinred">Catalin Rosu</a>.</p>
          <hr>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">

          <!-- Basket -->
          <div class="basket-wrap">
            <div class="basket-control">
              <span class="basket-block"><span class="icon-basket"></span></span>
              <span class="basket-trigger">
                <a href="#" id="basket-controller">
                  <span class="basket-title">Basket</span>
                  <span class="basket-content">&pound;89.99</span>
                  <span class="basket-items">(1)</span>
                </a>
                <!-- Basket Preview -->
                <div class="basket-preview">
                  
                  <!-- Product Carousel -->
                  <div class="pslider-wrapper">
                    <div class="pslider-inside">
                      <ul id="pslider" class="pslider">
                        <li id="pslide1" data-slide="1" class="pslide active">Slide 1</li>
                        <li id="pslide2" data-slide="2" class="pslide">Slide 2</li>
                        <li id="pslide3" data-slide="3" class="pslide">Slide 3</li>
                        <li id="pslide4" data-slide="4" class="pslide">Slide 4</li>
                        <li id="pslide5" data-slide="5"...

CSS

/*
  Presentation Styles
*/
html, body {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: auto;
  padding: 20px;
  margin: 0;
  background: #3d3166;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #3d3166), color-stop(100%, #5c2589));
  background: -webkit-linear-gradient(-45deg, #3d3166 0%, #5c2589 100%);
  background: -moz-linear-gradient(-45deg, #3d3166 0%, #5c2589 100%);
  background: -ms-linear-gradient(-45deg, #3d3166 0%, #5c2589 100%);
  background: -o-linear-gradient(-45deg, #3d3166 0%, #5c2589 100%);
  background: linear-gradient(135deg, #3d3166 0%, #5c2589 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d3166', endColorstr='#5c2589',GradientType=1 );
}

.padding,
.pad {
  padding: 30px 20px 20px 20px;
}

.container {
  background: #fff;
}

/*
  UI Color Variables
*/


/*
  UI Styles: Pagination
*/
.pagination > li > a,
.pagination > li > span {
  border: none;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  color: #76828f;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  background: transparent;
  color: #4976a4;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  background-color: #f5f5f5;
  border-radius: 3px;
  box-shadow: 0 2px 0 #e3e3e3;
  color: #76828f;
  font-weight: 700;
}

/*
  UI Styles: Basket
*/
.basket-wrap {
  display: block;
  position: relative;
  width: auto;
  background: #222729;
  padding: 20px;
  height: 80px;
  border-radius: 4px;
}

.basket-control {
  display: inline-block;
  float: right;
  margin: 0;
  padding: 0 0 2px 0;
}
.basket-control:hover .basket-block > span[class*="icon-"] {
  color: #fefd29;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -ms-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color...

JavaScript

/*
  UI Styles: Menu Groups
*/
function menuGroup(){
  $('html').click(function() {
    if ($(".menu-trigger").hasClass("active")){
      $(".menu-trigger").removeClass("active");
    }
    if ($(".menu-dropdown").hasClass("open")){
      $(".menu-dropdown").removeClass("open").addClass("closed");
    }
  });
  // Open menu
  $(".menu-trigger").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).toggleClass("active");
    if($(this).next('.menu-dropdown').hasClass("closed")){
      $(this).next(".menu-dropdown").removeClass("closed").addClass("open");
    }
    $("input[name*=radio-color-set").change(function(){
      var parent = $(this).parent(".radio-colors");
      var selected = $(" input[type=radio]:checked", parent);
      $(".radio-display", parent).attr("data-color", selected.attr("class"));
    });
  });
}

/*
  UI Styles: Bootstrap Tooltips
*/
function bsTooltips(){
  $('.btn').tooltip();
}

/*
  UI Styles: Dropdown Basket
*/
function dropBasket(){
  $(".basket-control").hover(function(event){
    event.preventDefault();
    $(".basket-prompt").toggleClass("show");
  });
  $("#basket-controller").click(function(event){
    event.preventDefault();
    $(".basket-preview").toggleClass("show");
  });
}

/*
  UI Styles: Product Slider
*/
function pSlider(){

  // Calculate Width
  var sum = 0;
  $("#pslider li.pslide").each(function(){
    sum += ($(this).width());
  });
  $("#pslider").width(sum);

  // First Slide
  var startSlide = $("#pslider li.active").next().attr("id");

  // Total Items
  var totalItems = $('#pslider li').length;

  // Settings
  $(".pslide-label").html("1 of " + totalItems);
  $(".prev").addClass("disabled");
  $(".next").removeClass("disabled");

  // Slider Control: Next
  var slide = 0;

  $(".next").click(function(event){
    event.preventDefault();

    // Enable Prev if disabled
    $(".prev").removeClass("disabled");

    // Active Slides (prev/next)
    var $targetItem = $("#pslider...