Over the next couple of lessons, we're going to build this welcome page, or what we call a view in mobile, and in so doing, we're going to learn all the fundamentals for building these kinds of interfaces in mobile. So we'll be building off the last lesson where you created your mobile app. You should have Bubble Go installed on a mobile device to help you test with. Let's dive in.

There are five fundamental areas to get familiar with when we're building interfaces in Bubble. The first is styling.

Now, for us to understand styling and all the subsequent areas of design as well, there's just a few fundamentals of how we use the visual editor here in Bubble that we need to understand.

So, in the last lesson, you may recall that we added a text element onto the page like this. And this is the library of visual elements that you're able to add to the canvas area over here in order to create an interface. As well as there being text elements, there are things like buttons, there are things like inputs, there are also things like containers, groups, where you can put other elements inside, and we're going to cover how these work as we move throughout the course.

But I just want to draw your attention right now to this little section over on the left-hand side, which is called the elements tree. And note here how we've got a few entries here that all seem to correspond to those elements that we were just placing on the screen. So if I select this one text "Hello World," you see how we've got a corresponding element selected here on the canvas. Text B selects this guy, Button A is this guy, Input A is this guy. So this is a running inventory of the elements that we place onto the canvas.

What we're designing here is a view, and I'm going to use that word throughout the course — "view" as opposed to something like a page, which you might be familiar with from the website/web app development world. In mobile, we're working within views, and what we're actually editing here is something called the home view. We're going to get to how to create more views in a moment, but for now, we're just going to stay within this home view.

Now, in terms of actually modifying these elements so they look the way that we want them to, we click on any of these and we get this thing that floats above the page, which we call the properties editor. We saw this in the last video as well, how we could use this to, for example, change the content inside of a text element. We can do the same thing for a button and notice how we've got different properties for the button than we did for the text element. We've got something here called a label, which we can change to something like "Click me," and we've got different things again for something like an input, where we might have some placeholder text like "Type here." How that works, if we go and preview, is that just gives us some text that appears before the user starts typing into that input box.

So depending on the element itself, you're going to have different properties available. Some of those properties, if we just delete these other elements so we just have one text element left on the screen, and I'm going to change this back to say "Hello World," some of these properties correspond to how this element looks. So we've got things down here like the font size, which we can bump up, things like the font color, so we could just change this to any kind of arbitrary thing, the weight of the font — so just the scale of thinness or boldness that a text element has — and there's other properties too, like we can change the background, the border for this text element. So you can play around with some of these settings to see how they work.

We also have this strange little section here that says "Style." If I choose here from one of these styles that are appearing, you notice how that changes the appearance of the text. And all a style is, is just a collection of these styling properties. It's a template for how this text should look. We're going to learn in the next lesson how we create and manage styles in our application.

But before we do that, I want us to deal with the second principle that we need to understand for designing our mobile app, and that is layout.

One thing you probably noticed when we were putting elements on the screen, like another text element here, is that we can't actually just drag and drop it exactly where we want on the page. And no, you're not going crazy — that is actually by design.

If we actually click on the canvas here or click over on "Home" in the elements tree, and then you go over to this layout section, you see here we've got this thing called a container layout. It's currently set to "column." I'm going to change this to "fixed," and when I do, notice that now I can actually drag these text elements exactly where I want them on the view. If I do have a text element like this "Hello World," just notice how these text properties are changing — these x and y coordinates, which is a representation of where this text element is in terms of the number of pixels to the right of and below this top corner of the page. If I drag the size of this text element out, well then the width gets bigger, if I change the height then the height gets bigger, and all of these measurements are in something called pixels.

You can see that for our view itself, our width here is 393, the height is 892. If I change to a different type of device here, then those widths and heights will change accordingly.

Now most of the time, you won't actually be using a fixed layout. I'm showing it to you here in order for us to understand what these other two layouts are: columns and rows.

Because with a fixed layout like this, everything is positioned in terms of absolute position, which means that its position is dictated by a particular area on the page in these x and y coordinates.

That's in contrast, if we change the layout to something like column, where the elements are actually positioned relative to one another. So you can see here I might add another button on the screen. This button, as it's been placed on the screen, is actually being positioned relative to the elements above it. So we've got a text element here — we'll call this something like Text A — then we've got this big "Hello World" text element, and now we've got our button. All these elements are doing is arranging themselves one on top of the other, and you can even drag them here on the canvas to rearrange them. So now this button is in the middle, or you can drag them here within the elements tree, like I might put this button here up on the top.

Now you have another layout type too called a row layout, and with a row layout, the elements are actually going to arrange themselves side by side. Right? So you can see this a little bit more clearly.

I'll just add some shapes to the page, and I'm going to give them all a little bit of a border so we can see them all very clearly. If I just go and hit Command or Control D on my keyboard, then I can duplicate one of these shapes, and you see here that if I keep duplicating, what actually happens is that I can't fit any more shapes on this row, and so subsequent shapes are going to, as we call it, wrap to the next line here.

So what we have is a phenomenon where what we call the parent layout — which is this home view — is dictating to its children elements, which are now these shapes, in other words the elements inside of it, the elements that are nested within it. That parent layout is dictating where those children should arrange themselves depending primarily on whether this is a row layout or a column layout.

You can see as I've changed to column, now they've all stacked.

Now this concept of a parent and a child — let's just linger there for a moment. I'm going to delete all of these shapes off the page, and I want to draw your attention to this containers section, and specifically this thing here called a group.

Now if I put a group here on the page, what I'm able to do with a group is if I grab another element like this text element, I can actually just drag it inside of the group here, place it, maybe I'll add a little button, maybe I'll add an icon as well. Notice here how they're all stacked on top of one another. That's because this group, if we open up the property window and open up the layout tab, you can see that this group has its own layout.

So every container in Bubble is where we set the layout for how the children within should arrange themselves. So this home view, you can think of this as sort of container zero, right? The first, the highest parent within this view. Then within this home layout we've got this container Group A, which can in turn have its own layout. I'm going to give it here a background style, just something kind of subtle, just so that we can see it on the page.

If I was to change this group's layout from a column to say a row, well, notice here how the elements inside are now in a row layout. But if I was to copy — I'll go right-click and copy — and then I'll just right-click on this home section in the elements tree and hit paste to create a duplicate of this group, and let's make the second group here a column, you can see here how the second group, which we obviously would be able to see a little bit more clearly if I give it a different color, this second group has its children nested in a column layout.

This is essentially the way that you design all your views — containers nested inside of containers with either row or column layouts.

I can show you this if I just open up, for example, Airbnb here. Notice what we've got: we've got basically one super large column view, and inside of that column view we've got a whole bunch of nested layouts. So we've got an input box up the top, sort of just a standalone element. We've got a row layout underneath with some filters. We've got — oh, here's an interesting one — we've got what looks like at the top level to be a row layout, but then inside these two elements here seem to be nested inside of a column layout, right? Because they're stacked on top of one another and then they're next to this image element. Then again, we've got a big column layout because we've got a text element and then this sort of horizontal scrolling list of homes. Then in that horizontal scrolling list of homes, you've got another column layout for sort of the card view for the place, right? Because you've got something like this image element stacked on top of the title for the place, but then you've got again a row kind of layout with these elements inside.

Let's take this view from the AllTrails app. You've got again everything in a column layout — that's how all our layouts are going to be on mobile at the parent level — but then you've got a row layout at the top, you've got a column layout here right with some nested elements inside, you've got what looks like is probably a row layout with item one, item two, and then item three and four wrapping to the next line because there's not enough horizontal space for them all to fit on one line, and then another column layout here, and another row layout at the bottom.

So this is what we call the box model. That's all an interface is — it's elements nested inside of boxes nested inside of other boxes, and those boxes are either laying out their elements left to right, and then potentially wrapping to the next line if they can't fit, i.e. a row layout, or they're arranging their elements one on top of the other in a column stack.

So layout is something we set at the parent container level. It tells the children of that parent how they should arrange themselves. But then the children also have some say in where they should go, and that property we call alignment.

To demonstrate alignment, I'm just going to delete one of our groups here, so we've just got our red one here at the top. I'm just going to duplicate this text element a few times and give these all a different label so we can see them a little bit clearer.

I want you to notice here how Group A is a row layout. All of these elements are just squished up against the left-hand side of this group. But we can also squish them up against the right-hand side by changing the alignment of the parent to be right align. You've also got center aligned. You've also got something we call space around, which is going to spread the elements evenly amongst the horizontal space that they can occupy, and space between, which is going to shunt the first and the last element within the row up against the edges and then distribute all the other ones in between.

Now, in a moment we're going to talk about sizing, but for now I just want to do something very specific to show you one more aspect of layout, which is that if we tell our Group A that we want it to have a fixed height and a certain number of pixels, let's just say 100 pixels, all of these children elements inside of this row layout are shunted up to the top. Right now, but each of these children elements has a degree of agency over its own life, so to speak. So this Text A, if we've got it selected here, we can say that we want it to be sitting in the middle or at the bottom, right? Or even spread itself the height of its parent, right? And all of these text elements independently can decide this for themselves.

So what we have here is the ability for children elements inside of a particular layout to determine their position on the opposite axis to the layout that they're in. In other words, because this row layout is laying out these elements side by side, each of these elements can decide where they want to be vertically, right? They're being told where to be horizontally. They can tell themselves where to be vertically.

If I change this container layout to a column, we'll see that principle in reverse now. So I can demo this. Let's change the fixed height to something a lot bigger like 400, and what I now have if I've got Group A selected is the same controls that we had with the row layout, where I can tell all of my children not to be shunted up here against the top but maybe to be shunted against the bottom or in the middle or to give themselves space around or space between. You get the idea.

And then each of these elements in question can decide where they want to be on the opposite axis, so they're being told where to be vertically, which means that they can tell themselves where to be horizontally.

This Element B could be in the middle, could be on the right, or it could spread itself across the distance.

Now if I turn off fixed height here and just get rid of this minimum height — we're going to get to sizing in just a moment — but I just want you to notice how our Group A here is at the top of this homepage in its entirety. Right? If I click on this homepage, I actually don't have those same controls that I have available to this Group A, namely the ability to send my children to potentially the bottom of myself.

That is because our home view here is of type scrollable. So this is a very important distinction.

We've got a few different view types in Bubble, and we're going to explore them as we go through this course, but the two that I want us to note right now are both scrollable and not scrollable.

Now if I change this to not scrollable and I select my home layout again, notice how all of a sudden I do have these layout options, and that's going to mean that because we've got one group — if I go and collapse this — we've got one group inside of our home view.

If I select my home view again, I can tell that child element to be in the middle perhaps or down the bottom, and that's very handy because if we look at the design that we're trying to emulate here, notice how all of our text elements here seem to be stacked down the bottom with the exception of this logo, which is floating up at the top.

So this is suggesting that we probably want to have a non-scrollable layout for this view.

Now the other difference between not scrollable and scrollable, which is kind of intuitive based on how they're named, is that one of them will scroll as the content gets too large to fit on the view.

Just to show you that in practice, if I change the container alignment here of my home view so that this Group A is at the top again, if I just duplicate this text element a few times, so we're going quite below what we had before, right? This is much higher than a mobile device that any of your users are going to be using because we are on a non-scrollable layout.

If I go and preview this on my mobile device, I'm actually not able to scroll here, right? So the content on the page is just stopping where the bottom of my mobile device is.

However, if I was to change this to scrollable and then, of course, give my phone a shake, relaunch it, what I now have the ability to do is scroll so that I can see all of the content.

Okay, now for this first view that we're creating, we do want to have a non-scrollable layout because we are controlling exactly what the user needs to see, and we want to have full control over the elements that are appearing both at the top and the bottom of this view.

So I'm going to set my view type here for the homepage to be not scrollable.

Now let's actually start designing our home view here, and as we do, we're going to learn about the rest of these design areas in Bubble.

So what I'm going to do is I'm just going to delete this Group A that we were just kind of using for demonstration purposes, and I'm going to add a group to the page.

Just as a handy little shortcut, instead of having to scroll down here within this elements tree, you can also just search the different assets that you have available.

So I want to have a group, so I'm just going to place that on the page.

We're going to focus on this bottom group here for now.

So what I'm going to do is I'm going to make sure that my group here is laid out like a column.

I'm also going to give it a label so I can see it a little bit clearer and identify what it is within the elements tree.

As this elements tree starts to become more cluttered, it's going to become easier for us to at a glance know what we're dealing with if we are labeling our elements correctly.

I'll add a text element inside, and this is going to be our headline text here: "Track your adventure."

I'm just going to go and choose here one of our pre-built styles again.

We're going to deal with styles in more detail in the next video, but just know that we basically have a bunch of styles here that come out of the box that just let us kind of quickly get a particular look for our elements.

So I'm going to apply that style.

I might make it center aligned here.

I might decide that the gap between these two lines of text is a little bit big, so we've got this property here called line spacing, which I'm just going to change to one.

And then right off the bat, what I'm going to do is, if I select my home view again, I want to make sure that this group is sitting at the bottom of the view here, just like it is in the design that we're trying to replicate.

And so, how do you think we would do this? Remember that we just said that if our view here is not scrollable — and it, of course, is the parent layout here — well, it can dictate where its children are. With one child element, this group bottom, and so from the parent layout’s point of view, this home view, we could decide that we want our children to be down the bottom.

So I’m going to choose here to be bottom aligned.

And then the next thing that I might want to do is add a button. So I can either, within the group here on the canvas, sort of click where I want it to go, or within the elements tree, I can also click where I want it to go. So I’m going to do that now just to show you a different way.

This is going to be our get started button.

And right away, I want you to notice how this button element is just stretching the full width here of the view, right? It’s just taking up this full width. In contrast to, let’s say, a text element that I just put in here, and I, you know, just say something again like "hello world," see how it’s just taking up the space that it needs? It’s not stretching its way across here unless I was to explicitly say I want you to stretch the full width.

Now this phenomenon highlights the fourth area of design, which is sizing.

And probably the most important controls when it comes to sizing are these two little guys here: fit width to content, fit height to content — mainly fit width to content.

So notice how this button element does not have fit width to content ticked, but our text element, if I make it left aligned again, it does have fit width to content ticked.

If I was to tick it for the button, what this means is now the size of this button is going to shrink in until it hits the content within.

Now, the content within, from the context of the button, is simply the label. So if I was to add more stuff to the label, then the button would expand in size, which is exactly the same behavior that we observed for our text element.

So when we have fit width to content turned on, the element is going to try to shrink as small as it can shrink without constraining the elements inside. And I’m using that terminology very deliberately because even our groups here — our containers — can be fitting their width to content.

So as I turn that on for our group bottom, we’re not seeing any noticeable difference, but if I was to, for example, make this header text a lot smaller, our group bottom here is now a lot smaller in size.

And I’ll show you that more clearly by giving it a background color here.

Right here it is without fit width to content turned on.

Here it is with fit width to content turned on.

So when fit width to content is on, the element in question is going to try to shrink as much as it can until it hits its children elements, or it’s going to try to stretch as much as it can before it hits the size of its parent view.

Now when I just said that fit width to content will make the element shrink as far as it can until it hits its children, I wasn’t being entirely truthful. It’s not just until it hits its children, it’s also until it possibly hits its minimum width setting here.

So let’s say that I set this to be 300. Notice how here the group just got a little bit bigger.

And even here, as I’m hovering, you can see that there’s these red lines appearing down the bottom where it says 300 pixels, which, by the way, you can turn that setting on and off by heading over to this Bubble logo in the left-hand corner and just changing the setting under grids and guides.

This particular one is called show distances on hover.

I’m going to leave it on because I find it quite useful.

So this group bottom is now trying to shrink itself as small as it can until it’s hitting basically the larger of either its minimum width setting or the size of its children elements within.

And that means that you can mix and match these settings to get the behavior that you want.

So if, for example, I turn off this minimum width so the group is now shrinking down to its children, well, I could effectively have my child elements push the parent container out to be bigger.

If I change maybe the minimum width — so the minimum width for this "track your adventure" text, why don’t I set that to be 300? That effectively does the same thing as we just saw, right?

This group bottom is now shrinking down as small as it can until it’s hitting the size of its largest child.

And the same principles apply here to the height of an element.

So right now, we’re fitting the height of this group bottom to the elements within, but I could add some kind of arbitrary minimum height here, which would then expand the height of this group.

Or if I undo this, I could expand the height of some of my children elements. So let’s say 144, right? And that would then effectively expand the height of the parent container as well.

So these two settings essentially switch or toggle an element or container from being in shrink mode, where it’s trying to be as small as it can until it’s hitting either its own minimum width or the size of its child elements, or it can be in stretch mode where it’s trying to expand itself as large as it can go until it hits some limit set by its parent.

And those limits will be predominantly set either by the size of what we call the viewport — that’s what the user can actually see out on their screen — or we’ve got this other little setting here called maximum width and maximum height, which do exactly what you would expect.

So if I say the maximum width for this group bottom is, say, 300, and I make my button here be in stretch mode — so I’m going to toggle off fit width to content — well, it’s, of course, going to just fill the available space that the parent is giving it based on that maximum width.

Okay, so all of these settings in different combinations can give us different behavior.

And as we go throughout the course, we’re going to see how different combinations of these settings can give us the desired effect, the desired design that we’re looking for.

But why is this the approach to begin with? Why don’t we just have a fixed layout and then just drag the elements exactly where we want them to be on the page?

Well, that’s, of course, because our users’ devices are not all the same size, right? You’re designing for mobile devices that have different widths, different heights.

And so we want the content to be what we call responsive.

We want the interfaces to respond, to adapt themselves so that they look good no matter what the screen size is.

And so if I just undo this for a moment — and we undo, undo until our homepage is a container layout again — and let’s just say that group bottom is not going to have a maximum width, it’s just going to stretch until it fills its parent container.

Its parent container in this case is actually the view itself, the home view.

What we can do is if we go over to this responsive tab over here and we click on that, we can actually use these little draggable handles here to see how our application looks on different screen sizes.

Okay?

And you can see here that this group bottom is definitely expanding its width there.

If we just had everything in a fixed layout, our applications wouldn’t work.

So we only want to use fixed layouts for, potentially, you know, the odd group that maybe has to have some very specific, idiosyncratic design, but it will just be then a section within a responsive view.

Nine times out of ten, you’re going to be using containers and rows, and you’re going to be using the sizing settings of your elements to determine how they should look within these responsive layouts.

Now let’s just start over here.

I’m just going to delete that group because it kind of got a little bit messy while we were demonstrating here.

And add back in a new text element just as before.

Give it again that heading text.

And then let’s just tweak these settings very slightly.

What I’m going to do with this text element is center align it and also make sure that it’s always going to be sitting in the middle of its parent container here by changing the horizontal alignment here to centered.

And then just add our button again.

And I’ll add a very subtle little background to our group bottom here, which again — let’s make sure we label this as group bottom just so that we can get a little bit of intuition for what’s going on.

And if I open this up here in Bubble Go, you can see this is what we’re looking at.

And there’s a couple of things that might strike you as a bit odd.

One is that like our button here is hard up against the sides of the phone.

And the other is that there’s just not a lot of space here between this header text and the button itself.

If you look at the design that we’re trying to replicate here, there’s a little bit of breathing room between the button and this text, and also there’s some space here around the outside.

So solving this brings us into the last area of design that we have to learn here, which is offsets.

And all offsets do is just, within a given parent layout — right? — column or row, it just lets us shunt or offset the elements from one another by a certain amount of pixels.

And there’s three types of offsets that we have: margin, padding, and space between.

We’re going to start with margin.

And margin is simply the space around the outside of a particular element.

So let’s start with this group bottom here.

And we’ve got this section under the layout tab called margin.

If I add, let’s say, 80 pixels here of margin, you can see how that is appearing.

Right?

This group here is now pushing itself away from its parent layout, which is the home view, by 80 pixels.

And it could do the corresponding thing on the right margin as well.

Okay?

So given the edges or the border of an element like this group bottom, right margin is the space directly on the outside of that border and it pushes itself away from any elements, including its parent, that are on that outside edge.

So you could do the same thing with this text element.

I could add some margin here.

Let’s add again 80 pixels on its bottom.

So it’s now going to push itself away from its, what we call, its sibling element, right?

An element that’s at the same level of the hierarchy within a shared parent container.

So this text for our title and the button are both siblings.

And so this text having a bottom margin of 80 is going to push itself away from this button down the bottom.

And in turn, if we had another, let’s say, 40 pixels margin on the bottom of the button, well, it’s going to push itself away now from the bottom of its parent container.

And because its parent container here, this group bottom, does not have a fixed height and is simply fitting its height to content, group bottom is just going to have a fluid size that’s just going to match the elements within.

So that’s margin.

Let me set this back to zero for all of these elements again.

And select our group bottom here again because I now want to talk about padding.

And padding is simply the inverse of margin.

So if margin gives you some space on the outside of an element, padding gives you space on the inside.

So here we’ve got 40 pixels of margin going out on the left and 40 pixels of padding going in on the right.

If I change this to 80, you might even see it more clearly.

Right?

We’ve got 80 pixels of padding that’s replicated by this sort of faded out area here of the group.

Now padding at the container level here will push the child elements away from itself, but you could also use padding on buttons.

So we’ve got here 20 pixels of padding on this button.

And if I wanted this button to be in shrink mode, for example, that padding would be taken into account here.

So we’ve got actually got 20 pixels here between the edges of the button itself and this text label inside.

If I was to get rid of this entirely, you would see that that text is now shunted hard up against the left side of the button element.

And the same thing goes for text elements.

So this text element is fitting its height to content here.

If I wanted to add a little bit of padding to the top right, that would then create space between what is this outside edge or border of the element itself and the content within, which is the text itself.

So if I just make my button here not fitting with the content and I get rid of this margin that we had left over on our group bottom, padding is actually what we want to use in order to get this little bit of space on the outside edge of this button.

So I’m going to apply that padding here at the level of group bottom.

And the convention for mobile design is 16 pixels.

Now in terms of getting some space between this "track your adventure" text and the button underneath, you could of course use some bottom margin at all to achieve this.

So let’s say that I’m going to add 16 pixels here of bottom margin to my text.

That’s going to create the space that we need.

But let’s say that we want to have another button underneath here eventually.

And I’ll give this one one of our predefined styles, which we’re going to tweak in the next lesson.

Let’s say this link light primary.

And this link light primary, let’s say that this is just a login button.

Well, we might decide that this login button here is a little bit close to the get started button.

And so we’d have to decide, okay, well, let’s add on our get started button some bottom margin as well, right?

Or, of course, if I undo this, we could do 16 pixels of top margin to the bottom login button.

But if we knew that we wanted to have the same amount of space between all of these elements within the same parent container — all of these siblings, right? Track your adventure text, the get started button, and the login button — well, then we don’t need to fiddle around with all of these individual margin settings.

If I just set this all back to zero because we can just, at the parent container level, i.e. on group bottom, we can access the setting here, "apply gap spacing between elements."

So if I go ahead and I tick that, that’s going to then expose the option for me to just set some equal amount of space that will appear between all of the elements inside.

And so if I hover here, you can see that indeed 16 pixels is the space that has been created between all of these elements.

And just to complete the picture here, ready for us to finesse this design, I’m going to get rid of the background style here for our group bottom.

And I’m going to actually add a different background style for our home view, namely one that lets us have an image like follows.

And so I’ve actually got an image I’ve pre-prepared.

And what I can do on this home view is actually change the background style here to be an image.

And I can just upload it here from my computer.

Now, it’s a good idea if you’re uploading these kind of assets to use a webp version, right?

This is a highly compressed image format, and there are lots of free tools out there that let you convert into webp, right? You just have to Google it and you’ll find loads.

And this is just going to keep that file size small, which is ultimately going to help the performance of your application.

And so now that we’ve got this dynamic image in here, we’ve got a few other settings that we can set here for this homepage, namely centering the image and also making the image as wide as the parent element.

And now that we’ve done that, probably need to change our text here as well.

So I’m just going to give that a white color.

And so this is what we’ve got here as a starting point.

Now in the next lesson, we’re going to update our app aesthetic with our own colors and font so we can really make our application look like our own.