Basic-UI.markdown

Basic UI

Inspiration from https://dribbble.com/shots/1671307-UI-Kit by Igor

This is still a WIP and may not be finished for a couple days so keep checking back.

A Pen by Matt Porter on CodePen.

License.

index.html

<div class="container-fluid">
  <div class="col-sm-12 padded"></div>
  <div class="row">
    
    
    <div class="col-sm-7"> <!-- LEFT COL -->
      <div class="col-sm-12">
        <div class="command">
          <div class="tab">
            MESSAGES <div class="tab-badge">5</div>
          </div>
          <div class="tab">ACCOUNT</div>
          <div class="tab">SETTINGS</div>
          <div class="tab">PROFILE</div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="login">
          <div class="login-label">Username</div>
          <input class="login-input" type="text">
          <div class="login-label">Password</div>
          <input class="login-input" type="password">
          <div class="login-submit">Log in</div>
        </div>
        <div class="chart">
          <div id="chart"></div>
          <div class="red-legend">Organic Search</div>
          <div class="dark-legend">Direct</div>
          <div class="blue-legend">Referral</div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card">
          <div class="content">
            <div style="width: 40%; max-width: 125; margin: 0 auto;">
              <img src="http://i.stack.imgur.com/TI94d.jpg?s=128&g=1"
                   style="width: 100%; height: 100%">
            </div>
            <div class="name">Matthew Porter</div>
            <div class="blurb">Coding is pretty cool...</div>
          </div>
          <div class="footer">
            <span class="pull-left">
              <i class="fa fa-heart"></i> 11,560
            </span>
            <span>
              <i class="fa fa-user"></i> 1,083
            </span>
            <span class="pull-right">
              <i class="fa  fa-comment"></i> 2,391
            </span>
          </div>
        </div>
        <div class="stats">
          <div id="linechart"></div>
          <div class="info">
            <div class="col-sm-4">1,013</div>
            <div class="col-sm-4">209</div>
            <div class="col-sm-4">804</div>
          </div>
        </div>
      </div>
    </div>
    
    
    <div class="col-sm-5"> <!-- RIGHT COL -->
      <div class="col-sm-12 command">
        blah blah blah
      </div>
    </div>
    
    
  </div>
  <div class="col-sm-12 padded"></div>
</div>

script.js

var r = Raphael("chart");

var w = $('#chart').width();
var h = w;
$('#chart').height(h);

var pie = r.piechart(h/2, w/2, h/3, [60,30,10], {
  'colors': ['#FC3A51', '#374349', '#3FB8AF']
});

pie.hover(
  function() {
    this.sector.stop();
    this.sector.scale(1.1, 1.1, this.cx, this.cy);
    var c = this.sector.attr('fill');
    label.attr('fill', c);
    label.attr('text', this.value.value + "%");
    label.animate({ 'opacity': 1.0 }, 0);
    this.sector.stop();
  },
  function() {
    this.sector.stop();
    this.sector.animate({ transform: 's1 1 ' + this.cx + '%' + this.cy }, 500, "bounce");
    label.animate({ 'opacity': 0 }, 0);
  }
);

r.circle(w/2, h/2, h*0.2)
  .attr({'fill': '#ffffff', 'stroke': '#ffffff'});

var label = r.text(w/2, h/2, '')
  .attr({
    'fill': '#000', 
    'font-size': '20px', 
    "font-weight": 700, 
    'font-family': 'Open Sans',
    'opacity': 0.0 
  });


var ww = $('#linechart').width();
var hh = ww/2;
$('#linechart').height(hh);

var rc = Raphael('linechart');
var line = rc.linechart(
  0, 12, 
  ww-20, hh-20, 
  [1,2,3,4,5,6,7],
  randDat(7),
  {
    'colors': ['#FC3A51'],
    'symbol': 'circle',
    'axisxstep': 1,
    'axisystep': 1000
  }
);

line.symbols.attr({r: '4'});

line.symbols.hover(
  function() {
    this.scale(1.75);
  },
  function() {
    this.animate({ transform: 's1 1 ' + this.cx + '%' + this.cy }, 500, "bounce");
  }
);


function randDat(len) {
  var arr = [];
  for(var i=0; i<len; i++) {
    arr[i] = getRandomInt(0, 5000);
  }
  return arr;
}
  
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

style.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

$darkblue: #374349;
$tan: #B3B2AF;
$white: #fff;
$dark: rgba(0,0,0,0.25); /*655643*/
$red: #FC3A51; /*E32D40*/
$bluegray: #9fb4ca;
$pink: #CCBDC7;
$eggshell: #F3EFE3;

body:after {
  background: $pink;
  background: -moz-linear-gradient(-45deg,  $pink 0%, #3da2ce 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,$pink), color-stop(100%,#3da2ce));
  background: -webkit-linear-gradient(-45deg, $pink 0%,#3da2ce 100%);
  background: -o-linear-gradient(-45deg, $pink 0%,#3da2ce 100%);
  background: -ms-linear-gradient(-45deg, $pink 0%,#3da2ce 100%);
  background: linear-gradient(135deg, $pink 0%,#3da2ce 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$pink', endColorstr='#3da2ce',GradientType=1 );
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: ' ';
  z-index: -999;
}

body {
  color: $darkblue !important;
  font-family: 'Open Sans';
  font-weight: 400;
  font-size: 12px;
}

.shadow {
  box-shadow: 0 1px 1px $dark;
}

.padded {
  margin: 40px 0 0 0;
}

.command {
  @extend .shadow;
  background: $white;
  font-weight: 700;
  font-size: 1em;
  height: 50px;
  padding: 0 12px;
  line-height: 50px;
}

.command .tab {
  cursor: pointer;
  display: inline-block;
  padding: 0 12px;
}

.command .tab:hover {
  background: rgba(0,0,0,0.075);
}

.command .tab-badge {
  border-radius: 20px;
  background: $red;
  color: $white;
  display: inline;
  position: relative;
  padding: 1px 6px;
  margin: 0 0 0 4px;
  width: 20px;
  height: 20px;
}


.norm {
  padding: 0;
  margin: 0;
}

.login {
  @extend .shadow;
  padding: 24px 24px;
  margin: 12px 0;
  background: $eggshell;
}

.login-label {
  font-size: 0.9em;
  padding: 0 0 6px 0;
}

.login-input {
  width: 100%;
  border: 1px solid $tan;
  margin: 0 0 6px 0;
  line-height: 26px;
  padding: 0 4px;
  font-weight: 400;
  font-family: 'Open Sans';
  font-size: 1em;
}

.login-submit {
  margin: 16px 0 0;
  width: 100%;
  font-size: 0.9em;
  background: #3FB8AF;
  color: $white;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background 500ms ease;
  border: 1px solid rgba(0,0,0,0.15);
}

.login-submit:active {
  position: relative;
  background: #61A6AB;
  transition: background 0ms ease;
  border: 1px solid rgba(0,0,0,0.15);
}

.chart {
  @extend .shadow;
  background: $white;
  padding: 24px 24px;
  margin: 12px 0;
  font-size: 0.9em;
}

#chart {
  z-index: 100;
}

.red-legend {
  color: $red;
  text-align: center;
  position: relative;
  left: 12px;
  line-height: 24px;
}

.red-legend:before {
  background: $red;
  position: relative;
  display: inline-block;
  left: -12px;
  width: 12px;
  height: 12px;
  content: '';
  vertical-align: middle;
}

.dark-legend {
  color: $darkblue;
  text-align: center;
  position: relative;
  left: 12px;
  line-height: 24px;
}

.dark-legend:before {
  background: $darkblue;
  position: relative;
  display: inline-block;
  left: -12px;
  width: 12px;
  height: 12px;
  content: '';
  vertical-align: middle;
}

.blue-legend {
  color: #3FB8AF;
  text-align: center;
  position: relative;
  left: 12px;
  line-height: 24px;
}

.blue-legend:before {
  background: #3FB8AF;
  position: relative;
  display: inline-block;
  left: -12px;
  width: 12px;
  height: 12px;
  content: '';
  vertical-align: middle;
}

.card {
  @extend .shadow;
  background: $white;
  margin: 12px 0 12px;
  font-size: 0.9em;
}

.card .footer {
  background: $darkblue;
  line-height: 36px;
  height: 36px;
  color: $white;
  padding: 0 24px;
  text-align: center;
}

.card .content {
  padding: 24px 24px;
}

.content .name {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  margin: 12px 0 0;
  text-align: center;
}

.content .blurb {
  color: rgba(55, 67, 73, 0.62);
  text-align: center;
  font-size: 1em;
}

.stats {
  @extend .shadow;
  margin: 12px 0;
  background: $eggshell;
}

.stats .linechart {
  
}

.info {
  background: $white;
  line-height: 36px;
  height: 36px;
  padding: 0;
  color: $darkblue;
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
}

.info .col-sm-4 {
  padding: 0;
  cursor: pointer;
}

.info .col-sm-4:hover {
  background: rgba(0,0,0,0.075);
}