Skip to content

Instantly share code, notes, and snippets.

@biojazzard
Created October 21, 2013 20:00
Show Gist options
  • Select an option

  • Save biojazzard/7089963 to your computer and use it in GitHub Desktop.

Select an option

Save biojazzard/7089963 to your computer and use it in GitHub Desktop.
A Pen by Alfredo Llanos.
<h1>Masonry - Mondrianizr</h1>
<div class="masonry js-masonry">
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w3"></div>
</div>
(($, undefined_) ->
$itms = $('.item')
$(window).on 'resize', =>
$selfItms = $itms.fadeOut()
z = 0
(displayItems = () ->
$selfItms.eq(z++).fadeIn(44, displayItems)
)()
) jQuery
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@size: 60px;
@phi: 1.618;
@white: #ECF4E8;
@yellow: #FBDA5B;
@blue: #2B07A8;
@black: #13100A;
@red: #DF3D1B;
body {
background-color: @black;
font-family: sans-serif;
color: @white;
}
.masonry,
h1 {
max-width: 640px;
margin: 0 auto;
.item {
width: @size;
height: @size;
float: left;
background-color: @yellow;
margin: 0;
border: 5px solid @black;
&:nth-child(3n-1) {
background-color: @blue;
}
&:nth-child(2n-1) {
background-color: @red;
}
&:nth-child(3n+3) {
background-color: @white;
}
&.w2 {
width: @size * 2;
}
&.w3 {
width: @size * 3;
}
&.h2 {
height: @size * 2;
}
&.h3 {
height: @size * 3;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment