Skip to content

Instantly share code, notes, and snippets.

@bobmarteal
Created April 9, 2015 18:08
Show Gist options
  • Select an option

  • Save bobmarteal/1d082c101e0a8e70e92c to your computer and use it in GitHub Desktop.

Select an option

Save bobmarteal/1d082c101e0a8e70e92c to your computer and use it in GitHub Desktop.
Masonry - stamp option
<h1>Masonry - stamp option</h1>
<div class="masonry js-masonry" data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item", "percentPosition": true, "stamp": ".stamp" }'>
<div class="grid-sizer"></div>
<div class="stamp">Big Feature</div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
<div class="item"><p>english</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sequi, natus enim voluptatum similique dicta deserunt nisi animi modi. Ratione.</p></div>
</div>
// http://masonry.desandro.com/masonry.pkgd.js added as external resource
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
.masonry {
background: #EEE;
max-width: 100%;
position: relative;
}
.grid-sizer{
width: 25%;
}
.item {
width: 25%;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
/* position stamp elements with CSS */
.stamp {
position: absolute;
background: orange;
border: 4px dotted black;
left: 25%;
top: 10px;
width: 50%;
height: 500px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment