Create a gist now

Instantly share code, notes, and snippets.

@sehmaschine /_default.scss Secret
Last active Feb 21, 2017

What would you like to do?
MUELLER Grid System (http://muellergridsystem.com) & MASONRY (http://masonry.desandro.com).
@import "partials/base";
// OTHER STUFF FIRST
// MASONRY
section#masonry {
div.grid-sizer {
width: 20px;
margin: 0;
}
div.item {
margin-right: 0;
@extend .g-d-4;
&.wide {
@extend .g-d-8;
}
&.verywide {
@extend .g-d-12;
}
}
}
@import "partials/base";
@media screen and (min-width: 480px) and (max-width: 767px) {
// OTHER STUFF FIRST
// MASONRY
section#masonry {
div.grid-sizer {
width: 19px;
margin: 0;
}
div.item {
text-align: left;
margin-right: 0;
@extend .g-hl-6;
&.wide {
@extend .g-hl-6;
}
&.verywide {
@extend .g-hl-6;
}
}
}
}
@import "partials/base";
@media screen and (max-width: 479px) {
// OTHER STUFF FIRST
// MASONRY
section#masonry {
div.grid-sizer {
width: 0;
margin: 0;
}
div.item {
text-align: left;
margin-right: 0;
@extend .g-h-6;
&.wide {
@extend .g-h-6;
}
&.verywide {
@extend .g-h-6;
}
}
}
}
@import "partials/base";
@media screen and (min-width: 1250px) {
// OTHER STUFF FIRST
// MASONRY
section#masonry {
div.grid-sizer {
width: 25px;
margin: 0;
}
div.item {
text-align: left;
margin: 0;
@extend .g-l-4;
&.wide {
@extend .g-l-8;
}
&.verywide {
@extend .g-l-12;
}
}
}
}
@import "partials/base";
@media screen and (min-width: 768px) and (max-width: 980px) {
// OTHER STUFF FIRST
// MASONRY
section#masonry {
div.grid-sizer {
width: 20px;
margin: 0 !important;
}
div.item {
text-align: left;
margin-right: 0 !important;
@extend .g-tp-4;
&.wide {
@extend .g-tp-8;
}
&.verywide {
@extend .g-tp-8;
}
}
}
}
<script src="/path/to/masonry.pkgd.min.js"></script>
<script>
// window.load instead of document.ready if
// you use web fonts
$(window).load(function(){
var $container = $('section#masonry');
$container.masonry({
itemSelector: ".item",
gutter: ".grid-sizer"
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment