Section 1 (Lesson 9/10): In this lesson, we dive into the concept of reusable elements in Bubble, focusing on the creation of a reusable footer. Emphasizing the DRY (Don't Repeat Yourself) principle, which is fundamental in web development for building efficient and maintainable applications, we explore how Bubble's reusable elements feature can significantly streamline your development process.

In this lesson, you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

In web development you may have come across the acronym DRY: Do not Repeat Yourself. That's the way we should be building and it's far more efficient. We have reusable elements in Bubble that enable this. Let's jump in and have a look.

So in the context of a navigation bar, which you would find on every page basically, or a footer, which, again, you would find on every page, we do not want to be making these from scratch because there's a lot to it. There's responsive design, there are breakpoints, there are design changes depending on whether a user is logged in or logged out, and more. So we want to create this once, configure it once, and iterate on the design in the same location so that all of the changes are made across the app, but from one location. And we are going to be creating our footer in the same way.

So head over to page "index", and then we're going to add a new reusable element, name this "Footer", and then create. So the way to think of this section of the Editor is that this is basically like its own page. Let's bring up the Property Editor. We're going to change the container layout for this one to a Row because we're going to have a design on the left and some link elements on the right.

Let's match the "Default builder width" to the page width, which will always be 1400. Then the "Min height", I'm not too sure, I'm just going to set it to 120, with the point being that it will adapt to the content within it. I'm going to add some padding: 48 top and bottom padding and 32 left and right padding. Notice the left-right consistency with the page padding.

On the Appearance tab, let's make the background color slightly lighter. Let's choose the fourth one across on the bottom, which is called "Surface", just a light grey. Okay, let's first reference the design in the demo app and then we'll come back and get cracking. So we have the logo on the left (and that logo is in your Resources folder). Then we have some link elements on the right, distributed as a row.

So I'm going to grab an Image element and draw it in our Reusable footer element in any shape. I'm then going to statically upload the logo from the picture in the resources folder. Now, I'm choosing the primary color, slightly darker. Then I'm going to go to the Layout tab and I'm going to change the width to 40 pixels. Then I'm going to check the box that says "Keep element aspect ratio fixed". Okay. One to one ratio. Nice and square.

Now we can grab some text. I'm just going to drop the Text element into the reusable element and type "Workplace". Now, I could have uploaded a logo with a logo mark together as an image, and that's absolutely fine. But, for this exercise, we're just using a Text element.

Okay, I'm going to choose "Body Large" for the Style Attribute and I'm going to change the Font color. And I can actually see that there are some of my custom colors that have been broken, so this is a good exercise to show you how to fix them. Head over to the Styles tab and then go to "Body Large". You can see it says "Custom color (MISSING)" next to Font color. So just change that to this black color. Okay. Body Large, Body Medium, Body Small. Let's have a look at Heading. Yeah, those are all fine.

Okay, now back in the Design tab, you can see that the Text element shape isn't quite right. So I'm going to go back to the Layout tab and I'm going to uncheck "Make this element fixed-width", and I'm going to remove "Min width". You can see that the Flexbox system is kicking in here - literally kicking the logo all the way to the right-hand side. This is a good thing, but we have control here. So I'm going to check "Fit width to content", and then I'm going to set the "Min height" to zero. Lastly, on the vertical alignment, I'm going to choose center. Now I want the logo first, the text second, so I'm going to select "Next" under "Vertical alignment". Great.

Now we need to group them together because if we don't group them, it's going to be difficult to work with. These basically work as a set. So with the "Workplace" text highlighted, I'm going to hold shift and select the logo as well. Then, right-click and press "Group elements in" --> "Row container", so they remain next to each other. Change this group's name to "Group Logo", or "Group Brand" would be better because the logo, I guess, is the blue box. Apply some gap spacing just a little bit by checking "Apply gap spacing between elements", and let's choose about 8 pixels on the "Column gap (px)" (we don't need Row spacing, just need column.) And then I'm going to choose "Fit width to content". Voila. Sitting nice and neat on the left-hand side.

So now we need some Link elements, and we're going to choose "Legal", "Contact us", "Twitter", and "Facebook". Okay, so let's go do that. Let's grab a Link element and type "Legal". We're going to scroll down to "Style Attribute" and click "Detach style" so we can set up a new one. So I'm going to change it to 16 pixels and I'm going to change the color to this black color. And we are actually going to come back and update some of these color styles, but for now we're just practicing. Make sure that "Center the text vertically" is checked. On the Layout tab, I'm going to remove "Make this element fixed-width", set the "Min width" to zero, check "Fit width to content", and set "Min height" to zero. Then, I'm going to vertically align in the center, and the last thing I'm going to do is navigate to the Appearance tab and change the font to be "500 (Medium)" instead of "400 (Regular)".

Now, we can simply copy and paste three times! So copy paste, copy paste, copy paste. And let's just get the four Links next to each other, so click back on the left-hand side to the first Link, go to the Layout tab, and click "Make last".

Now, before we name these, I'm going to put them in their own group, because ultimately, if we want the left-right design, well, the brand needs to be one group on the left and then these links need their own parent group as well. Then ultimately, if we are talking about the footer in relation to the actual reusable element, then we just have two elements -"Group Brand" and "Group Links" - and then we have elements within those groups as well.

I'm going to highlight each of these Link elements and right-click and press "Group elements in" --> "Row container". Then, I'm going to rename this to "Group Links". Then, we're going to check "Apply gap spacing between elements", and this time set the "Column gap (px)" to 20. Then, we're going to check "Fit width to content".

Now we want these on the right-hand side, so if I click back on the Footer, notice we're using a container layout of Row. That's what we want. If we chose center for container alignment, it would put both Groups in the center. Remember now we've got one parent Group on the left and one parent Group on the right. But instead, I'm going to click back

on the Footer and I'm going to choose "Space between", which is the rightmost option for "Container alignment". What this does is puts it perfectly left and right.

Okay, so we have "Legal", now I'm going to rename the next Link to be "About", then I'm going to say "Facebook", and then I'm going to say "Twitter", but now I guess it's called "X", so let's say "X.com". (By the way, you can actually find me on X if you want to chat:

I am @_gregoryjohn!)

Okay, looking good. Now we will get to how we link between pages. It's very straightforward. Once we have the pages to link to, we will choose from the dropdown next to "Link destination" in the Appearance tab of a Link element, and make a selection. We only have three pages at the moment, and these are all built-in pages by Bubble. Please don't delete these pages, we actually need all of them. But we'll come back and finish this off later.

Okay. Pretty happy with that. So, we're currently in the reusable Footer. How do we get this reusable onto the page? Very straightforward. Let's click back to page "index" and scroll down. We've created more space down here. Now, on the UI Builder, I'm going to scroll down to the bottom. Under "Input forms" we have our reusable elements! Whenever we create reusable elements they will be seeded down here and you will be able to drop them on any page that you're on.

Now, I'm going to click once and then I'm going to click on the page. Notice where the blue line is underneath - not inside, but underneath - the social proof section. Click, and it put it slightly above, then we can just go to the Layout tab and choose "Make last."

Because this Footer is the last element we're creating on this page in terms of hierarchy, we can now click back on the index page's Property Editor --> Layout tab and actually just remove the min height altogether. So the height of the page will be dictated by the last element here. So if I set this value equal to zero, that doesn't mean that the page height is now zero, it means that it's just fitting height to the content of the page.

Let's preview this page. Okay, looking really good. There's one more change I'd like to make before the break, and that is I want to actually set a "Max width" on the Footer because I find that these two elements should be slightly more centered. I want a max width of 1200, and currently, there is no max width set. So obviously we want the grey bar to extend all the way across always, but now we're going to add another group called a Group Container to just contain the Max width for better UX. We'll be able to make sure that we don't have to scroll all the way across to the side or the left to get to where we want to click the links, since it will be more centered, which is better. So let's do this.

So double-click your Footer on the index page. On the Appearance tab of the Property Editor, you can now choose "Edit element". We need to do this to go to the Reusable element page. So now we're going to highlight "Group Brand" and we're going to hold down shift and highlight "Group Links". We're going to right click and choose "Group elements in" --> a "Row container". Fantastic.

Bring up the Property Editor and rename this to "Group Container." On the Layout tab we're going to go down to "Max width" and choose 1200. Okay? And then for "Container alignment", we're going to choose "Space between" (the last option). And finally, back on the group Footer, I'm now going to choose "Container alignment" to be in the center, instead "Space between", because now there is just one group child element in relation to the parent, which is the Footer itself. So this is centering the new Group Container. Okay, there's just one container, and within the container, there's a group on the left, "Group Brand", and on the right there is "Group Links", which is why we're using "Space between" in the Group Container.

So let's preview that change. And there we go. Much better. Now I don't have to move my mouse too far to be able to access these links. Okay, that's it for the Footer! That's how we build in a more modular approach. These reusable elements will also contain workflows in the future, so we'll be combining a lot of work and effort into one place and then editing from that one place and dropping it onto any page that we like.

I'll see you in next lesson for the navbar.