Layouts and Styles

In the previous chapter, you learned how to plan and organize your app before building it. In this chapter, we are going to continue learning how to use Bubble, but this time, we will dive deeper into the layout and style options by exploring the Styles tab. You will learn the essentials to be able to change elements to your desired taste, choose colors and typography, and change all the little aspects of a component to be able to make your app look beautifully designed and aligned with your brand style and guidelines.

By adapting the design of your components and the layout structure, you can make your application look and feel more appealing to the users, creating an overall nicer user experience that can delight and engage visitors.

In this chapter, you will learn about the following topics:

• How to create layouts and main settings
• Layout customization options
• Design customization options
• Styling elements on the Styles tab

How to create layouts and main settings

Layouts are the foundation of any application. Your pages need a layout, even if it is a simple one, so it is very important to understand how layouts work inside Bubble, how to build one, and all the available settings that will allow you to build the perfect layout:

Figure 5.1: Layout structure

Layouts are built inside pages, so to build a layout, you need to start by adding container components to the page. As mentioned in previous chapters, containers are the components that will create the structure of your page and hold multiple components contained in a specific location. It’s like building a house – the containers are the walls in that they hold everything together. Think of layouts as squared boxes that form a structure that will hold your components.

The most used component to build a page layout is the group element, which is available under the Containers category of your UI Builder sidebar...

Layout customization options

Besides configuring how a component will behave in terms of layout structure, you can also define how it will look. This is important because we want to create functional applications that have a nice visual that appeals to our users.

To style any component inside Bubble, you can click on an existing element on the page and locate the Appearance tab of the property editor. Each component allows you to change slightly different settings, but most of them have pretty much the same options, such as background style, opacity, border style, and shadow style. Some other components allow you to select fonts, colors, and more.

Since we are talking about containers, it is common that we are more interested in defining the design of backgrounds, borders, and more. Once we click on a component, we can easily find all these available options. We can define these styles independently for each container component on the page or we can use a predefined style, which...

Styling elements on the Styles tab

Bubble has a very cool area dedicated to managing the settings of your UI components under the Styles tab. It is very useful because you can organize and define how your components will look like and have styles applied to all the components that are using the same style across your entire application. If you are a designer, think of it as a design system. Having a place where you can centralize your component styles is great because you will be able to maintain consistency across your entire application, meaning the components will look the same and be standardized, preventing the user from getting confused about what a component does and how it works while also making sure your brand guidelines are followed accordingly. It is also very easy to maintain since you can change things once and these changes will be replicated throughout your entire application where components are using the same style.

There are two main tabs under the Styles tab...

Summary

Layouts are the foundation of any page, and styles can give life to your projects. Mastering both areas inside Bubble is the recipe for a successful project that considers the best design and user experience techniques, making it a pleasant experience for the users navigating your product.

In this chapter, you learned valuable lessons and techniques and how to play with the most important areas of the Bubble editor so that you can configure your layouts. You also learned about grids and how every setting can expose new options for you to define your groups and other elements exactly the way you want, giving you the flexibility to build pretty much anything with no code visually. You also learned how to style elements, where to locate the settings you need to customize every component available, create new styles, edit and manage them, and how you can create and use variables that connect with styles to help you save time and stay more organized and consistent while designing...