Notes for Isotope masonry gallery in FoundationPress

_README.md

Isotope

https://isotope.metafizzy.co/

Filter & sort layouts

Package managers

npm: npm install isotope-layout --save

Bower: bower install isotope-layout --save

File

touch src/assets/js/lib/isotope.js

open src/assets/js/lib/

app.js

// Installed via npm
import '../../../node_modules/isotope-layout/dist/isotope.pkgd.min';
import './lib/isotope';

isotope.js

jQuery(document).ready(function($){
    var $gridItems = $('#iso-grid-items');
    $gridItems.isotope({
      	itemSelector : '.iso-grid-item'
        ,masonry: {
          columnWidth: 33,
          horizontalOrder: true
        }
    });
});

isotope.scss

//@start masonary gallery
#iso-grid-items {
	margin-right: -8px;
}
.iso-grid-item {
	width: 49%;
	height: auto;
	border: 4px solid $body-background;
	img {
		width: 100%;
		height: auto;
	}
	// a {
	// 	line-height: 1;
	// }
}
@media screen and #{breakpoint(medium)} {
	.iso-grid-item {width: 33%}
	#iso-grid-items {
		background-color: none;
		margin-right: 0;
	}
	#gallery-lead-image.offset, #gallery-secondary-images {
		padding-right: 8px;
	}
	aside.sidebar.lead {padding: 0; margin-top: 0;}
}
//@end masonary gallery