Skip to content

Instantly share code, notes, and snippets.

@pmeissner
Created May 28, 2014 18:56
Show Gist options
  • Save pmeissner/995f6eb5a73a53359564 to your computer and use it in GitHub Desktop.
Save pmeissner/995f6eb5a73a53359564 to your computer and use it in GitHub Desktop.
packery
Foundation.utils.image_loaded($('.half-left .blocks img'), function(){
$halfLeftBlocks.packery({
columnWidth: '.half-left .block-sizer',
itemSelector: '.block',
"isOriginLeft": false
});
});
@pmeissner
Copy link
Author

here is the scss:

$b-width: 11.5%;
$b-col: 1%;
$left-viewport-margin: 2%;

.block-sizer { width: ($b-width * 1) + ($b-col * 1); margin-bottom: $b-col; }

.blocks { max-width: none!important; width: 100%!important; }
.block {  width: ($b-width * 1); margin-bottom: $b-col; }
.block.w2 { width: ($b-width * 4) + ($b-col * 3); }
.block.w3 { width: ($b-width * 4) + ($b-col * 3); }
.block.w4 { width: ($b-width * 8) + ($b-col * 7); }
.block.w5 { width: ($b-width * 8) + ($b-col * 7); }
.block.w6 { width: ($b-width * 8) + ($b-col * 7); }

@media #{$large-up} {
    .block.w2 { width: ($b-width * 2) + ($b-col * 1); }
    .block.w3 { width: ($b-width * 3) + ($b-col * 2); }
    .block.w4 { width: ($b-width * 4) + ($b-col * 3); }
    .block.w5 { width: ($b-width * 5) + ($b-col * 4); }
    .block.w6 { width: ($b-width * 6) + ($b-col * 5); }
}

@pmeissner
Copy link
Author

                    .blocks
                        .block-sizer
                        .block.w4: img(src="img/06.jpg")
                        .block.w3: img(src="img/08.jpg")
                        .block.w4: img(src="img/07.jpg")
                        .block.w4: img(src="img/20.jpg")
                        .block.w2: img(src="img/76.jpg")
                        .block.w2: img(src="img/77.jpg")

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment