Bubble's New Responsive Design Engine: an Introduction

Introduction to Bubble's New Responsive Engine

Back in November, 2021, Bubble released the beta of a new responsive engine, basically changing how you would go about structuring your app in the UI builder. To illustrate some of the benefits and also some of the drawbacks, I'm going to be demonstrating this video, how to recreate this layout here of a registration form in a page using the responsive beta engine.

Creating a New Page with the Responsive Engine

So let me create a new page. And once it loads, I'll convert that to the new engine. One of the key differences is the use of containers, which for the purpose of Bubble is using groups. Elements are placed inside of groups in order to assign a common layout characteristic. The new response engine is much closer to traditional CSS web design because it uses Flexbox. So if you've used something like Webflow in the past, you might find that actually the new responsive engine is much closer to what you're familiar with.

Building the Layout

So let's build up these elements. We need to go to beta. Let's make it, it's going to be a row because I'm containing two columns. And let's make it a little bit wider. And then let's put the first, I'm gonna get a bit higher as well. Oops, I'm at 900. And let's put the first of our columns in. And so this is going to contain a series of columns because I'm gonna be putting multiple rows in. And the max width is going to be 50. And that's a fixed height because it's always gonna be 50% of this page no matter how much you resize it. A fixed width rather. Talking about height, I'm gonna make height 100% and then I can just duplicate that and now I have my two columns.

Adding Color and Containers

So let's just go back and get the color of my blue. Wrong one. There we go. Okay, and remember I said we need to basically contain things in a container. And if we can't get the layout that we're hoping for, it probably needs an extra container. And you'll see what I mean as I start building this. So this is gonna be, I'll just call this form body. And because you're using containers within containers, even more so than the current or traditional UI builder, it really helps to start labeling your items.

Adjusting Width and Alignment

So we're going to make this a fixed width and I'm gonna just match it to this, whatever this was. We'll call it 340. Okay, and then I'm actually gonna change this to align to parent because it's going, it will allow me to attach it to this edge. Because what I want is I want half my screen to be white and then half my screen to be blue. And then I just need to indent this a bit. So I'm gonna apply some padding.

Understanding Margins and Padding

The difference between margins and padding is margins applied to the outside on object whereas padding applies to the inside. So looking at this left column, I'm going to apply padding to the right side of 80. And now I can start building up my form.

Building the Form

So let's go back to here. I'm just gonna copy and paste into that. This is gonna be layout type column because I want my items to be one on top of another. In fact, let's do that first. I'll just make that a little bit smaller. Here we go. 'Cause that will illustrate first nicely. Okay, so first thing to debug here is I want this to be on top. And then this has got some enormous height, I would assume. Oh, fit heights content, there we go. It's because I copied and pasted it from the old engine to the new engine. Just often needs a bit of tidying up here.

Adding Form Fields

And then let's bring over our name field. It looks like face exactly the same. Oh, this time around, it's not giving me the option. Okay, maybe that's a bug, maybe Bubble hasn't fully built in the ability to copy and paste across. So we'll build it manually. It's gonna be my name field, the label rather. Oh, it's got a very buggy. Let's give that a refresh. I'm not guessing the layout option at all now. Let's refresh it. And the layout option is back. Okay, but we'll work with this.

Styling Form Labels

So for my labels, I like to set no min height and then set to fit height to content. That way I can use margins in order to get a nice uniformed gap and layout. Okay, height, yeah, 54 is good. Fixed width, I'm going to make this 100% because I want it to be the full width of its parent container, which is this.

Grouping Form Elements

I'm then gonna group these so that I can get a nice uniformed gap in between each. I'm gonna have multiple versions of this. Let's put those in there. And I want to have a nice gap between each one. So what's going on here? Let's have a look in the visual elements tree. I think I've put items in, yes, here we go. Accidentally put group F into group E. There we go. So I have each of these contains a form field. And using shift, I'm selecting more than one. And then I'm putting these, yeah, it's often these. Groups within groups. These in a column. And what this allows me to do is to specify gap. And so now I get a nice uniformed gap between each item.

Adding More Form Fields

So what are we missing from the form? We're gonna skip gender 'cause that's just a dropdown box. That's illustrated in another tutorial. I'm just gonna go with email and password instead. So, your email. (keyboard clicking) Your password. And then to really tidy this up, we will add a bottom margin onto there.

Adding a Submit Button

And last but not least, we need a button. Okay, as you can see, the button's not gone where I intended it to go. So I'm going to use the elements tree here to drag it in to the right section. Sometimes it's easy to drag it in above and then just make it last. There we go. So I've not put the button in group G because I don't want to apply the 20 pixel gap. I'm just gonna give the button its own margin. And I am also going to align the button to the right. There we go. And make it a fixed height. Just rename it.

Previewing the Form

Okay, and let's have a look at that in the preview. Okay, so you can see that by using align to parent, I have, I make sure that this box here is snapped to the right, but with the padding that's applied here, so that I can resize and each column remains 50% and I get that nice split view effect, which is quite common in SAS products at the moment.