Variables and styles

This section covers the different styling properties that can be applied to elements, such as colors, borders, shadows and fonts.

What is styling

Each element that you add to your page has a default styling applied to it. In short, styling refers to what your elements look like, and this is done by changing styling settings:

• Background color or image

• Border

• Shadow

• Font

• Transitions

The settings above open up for a wide range of different looks where to elements that perform exactly the same task can look very different.

These two input element serve the same purpose, but their styles are different. The bottom one seems to hover above the page – an effect often used to draw attention to a particular element.

Each element can be styled individually by opening the Property Editor and making changes to the settings in the Appereance tab:

You can tweak the style settings of each individual element, but Bubble also offers tools to set up stylesheets that you can manage from one place.

Managing styles

But Bubble also has several different tools for efficiently managing and updating the styles of your app's elements. They are split into three different sections:

Color variables: save colors and apply them to elements and styles

The Color Variables feature in the Gloabl tab enables you to establish a palette of colors that you can apply throughout your app. Making changes in a Color variable automatically applies those changes to every style and element connected to that variable.

Article: Color variables

Font variables: save fonts and apply them to elements and styles

The Font Variables feature in the Global tab enables you to establish a collection of fonts that you can apply throughout your app. Making changes in a Font variable automatically applies those changes to every style and element connected to that variable.

Article: Font variables

Styles: save and manage style properties that can be applied to elements

The Styles section in the Global tab provides you with a centralized place to define and manage all of your app's style settings.

Styles create a consistent, visually appealing design for your app while making it easier to update that design in the future. Making changes to a style automatically applies those changes to every element connected to it. Article: Styles