jsbin/jsfiddle/codepen example

[dadatawajue]

Hello, I was hoping it would be possible for you to make a codepen demo showcasing how properly integrate bricks.js so newbies like myself can also use it

If possible then I'd really appreciate if you could help integrate it to: http://codepen.io/dadada/pen/Wxrxjo?editors=0010 or some other image gallery

( if don't have codepen can use account: dadada // 123456 )

[josephrocca]

I could also really do with a minimal example. I've set up a jsfiddle so someone just needs to correct the JavaScript section: https://jsfiddle.net/939ppbj4/4/

Edit: @dadatawajue Haha I just realised you already set up a ready-to-go example too! Oh well, the more examples, the better. Really hoping someone can fix up these examples for us and put them in the documentation for others.

[dadatawajue]

My example didn't work, I failed miserably ^_^

But your jsfiddle seems really great, didn't realize it was so simple, except it doesn't seem to work so maybe something is missing? Screenshots: http://imgur.com/a/MSCbW

I also tried to insert some images into it: https://jsfiddle.net/939ppbj4/6/
Could you check if this is the right way to do it?

Edit: Made some changes: https://jsfiddle.net/939ppbj4/7/ - I guess if bricks.js is used for images then it's best just to write:

<section class="grid" data-grid>
  <div data-packed>
    <img src="http://lorempixel.com/150/168/">
  </div>
  <div data-packed>
    <img src="http://lorempixel.com/150/340/">
  </div>
</section>

Is this correct?

[josephrocca]

Sorry for the confusion! I posted that jsfiddle link knowing that it wasn't currently working. I just wanted to set up an example that was all ready to be fixed (didn't realise you had done the same). So yeah, I'm also a newb in search of a minimal example that works. I really have no idea what I'm doing wrong - the docs are a little confusing to me. Hopefully some ninja can come to our aid :)

[dadatawajue]

Haha, your name looks familiar to another repo I've been following so I just assumed you were the creator of bricks.js ^_^
It seems like it still needs to be instantiated, maybe something like https://jsfiddle.net/939ppbj4/8/
But yeah.. I'm also lost, hopefully @callmecavs can come save us ;3

[josephrocca]

@JSteunou @simon-am @gjuchault @nhoizey

Very sorry for the random spammy tagging, people! Seems like the author of this lib is quite busy, so I'm wondering if someone could help us fix this minimal example? It's all set up and ready to go - we're just lost as to what is missing/wrong. We'd be so so grateful!!
https://jsfiddle.net/939ppbj4/9/

[blakerutledge]

Hey guys... you were so close.... take it to the house and add:

brickInstance.pack();

[josephrocca]

Haha thanks so much! The nightmare finally ends 😄 🎉
So in case anyone stumbles across this issue in search of a minimal working example, here it is! https://jsfiddle.net/939ppbj4/10/ (thanks to blake!)

[dadatawajue]

Thanks a lot joseph and blake, really appreciate it!

I guess this would be the most minimal example of bricks.js working with images: https://jsfiddle.net/939ppbj4/12/ (just resize window to get it working since jsfiddle can't use the window.onload function)

[nhoizey]

It would be great to have such an example with em values for elements sizes and MQs, instead of px

[dadatawajue]

I'm not sure if I understand but I guess something like this https://jsfiddle.net/939ppbj4/13/ ?

[nhoizey]

Yes, but also with content divs using em widths (ok, more difficult with only bitmap images).

I still hope em to be supported everywhere in a future v2: #10