Bubble Docs

Using Styles

Bubble lets you define some general styles for your elements. Each new application you start comes with a set of preset styles. This will let you organize your app design in a better way, as you'll just need to modify the style once for all the elements to be restyled accordingly. This also saves some space in your app, and will lead to faster loads as the styling data is shared by all elements that use the a similar style.

Defining Styles

The Styles tab is where you edit the different styles that your app has. Editing styles is very similar to editing elements, you use the Property Editor to change the styling properties.
You can build some conditions on styles, but only for basic states, that is to say conditions that are about built-in, simple interactions with the element (hovered, focused, etc.) For instance, conditions using data, or properties on the user, will not qualify as basic.
You can define as many styles as you want. Styles are applied to one type of element, for instance Buttons, but you can have more than one style for Button. Try to name them in a way is easy to read, as you'll have to pick the style that you need for each button. You can also specify which style should be used by default when you insert a new element in this tab.
You can create a from the Style tab by clicking on 'New Style', or from an element itself. When you do so from an element, the current properties of the element will be used as a base for the newly created style. This is particularly useful when you find yourself using the same design for a few elements, but haven't thought about creating a style yet. Please note that when creating your own Styles, specialized labels such as H1 for headers cannot be used.

Applying & removing styles

When you apply a style to an element, its current properties that are included in the style will be deleted. On the other hand, when you remove a style from an element, the original properties of the style will be copied to the element. So effectively, when you remove a style from a button, the button's appearance won't change at first, so that you can modify the appearance. You can always undo such changes.

Conflicts between conditions

You can overwrite a condition that is included in a style at the element level; between a style's condition and an element's condition, if the same property is modified, the condition at the element level will win.

Using Themes

Bubble offers some themes to help you find a visual identity for your app. As a new apps comes with a set of predefined styles, applying a theme to your app will overwrite these styles with different colors, angles, etc. Bubble already has themes inspired by various popular design libraries such as Bootstrap and Material Design. Note that when you apply a theme, the styles you have added to your app will not be modified.