Skip to content

Instantly share code, notes, and snippets.

@devgeeks
Forked from anonymous/jsbin.sowacoha.css
Created August 8, 2014 13:05
Show Gist options
  • Save devgeeks/aeadd7a2ac670a225197 to your computer and use it in GitHub Desktop.
Save devgeeks/aeadd7a2ac670a225197 to your computer and use it in GitHub Desktop.
An example of a masonry UI
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment