Organizing styles?

Just want to ask question about styles. How do you make styles? Do you have organizing tips for style?

Do you use styles on every element? If so, do you make styles before making an app or midway on creating an app?

You should create a styleguide and design as many screens as possible before you start working with bubble. This will ensure your app will look and feel cohesive.

1 Like

I agree with @shu.teopengco, a page with all styles really helps. People will have there own organisation, however I like to do a few things to keep my all organised. I append all main styles with “Prime” and “Prime Alt” respectively. I use Prime on white backgrounds and Alt on non-white backgrounds, and for elements needing less emphasis than Prime. So that would be “input Prime”, “Label Prime”, “Button Prime”, and then “Input Alt”, “Button Alt” etc.

Appending elements in this way allows me to easily search for styles on the styles page, and easily configure them, allowing me to keep inputs, dropdowns etc. uniform.

1 Like

Thanks for the tip. I made a mistake starting with bubble without styles. Now when I want to edit a font, I still need to edit more elements compared to just edit a style.

More tips on how to create styles will be useful. Or maybe steps to have better organizer styles? :grin:

I did that too, and then realised everything becomes out of control fast. Apply a style to everything means that you just need to change it in a single place. Style guides are handy as you can layout minimum height and width for elements such as inputs, plus see how they look on different backgrounds etc.

I think styling is a very personable thing, so creating an organisation guide may be difficult.

Keeping everything in styles also optimises load speed.