Forum Documentation Showcase Pricing Learn more

[New Feature] Improved grid in editor

Hello,

We just pushed a few improvements to the grid in the design tab. You can now define a gutter, in addition to the simple grid we used to have, which will help building more consistent designs.

The colors and widths of the grid and the gutter are customizable to work with your design as you’re building your app.

23 Likes

Awesome! Thanks for the update, that’s awesome.

3 Likes

wow, that’s really helpful.

This looks like a nice feature. Could you explain what gutters are, how to use them, and how they make app layouts more consistent?

Thanks

1 Like

TL;DR: Gutters help with your design alignment and element width consistency.

The gutters are used for spacing and alignment. If you look at frameworks like Foundation, Bootstrap, Sassgrid, or others, they all use this gutter concept. Elements take up a certain number of columns, depending on screen width, and you use gutters to make sure no elements are just stuck floating in the gutter.

4 Likes

I had the same question a few days ago. I had seen designers using these gutters but I have never understood how they use it. This guy’s YouTube channel really gave me great insight into app design (and the first time I understood how to use gutters): https://www.youtube.com/watch?v=BMHUKij1yUE&t=344s

4 Likes

Speaking of lines and colours of lines - can we give the ‘show borders tool’ also the ability to change it’s colour. The colour of the border tool is #eeeeee which means if I have an #eeeeee background (a common grey colour to use in design) I have to keep changing it to #ffffff to see the borders…

1 Like

I agree this will be very helpful. I always leave the background color till the end so I can see the borders

I have #fff fields on #eee and don’t really want to make background another colour as I want to get accurate look and feel on front end…

That’s a good idea, we’ll do this.

2 Likes

This is live, options are now under the Grod & Border menu.

6 Likes

That’s what I call good customer service! Where can I nominate Bubble for a customer service award? (Seriously).

I have other little things on my wish list that I’ll refrain from listing here :slight_smile: is the Ideas section of the forum regularly looked at as my ideas submitted there are never implemented - maybe my ideas aren’t very good, be good to get feedback when an Idea is submitted.

Emmanuel you have personally had a direct impact on my own corporate customer service. I manage the releases for a large team of React developers with a long sometimes 2 year backlog with all the trimmings of an 8 person customer service team but since seeing the impact of you directly dealing with a Bubble request and implementing it, I have ensured that I personally email customers with good ideas to tell them it’s good and that I’ll try to get it out in the next release to production. I can literally feel the delight in their reply that a large corporation has not only listened to them but will try to get the feature out ASAP. Although asap for us is within a month. :slight_smile: Bubble is also the reason I only work there 2 days a week now and Bubble the rest of the time, so thank you…

10 Likes

Duuuude! Nice one. Did I miss the announcement when you added this feature? In any case, thanks!

image

1 Like

Hey guys, any plan on updating the Grid? We cannot set the margin separately. If you think about how margins are used, for example in Figma, the fact we can’t have separate margin size makes the tool almost obsolete in my opinion… Or did I miss something?

thanks!