Section 1 (Lesson 5/10): Professional applications stand out thanks to their consistent and coherent design. This tutorial focuses on the critical role styles play in helping you achieve that level of professionalism. We dive into the nuances of creating a unified design language by using elements, spacing systems, and interactive components like button hovers.

In this video, you'll learn about:

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

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

So if you look at any professional app, you'll see a very, very consistent design. That is, in terms of the elements they've used, the spacing system they have, the interactions, such as the button hovers. We'll be doing the same at Workplace because we want to become professional developers and styles cannot be overlooked.

Okay, let's jump in and see what's available to us. So I'm going to click on the Styles tab and we can see under Element styles, we have exactly that: all of the elements available to us.

Go down and open up the "Button" folder and then click on the "Primary Button". You can see that Bubble has already set up a style for us. Currently, the text is set to "Open Sans". Now, if it's not set to "Inter", what I'd like you to do please is head across to the "Style variables" tab and then on the dropdown choose "Inter". Inter is a lovely font used by many tech companies, super clean, and we're using it throughout this course. So this is basically the default area where whenever there is a style, Bubble will attach "Inter" as a font, if that style has a font.

Let's head back to the Element styles. So let's look at the attributes of this button. What can be applied from a style perspective? So we've now set a default app font of "Inter" and Bubble has updated it here. Perfect.

We also have the weight of the text. So if I change this to Regular, you can see that the weighting of the text has changed. Let me zoom in here so we can see exactly what we're working with. I'm actually going to set this to a Medium. Let's change the size to 16, that is, the text size. Alignment is currently in the center, that's what we're after. We can also bold it, italicize, and underline it if we like.

The color of the font needs to have a great contrast, so we do need white here. We're not going to be using these particular options, but it's the background flat color that is currently set to Primary to match the purpose of the button. Let's change the Roundness to 8 and let's remove the Outset, which we won't be using in this course.

Now there are other attributes that we can assign to this button, such as the Layout. Padding looks great to me. 8, 8, top, bottom, 16, 16, left and right. And we also have a Conditionals tab which we'll get to soon, which enables us to control some of the interactive components of this button, such as what happens when the button is hovered. In this instance we'll be changing it to a darker color.

We don't actually know what the overall look and feel when we first start building would be, but by using styles from the very beginning, we can then change our minds later on and populate styles throughout the app. This button we've just styled might be used in 100 locations as you build out your app, okay, not in this course, but in a realistic application build, we don't want to have to go through all of those pages individually changing that button, we want to do it from the central location. This is why styles are very important. And throughout the course, whenever we introduce a new element or a new input form to our user interface, we will be then adjusting the style to make sure that it's uniform.

So these are all of the styles available to us. We've got Dropdowns, File Uploaders - both of which we'll be using -, Groups, Images, Popups, Text, Repeating Groups. We'll be using styles as much as possible.

Please click across to the "Style variables" tab. So we've set our app text as "Inter", but I'd also like to set the particular colors that I've chosen for our application. So feel free to copy and paste these colors across from my demo app (the link is above). Keep it open in the same tab, in the same browser, you can just open that particular app, go to the styles tab, copy and paste the color into your new app.

So here I am in the colors in the demo app and I'm just going to highlight this color and command C on my keypad. I'm going to come over here and paste it in (command V). Okay, I'd like you to do the same for all of these other colors. And I'm just going to speed up this section so we can move on.

Okay, so you've copied across all the colors and let's just have a look to see how we would attach these colors to our styles. So on the "Element styles" tab, you can see that the button color, the blue has slightly changed away from the Bubble blue to the particular brand of this app that we're building. If we bring up, for instance, a Text element, open the Text container, click on Heading 1. You can see that our text has now changed to #171717.

Okay, so the last thing we need to do is just update our Text styles which we'll be

using throughout the app and needs to be consistent. So we'll do the same thing. We're going to pop into my particular app, we're going to copy a style and then we're going to paste it into this app that we're building.

So I'm in the demo app. I'm going to scroll down to "Heading 1". I'm going to right click copy. I'm going to tab back into my current app I'm building. Here I am and I'm going to right click paste just on top of this "Heading 1". And you can see it's named it "Heading 1 copy". Before we rename "Heading 1 copy", go to your oldest style and just click on the bin icon and then choose "OK." Now we can go back and we can just rename this by double-clicking on it: "Heading 1." I'd like you to please repeat this process for Headings 1, 2, and 3 as well as the Body.

Okay, when you get to Body, there are three body styles I'd like you to copy across. We have "Body Medium", "Body Large", and "Body Small". So you can delete the existing Body from your app and then copy across these three body texts and then we're done.

Okay. And after you've done that you can click on "Body Medium" and set it as the default, which I've currently done. By the way, you can also change the naming of these styles just by double clicking on the text itself.

Okay guys, that's all we're going to deal with styles for now. The styles will develop as the build develops.

I'll see you in the next lesson.