maybe about using styles? updated Styles?
also, how do you organize styles? Do you make styles before making an app? Is it okay not to use styles and just set font, size, color, etc. for each element? A guide for styling would be nice. 
This is awesome @renatoasse! Thanks so much for sharing.
1 Like
Hey @shu.teopengco,
Iāts a great idea. Iām developing a Bubble Full Course and Styling/Design Best Practices will surely be one of the classes. Thank you for the feedback.
But, to sum it up:
I always pay attention not to waste too much time designing elements, because it sure can take a loooooot of time.
So I always begin designing a new app with just a few styles:
- 3 Text Styles
- Header - eg. Montserrat (800), color #434343, size 32
- Subheader - eg. Montserrat (500), color #434343, size 18
- Body - eg: Nunito Sans (regular), color #434343, size 14
- Oh, and some text tips:
- Donāt ever use a font smaller than 14px, it will be unreadable on mobile devices.
- Try to go for grayish colors (#393939, #434343, something like that), not full black (like #000000). It looks better.
- Use no more than 2 different fonts. If in doubt, search google for āGoogle Fonts combinationsā. More than 2 fonts will usually look confusing and amateurish.
- 2 Black & White Button Elements
- An outlined button, 45px height, text #434343 Nunito Sans (600) 14px, border 1 width color #434343, roundness 5, for cancelling actions, closing popups, and actions that arenāt definitive.
- A filled button, 45px height, text #ffffff, background #434343, border 0, roundness 5, for definitive actions, confirmations, deletion, and more important tasks overall.
- Button Tips:
- I honestly donāt use the āButtonā Element, because I canāt insert Font Awesome Icons in buttons (with ā[fa]ā tags). So I use the Text Element. The only drawback I have noticed so far is: when Iām setting up Facebook Pixel in my app, it doesnāt read the Text Element as a Button. So, for actions that I want Facebook to understand as conversions, I have to use the āButtonā.
- Donāt ever make a button with less than 44px height. It is the minimum recommended height by both Google Material Design and Apple Human Interface Guidelines for mobile, as Itās the minimum size as the human finger tip. If you make a button smaller than that, maybe your user will have problems pressing it on a mobile device.
- Inputs, 1 style for each type (Input, Multiline, Dropdown, etc.)
- I setup my inputs as plain as possible, with a regular 45px height, 1px border, regular text. And I setup all inputs exactly the same way, so I can have a plain form.
Thatās about it, @shu.teopengco.
When I began using those black & white styles I became much faster developing apps, as I donāt waste much time worrying initially about design and UI.
When I finish building the app, however, thatās when I start adding colors and customizing overall UI.
Hope I could help.
7 Likes
Wow. Thatās great. Thank you for the tips. Helps a lot. 
Iām in the middle of creating an app and thinking whether to fix my layout/deisgn first based on your guide or to fix those after the core features were made. 
Hi @renatoasse, Thanks for the post!
I tried to open it in the bubble editor, but it seems now to be a private app.
Thanks !
6 Likes
Ditto for the simplicity aspect when building an app. I spent wayyyy too long fiddling with design when first starting out (Iām talking weeks), only to change again and againā¦ My design is now pretty inline with yours - simple inputs, 45px high etc.
2 Likes
Thanks !!!
As of May 4, clicking the link gives me:
Your browser was unable to load some necessary resources, contact your IT network administrator and ask him or her to allow access to
dhtiece9044ep.cloudfront.net
dd7tel2830j4w.cloudfront.net/
d1muf25xaso8hp.cloudfront.netHey @eric1,
Working fine here.
This seems like a temporary error message that happens sometimes on Bubbleās CDN.
Could you try again ?
it works! Thank you 
Very kind of you to build and share these! Iām pretty new to bubble, so Iām trying to figure out the best way to make use of these elements. If I open your index page, select all, then paste into my index page of my bubble app, it puts everything into a huge jumble, with 153 page errors.
Perhaps somebody with more bubble experience would kindly explain, in basic terms, what the best practice might be with regards to how to create your bubble toolkit? Specifically, how to take all these elements and put them into your palate for re-use in your next project.
Hopefully, Iām making senseā¦
Thanks all!
1 Like
Thanks so much @renatoasse i have been looking for best practices and yours come out really perfect.
Hi kurt, I can help you through a fast meeting by zoom to explain you, because writing here each thing will be very long.
1 Like
Could you record it? Iād be interested as wellā¦ 
Sure, if you want you can assist to the zoom too and we can record it. Iām not super pro in bubble but I can share what I know.
Hey Renato!
Thanks for all the values you are sharing for free.
Iām subscribed to your YouTube channel and watching it with āauto-translateā
Is there a chance that you will post the video about the Facebook pixel integration?
Iām quite a beginner (just 5 months ago heard about Bubble for the first time), and Iām really struggling with setting it up on my Bubble app.
It seems like a very important but not well-covered topic.
Best
George
P.S. here is the app I built and just released https://makeitly.com
Or can you just share here a steps which should be done?
#1ā¦ bla bla bla
#2ā¦ bla bla bla
ā¦
#8ā¦ bla bla bla
Thanks in advance
Hey @gs1,
My suggestion:
- Create a Google Tag Manager account
- Install Facebook Pixel on your Google Tag Manager (look it up on Google if you donāt know how to do it)
- Use āGoogle Tag Managerā plugin on your Bubble App, and just insert your Tag Manager Container ID
1 Like
Wow! Thank you for the fast reply.
That will fire the pixel when certain pages are visited.
But what about āconversionā tracking? I saw you mentioned buttonās click or conversions tracking by inserting JS into WF
.
Can you suggest how to do that?
Letās say I have a āStripe Subscribeā event in my WF, I want to add some JS after that step to track conversion. Any idea on how that can be implemented?
