callmecavs/bricks.js

A blazing fast masonry layout generator for fixed width elements.

bricks.js's Issues

Suggestion about the Website background color

Awesome library! Btw, It would be great if the background color of the doc site
was less intense. I played with the color and the #AAAAAA color looked cool:

Thanks!

Seems the demo is broken?

@callmecavs first wanted to say this is dope!

However, when I'm on the demo site I see the following:

on resize sizes

Hi guys,
can you provide work example of resize method?
I have catalog and filter that opens at the left of catalog.
so on page load I have 3 columns, if filter box opened it whould be changed to 2 columns. And sure this example should be with breackpoints :)
thanks

Issues with parcel Bundler

I could not bundle it through parcel.

Is this because of a parcel bundler or am I missing something?

iOS Safari bug on demo page

Latest Safari, iPad

Does this plugin allow for lazy loading?

Is there any kind of built in reinit function etc for when new images are loaded using a lazy load script?

Docs: footer is hidden behind grid

Since the grid elements are positioned absolutely, the grid container height is not big enough.

Support (r)em units for elements width

This is great that media queries in the sizes parameter can use any unit, but how is it useful if elements width must be in px?

It would be really great if we could also use em or rem for elements widths. Thanks!

Bower

Register this as a bower package?
https://bower.io/docs/creating-packages/

:)

Video

Does this framework work with video?

Doesn't want to work?

Hi,

I'm trying to get this working but I get an error:

TypeError: options.packed is undefined[Learn More]

I've tried it with a selector:

    const instance = Bricks({
        container: "#case-wrapper a"
    });

and also a direct node for the parent:

    const instance = Bricks({
        container:  document.getElementById("case-wrapper")
    });

What am I doing wrong?

TIA

Andy

Resize not working, workaround throws "nodesWidth is not defined"

The resize function doesn't consistently work for me, so I replaced it with this code

window.addEventListener('resize', function() {
instance.pack();
}, true);

This throws "nodesWidth is not defined". inspecting the source, sure enough there is a line that expects a var called nodesWidth which doesn't exist anywhere else. Adding var nodesWidth = 1; to my script works

Docs: performance indicator isn't working

It's stuck at 100ms, and refreshing the pack throws
bundle.js:1 Uncaught ReferenceError: nodesWidth is not defined

Handle the case when there are no nodes yet

I'm in dynamic list and remove / add elements. Starting or update when the list is empty raise an error here https://github.com/callmecavs/bricks.js/blob/master/src/bricks.js#L103

Would be nice to handle this in bricks. My go around is to destroy bricks.js when going empty and restart it... but it's not very nice.

PhotoSwipe.js integration

Hi guys,

I think this library would be perfect together with PhotoSwipe, and I was hoping someone might be able to help integrate the two libraries.

Here's a working bricks.js implementation: https://jsfiddle.net/939ppbj4/21/

Here's a working photoswipe.js implementation: https://jsfiddle.net/939ppbj4/24/

Here's a non-working brick.js + photoswipe.js implementaiton: https://jsfiddle.net/939ppbj4/30/

Could someone please help figure out what's wrong? I think many people might appreciate a working example of bricks.js and photoswipe.js together.. :)

SyntaxError: Unexpected identifier 'Bricks'. import call expects exactly one argument.

Using the provided, documented code, I get this error every time, SyntaxError: Unexpected identifier 'Bricks'. import call expects exactly one argument. and Bricks fails. I may be missing something basic but it makes no sense to set up a simple demo jsfiddle demo with the provided Bricks code and nothing works.

Docs: demo should expose code / be runnable

While trying bricks.js, I failed with a simple example. If the demo exposed the code it uses to generate the grid or if it was runnable (e.g. open it in a plnkr), trying bricks would be much easier.

Issues when implemented with Bootstrap

I've set up an example here.

1. The gutter isn't always correct especially when the page first loads. Sometimes some bricks are right up against each other. This issue is mostly seen with the vertical spacing between the bricks. The gutters seem to fix themselves when I resize the window.
2. Can we have widths work when set in percentages via CSS? I tried but it didn't work. You will see in the codepen that I controlled widths with JS instead to set exact pixels.
3. When I resize between different screens, the responsiveness of the cards isn't that great. I know ideally, users don't resize their browsers on devices the way developers do, but when I view this on a device that can rotate, like a mobile phone or tablet, I see the issue. Sometimes the main container (the wall) is squashed, giving the bricks the same treatment.

Sorry if I missed something in the documentation that could have fixed these issues. The example and documentation didn't go into a lot of details so it took me a while to get it working the way I have it in the codepen. If someone could provide some guidance, it would be greatly appreciated.

Support percentage gutters.

It'd be nice to allow percentage width gutters, as I set my grid items widths as a percentage as well (using a Sass mixin that takes columns, and gutter into account). Any plans to implement this?

Should add a destroy public method

In order to clean up things nicely and avoid memory leak due to binding on resize event. This is mostly for dynamic webapp.

bricks-1.7.1.min.js:6 Uncaught ReferenceError: nodesWidth is not defined

bricks-1.7.1.min.js:6 Uncaught ReferenceError: nodesWidth is not defined

animation when viewport resizes ?

Is there a way to have the bricks animate into their position when the viewport resizes? Can this be done via CC3 or must be a JS thing?

IE 9 support?

Do you have plans to support IE9 in future?

Allow for multiple instances

Can you please add documentation and/or an example on how to run multiple instances on a single page?

jsbin/jsfiddle/codepen example

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 )

Sizing based on container width

Is there any possibility to have the sizes array based on the container node? I am writing a plugin that should be dynamic enough for many webpages. So I would really appreciate such a feature.

Best wishes

usable as simple js script?

Hello,
This is more of a question than an issue, but being relatively new to web development and JavaScript, I've never used such an environment to build my websites, only simple js scripts loaded externally or inside my pages.
Also I'm considering using Bricks for a small website for which I don't have access to the server apart from an FTP access, so I won't be able to run any command.
Is there a way to use it for such a use case?
Thank you very much, I hope someone can help me, Bricks seems perfect for what I want to do.

Make horizontal and vertical gutter separately?

Shall we make the horizontal and vertical gutter separately? Instead of using the same gutter size in both direction

Not working

Ive tried the library because it looks interesting but it is actually not working.
Ive included it like described in the documentation but my elements are just positioned absolute and the data-packed attribute was added, nothing more.
Also the absolute positioning only occurs after resizing the browser window, despite calling .resize(true) after instantiation.

HTML:

<ul class="listings">
  <li class="listing"></li>
  <!-- ... -->
</ul>

JS:

const bricks = new Bricks({

    container: ".listings",
    packed: "data-packed",
    position: false,
    sizes: [
        {
            columns: 1,
        },
        {
            mq: "800px",
            columns: 2
        },
        {
            mq: "1200px",
            columns: 3,
        },
        {
            mq: "1600px",
            columns: 4,
        },
        {
            mq: "2000px",
            columns: 5
        },
        {
            mq: "2400px",
            columns: 6,
        },
        {
            mq: "2800px",
            columns: 7
        },
        {
            mq: "3200px",
            columns: 8
        },
        {
            mq: "3600px",
            columns: 9
        },
        {
            mq: "4000px",
            columns: 10
        }
    ]

});

Left To Right sorting order

Hello! I need to order my grid items by "left-to-right" order. How I can reach that?

Support modifying the sizes array after bricks is instantiated

In my use case, the sizes array is calculated dynamically based on the state of the parent layout (the layout holding the bricks.js instance.) It's possible for the parent layout to change dynamically, which would require recalculating the sizes array.

The most direct solution would be to supply a new sizes array to an existing bricks.js instance and then repack. Do you think this is worth a PR?

I also considered tearing down the existing bricks.js instance and rebuilding it, but I'm not sure if that's the best way to go because of the overhead, and because tearing it down cleanly doesn't seem straightforward. Would you say that this is the preferred approach? Thanks!

How to implement animated sorting and filtering

Is there an easy way for animated filtering / sorting when grid is already rendered?
Like isotope library...

Mixed Width Layouts

Hi!

I would like to know about the possibility of mixed-width content, let's say one block has the double of the width used in the other blocks, is possible to get this kind of result using the current version of Bricks?

Kindly,
Rafael

Website

I like the style of you website. Let me know if you want to get bricks.js.org: dns.js.org

Provide non min file in dist

I minify my app and minifying an already minified file is not advised, webpack raise a warning for that.

Issues when using with Webpack

WARNING in ./node_modules/brick.js/src/parser.js
22:15-25 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/brick.js/src/parser.js
 @ ./node_modules/brick.js/src/module.js
 @ ./node_modules/brick.js/index.js
 @ ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/search.vue?vue&type=script&lang=js
 @ ./src/pages/search.vue?vue&type=script&lang=js
 @ ./src/pages/search.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./.quasar/entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./.quasar/entry.js

WARNING in ./node_modules/brick.js/src/parser.js
33:22-35 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/brick.js/src/parser.js
 @ ./node_modules/brick.js/src/module.js
 @ ./node_modules/brick.js/index.js
 @ ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/search.vue?vue&type=script&lang=js
 @ ./src/pages/search.vue?vue&type=script&lang=js
 @ ./src/pages/search.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./.quasar/entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./.quasar/entry.js

WARNING in ./node_modules/express/lib/view.js
81:13-25 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/express/lib/view.js
 @ ./node_modules/express/lib/application.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./node_modules/brick.js/src/router.js
 @ ./node_modules/brick.js/index.js
 @ ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/search.vue?vue&type=script&lang=js
 @ ./src/pages/search.vue?vue&type=script&lang=js
 @ ./src/pages/search.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./.quasar/entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./.quasar/entry.js

I am attempting to implement this in a Vue.js project, I import Brick and configure an instance in the Vue "created()" lifecycle event. My understanding is that the above is what is outputted as a result of Webpack bundling... but unsure where to begin on resolving this.

 WARNING  Compiled with 3 warnings                                                                                                                                                    23:39:37

 warning  in ./node_modules/brick.js/src/parser.js

22:15-25 Critical dependency: the request of a dependency is an expression

 warning  in ./node_modules/brick.js/src/parser.js

33:22-35 Critical dependency: the request of a dependency is an expression

 warning  in ./node_modules/express/lib/view.js

81:13-25 Critical dependency: the request of a dependency is an expression

Version: webpack 4.9.1
Time: 12266ms
Built at: 14/06/2018 23:39:37

To recreate the issue:

1. Install the Vue-cli (https://cli.vuejs.org/guide/creating-a-project.html)
2. Create a Vue project
3. Run "npm serve" to confirm dev environment is fine.
4. install brick.js
5. Attempt to create instance

Receiving "container is null" error

I've included bricks through NPM and Wordpress Scripts in a Wordpress installation and I'm receiving the error "TypeError: container is null"

with the following instantiation

I've verified the script is running on a page where a

element has the "bricks" id and it is full of elements

CDN support

Amazing stuff !
It would be great that bricks.js may be available on some CDN.

Current project status

Hi, what is the current status of this project? Is it still actively maintained or are you looking for maintainers?

Website broken?

Hey,

your http://callmecavs.com/bricks.js/ looks like broken at the bottom section. Bricks section doesn’t resize and overlays some of the licensing information.

Support infinite scrolling?

@callmecavs As mentioned here #42 I presume the update method could used for adapting brick.js to work with an infinite scrolling lib(?). Have you or anyone tried brick.js with an infinite scrolling lib and had success?

What is solution for multiple grids?

What is solution for multiple masonry grids in 1 page?

`display:none` on a grid item breaks everything

Minimal example: https://jsfiddle.net/1s5o685n/
If you remove the display:none; inline style from the first grid item in the above example, it works fine.

I'd like to be able to filter my grid items by hiding some and then re-packing them. Is there a way to do this? Seems like items with display:none should be ignored in the packing process.

Cheers

Doesn't update properly when bricks are images?

I have a container full of a links which contain <img>s . I first pack the container, but after I add new images and try to update, they always sit behind each other (as if they have no height or width, even though when I debug the brick.js lib, it definitely recognizes the imgs height). The update is on the image loaded event. Using pack instead works, but I would much rather figure out why update isn't working.

doesn't work unless resizing the window

this is the issue im facing, unless i resize the window, nothing works, it just show the content, after resizing the window, everyhting works as expected

Limit Numbers of Chars on Demo Input

My co-worker did some testing, and input above ~100,000 will freeze the browser. This is somewhat expected, but the Pack Time option does invite users to try some rather large numbers, so I would maybe limit the number of characters that can be inputted for the demo page's test.

Bottom gutter is broken.

See this Codepen:
https://codepen.io/boycce/pen/rdyyVd

mq property doesn't work with Number type

when setting sizes if mq is a number 640 the breakpoint won't response unless it's a string 640px. it would help if either it worked with both or documentation clarifies it should be a string and not any.

Should allow options container as Node el

I already have my container node when instantiate bricks.js, would be useful to directly give it instead of adding special attribute on it in order to create a unique selector.

Timing of packing is innacurate

When placing over 100 elements into the website demo, the execution timing of the packing function is inaccurate.

We placed 100,000 items in the demo and it stated around 1.8s when in reality we timed it around 3-4s.