/jsbin.sowacoha.css

## jsbin.sowacoha.css
body {
  font-family: Helvetica;
  font-size: 100%;
  background-color: #fff;
  color: #222;
}

.app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: darkorange;
  color: #fff;
  height: 48px;
}

.nav h1 {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  right: 48px;
  left: 48px;
  height: 48px;
  text-align: center;
  font-size: 150%;
  line-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav .button {
  position: absolute;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  font-size: 150%;
}

.nav .button.left {
  left: 0;
}

.nav .button.right {
  right: 0;
}

.nav .button a {
  color: inherit;
  text-decoration: none;
}

.content {
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

p, h2, h3 {
  padding: 10px;
  margin: 0;
}

h2 {
  font-size: 120%;
}

h3 {
  font-size: 100%;
}

#container {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

.item {
  -webkit-box-sizing: border-box;
  /*border: 1px solid grey;*/
  box-shadow: 0 0 5px rgba(0,0,0,0.4);
  text-align: center;
  width: 46%;
  min-height: 50px;
  padding: 5px;
  margin: 5px 2%;
  background-color: #fff;
}

.item .inner {
  display: block;
  height: 100%;
}

.item.w2 { width: 96%; }

.item.h2 { min-height: 100px; }

.item.h4 { min-height: 200px; }


## jsbin.sowacoha.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
</head>
<body>
  <div class="app">
    <div class="login page">
      <div class="nav">
        <div class="button left">
          <a href="#">
            <i class="fa fa-cog"></i>
          </a>
        </div>
        <h1>
          Notemindr
        </h1>
        <div class="button right">
          <a href="#">
            <i class="fa fa-plus"></i>
          </a>
        </div>
      </div>
      <div class="content">
        <div id="container">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

## jsbin.sowacoha.js
var $container = $('#container').masonry({
	itemSelector: '.item',
	columnWidth: 1,
	visibleStyle: { opacity: 1, transform: 'translate3d(0,0,0)' },
	hiddenStyle: { opacity: 0, transform: 'translate3d(0,100px,0)' }
});

function addelements(num) {
var elems = [];
for (var i = 0; i < num; i++) {
  window.setTimeout(function() {
	var elem = document.createElement('div');
	elem.className = 'item';
	elem.innerHTML = 'blah blah';
    if (Math.ceil(Math.random() * 10) > 5) { elem.className = elem.className + ' h2'; }
    if (i > 2 && Math.ceil(Math.random() * 10) > 9) { elem.className = elem.className + ' w2 h4'; }
    $container.append(elem)
      .masonry('appended', elem);
     }, 100 * i + 1);
}
}

addelements(12);
	body {
	font-family: Helvetica;
	font-size: 100%;
	background-color: #fff;
	color: #222;
	}

	.app {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	}

	.page {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	}

	.nav {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background-color: darkorange;
	color: #fff;
	height: 48px;
	}

	.nav h1 {
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	right: 48px;
	left: 48px;
	height: 48px;
	text-align: center;
	font-size: 150%;
	line-height: 48px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.nav .button {
	position: absolute;
	width: 48px;
	height: 48px;
	text-align: center;
	line-height: 48px;
	font-size: 150%;
	}

	.nav .button.left {
	left: 0;
	}

	.nav .button.right {
	right: 0;
	}

	.nav .button a {
	color: inherit;
	text-decoration: none;
	}

	.content {
	position: absolute;
	top: 48px;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	}

	p, h2, h3 {
	padding: 10px;
	margin: 0;
	}

	h2 {
	font-size: 120%;
	}

	h3 {
	font-size: 100%;
	}

	#container {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	}

	.item {
	-webkit-box-sizing: border-box;
	/border: 1px solid grey;/
	box-shadow: 0 0 5px rgba(0,0,0,0.4);
	text-align: center;
	width: 46%;
	min-height: 50px;
	padding: 5px;
	margin: 5px 2%;
	background-color: #fff;
	}

	.item .inner {
	display: block;
	height: 100%;
	}

	.item.w2 { width: 96%; }

	.item.h2 { min-height: 100px; }

	.item.h4 { min-height: 200px; }
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
	</head>
	<body>
	<div class="app">
	<div class="login page">
	<div class="nav">
	<div class="button left">
	<a href="#">
	<i class="fa fa-cog"></i>
	</a>
	</div>
	<h1>
	Notemindr
	</h1>
	<div class="button right">
	<a href="#">
	<i class="fa fa-plus"></i>
	</a>
	</div>
	</div>
	<div class="content">
	<div id="container">
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	var $container = $('#container').masonry({
	itemSelector: '.item',
	columnWidth: 1,
	visibleStyle: { opacity: 1, transform: 'translate3d(0,0,0)' },
	hiddenStyle: { opacity: 0, transform: 'translate3d(0,100px,0)' }
	});

	function addelements(num) {
	var elems = [];
	for (var i = 0; i < num; i++) {
	window.setTimeout(function() {
	var elem = document.createElement('div');
	elem.className = 'item';
	elem.innerHTML = 'blah blah';
	if (Math.ceil(Math.random() * 10) > 5) { elem.className = elem.className + ' h2'; }
	if (i > 2 && Math.ceil(Math.random() * 10) > 9) { elem.className = elem.className + ' w2 h4'; }
	$container.append(elem)
	.masonry('appended', elem);
	}, 100 * i + 1);
	}
	}

	addelements(12);