Skip to content

Instantly share code, notes, and snippets.

@thorstensiefert

thorstensiefert/Basic-UI.markdown

Forked from anonymous/Basic-UI.markdown
Created January 2, 2015 22:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thorstensiefert/f8c8beec4ad169ad3bd5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thorstensiefert/f8c8beec4ad169ad3bd5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Basic-UI.markdown
Raw
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>
Raw
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;
}
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment