Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
packery
Foundation.utils.image_loaded($('.half-left .blocks img'), function(){
$halfLeftBlocks.packery({
columnWidth: '.half-left .block-sizer',
itemSelector: '.block',
"isOriginLeft": false
});
});
@pmeissner

This comment has been minimized.

Copy link
Owner Author

commented May 28, 2014

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

This comment has been minimized.

Copy link
Owner Author

commented May 28, 2014

                    .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
You can’t perform that action at this time.