Skip to content

Instantly share code, notes, and snippets.

@rafibomb

rafibomb/gist:d07a2dac74416dd768e9

Created March 23, 2015 22:16
Show Gist options
  • Save rafibomb/d07a2dac74416dd768e9 to your computer and use it in GitHub Desktop.
Save rafibomb/d07a2dac74416dd768e9 to your computer and use it in GitHub Desktop.
Download ZIP
Foundation 5 Masonry
Raw
gistfile1.txt
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/_masonry.scss" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<nav>
<ul class="nav-links button-group even-5">
<li class="button">company</li>
<li class="button">programs</li>
<li class="logo button">Fang &amp; Kerning</li>
<li class="button">partners</li>
<li class="button">contact us</li>
</ul>
</nav>
<div class="row masonry-width">
<div class="small-12 small-centered columns">
<!-- MASONRY CONTAINER -->
<div id="masonryContainer">
<div class="masonry-brick">
<img src="http://placehold.it/500x300&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x600&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x700&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x400&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x200&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x300&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x600&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x700&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x400&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x200&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x200&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x300&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x600&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x700&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x400&text=Item">
</div>
<div class="masonry-brick">
<img src="http://placehold.it/500x200&text=Item">
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Raw
gistfile2.css
.row.masonry-width {
max-width: rem-calc(1140);
}
.masonry-brick { width: 340px; margin: 10px; float: left; }
#masonryContainer { width: 0 auto; margin: 0 auto; }
Raw
gistfile3.js
$(document).foundation();
$(window).load(function(){
$('#masonryContainer').masonry({
itemSelector: '.masonry-brick',
columnWidth: 180
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment