This is a Windows 8 metro style dashboard.
A Pen by Jonnie Spratley on CodePen.
This is a Windows 8 metro style dashboard.
A Pen by Jonnie Spratley on CodePen.
article.demo | |
header | |
//h1 Gridster Win8 Demo | |
section | |
.gridster | |
ul | |
li.red(data-row='1', data-col='1', data-sizex='2', data-sizey='1') | |
.content | |
i.fa.fa-5x.fa-dashboard | |
h3 Dashboard | |
li.teal(data-row='1', data-col='1', data-sizex='2', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-envelope | |
h3 Mail | |
li.purple(data-row='1', data-col='2', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-calendar | |
h3 Calendar | |
li.light-blue(data-row='1', data-col='1', data-sizex='2', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-cloud | |
h3 Cloud | |
li.github(data-row='3', data-col='1', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-github | |
h3 Github | |
li.green(data-row='1', data-col='2', data-sizex='2', data-sizey='2') | |
.content | |
i.fa.fa-4x.fa-line-chart | |
h3 Stocks | |
li.orange(data-row='2', data-col='4', data-sizex='2', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-headphones | |
h3 Music | |
li.pinterest(data-row='3', data-col='4', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-pinterest | |
h3 Pinterest | |
li.instagram(data-row='1', data-col='5', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-instagram | |
h3 Instagram | |
li.windows(data-row='3', data-col='5', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-windows | |
h3 Windows | |
li.facebook(data-row='1', data-col='6', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-facebook | |
h3 Facebook | |
li.twitter(data-row='2', data-col='6', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-twitter | |
h3 Twitter | |
li.linkedin(data-row='1', data-col='6', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-linkedin | |
h3 LinkedIn | |
li.youtube(data-row='2', data-col='6', data-sizex='1', data-sizey='1') | |
.content | |
i.fa.fa-4x.fa-youtube-play | |
h3 YouTube | |
textarea#debug |
var gridster; | |
$(function() { | |
var $debug = $("#debug"); | |
function log(what) { | |
console.warn("INFO", what); | |
$debug.text(JSON.stringify(what, null, 1)); | |
} | |
gridster = $('.gridster ul') | |
.gridster({ | |
widget_selector: 'li', | |
widget_margins: [5, 5], | |
widget_base_dimensions: [120, 120], | |
min_cols: 6, | |
resize: { | |
enabled: true | |
}, | |
draggable: { | |
start: function(event, ui) { | |
console.log(event, ui); | |
}, | |
stop: function(event, ui) { | |
console.log(event, ui); | |
log(gridster.serialize()); | |
} | |
} | |
}) | |
.data('gridster'); | |
$('.demo').css('opacity', 1); | |
// var collection = [ | |
// ['<li><div class="title">drag</div>Widget content</li>', 1, 2], | |
// ['<li><div class="title">drag</div>Widget content</li>', 5, 2], | |
// ['<li><div class="title">drag</div>Widget content</li>', 3, 2], | |
// ['<li><div class="title">drag</div>Widget content</li>', 2, 1], | |
// ['<li><div class="title">drag</div>Widget content</li>', 4, 1], | |
// ['<li><div class="title">drag</div>Widget content</li>', 1, 2], | |
// ['<li><div class="title">drag</div>Widget content</li>', 2, 1], | |
// ['<li><div class="title">drag</div>Widget content</li>', 3, 2], | |
// ['<li><div class="title">drag</div>Widget content</li>', 1, 1], | |
// ['<li><div class="title">drag</div>Widget content</li>', 2, 2], | |
// ['<li><div class="title">drag</div>Widget content</li>', 1, 3], | |
// ]; | |
// $.each(collection, function(i, widget){ | |
// gridster.add_widget.apply(gridster, widget) | |
// }); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.js"></script> |
/* ============================================================================= | |
NORMALIZATION | |
========================================================================== */ | |
$purple: #9f17a7; | |
$teal: #189dad; | |
// TODO: Normalize color names | |
@each $name, | |
$rgb in (teal: #189dad, | |
green: #169e19, | |
red: #AE252F, | |
purple: #9d16a3, | |
blue: #1357ba, | |
light-blue: #338aec, | |
orange: #D95735, | |
twitter: #20bcf0, | |
facebook: #3b579d, | |
linkedin: #2088af, | |
instagram: #444444, | |
google: #DF4231, | |
youtube: #C73A3F, | |
windows: #3388eb, | |
pinterest: #C73A3F, | |
vemo: #ACD05F, | |
xbox: #63aa2a, | |
github: #222222, | |
html5: #E86442) { | |
// TODO: Create background Color styles | |
ul { | |
.#{$name} { | |
background-color: $rgb !important; | |
color: #fff; | |
} | |
} | |
} | |
.gridster ul li { | |
text-align: center; | |
list-style-type: none; | |
.content { | |
position: relative; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
height: 100%; | |
h3 { | |
margin: 0; | |
padding: 0; | |
font-size: 1.1rem; | |
font-weight: normal; | |
} | |
} | |
} | |
.gridster { | |
max-width: 960px; | |
margin: 5rem auto; | |
} | |
.preview-holder { | |
border: none !important; | |
border-radius: 0 !important; | |
background: rgba(255, 255, 255, 0.2) !important; | |
} | |
#debug { | |
padding: 5px; | |
width: 100%; | |
min-height: 5rem; | |
display: none; | |
} | |
html, | |
body { | |
background: #1a1a1a; | |
} | |
.demo { | |
opacity: 0; | |
} | |
.oi-4x{ | |
font-size: 4rem; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> |