Gridster Demo (Win 8)

gridster-demo-win-8.markdown

Gridster Demo (Win 8)

This is a Windows 8 metro style dashboard.

A Pen by Jonnie Spratley on CodePen.

License.

index.pug

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

script.js

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)
	// });
});

scripts

<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>

style.scss

/* =============================================================================
   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;
}

styles

<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" />