Free Bubble UI Kit

[shu.teopengco]

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.

[MattN]

This is awesome @renatoasse! Thanks so much for sharing.

[renatoasse]

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.

[shu.teopengco]

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.

[juancamilovasquezard]

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 !

[renatoasse]

Hey @juancamilovasquezard,

I’ve changed the link, here it goes:

Bubble Editor - Semcodar-kitcomponentes

Cheers!

[mattb]

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.

[juancamilovasquezard]

Thanks !!!

[eric1]

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.net

[renatoasse]

Hey @eric1,

Working fine here.
This seems like a temporary error message that happens sometimes on Bubble’s CDN.

Could you try again ?

[eric1]

it works! Thank you

[kurt2]

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!

[ahanviv]

Thanks so much @renatoasse i have been looking for best practices and yours come out really perfect.

[juancamilovasquezard]

Hi kurt, I can help you through a fast meeting by zoom to explain you, because writing here each thing will be very long.

[ron3]

Could you record it? I’d be interested as well…

[juancamilovasquezard]

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.

[gs1]

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

[gs1]

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

[renatoasse]

Hey @gs1,

My suggestion:

1. Create a Google Tag Manager account
2. Install Facebook Pixel on your Google Tag Manager (look it up on Google if you don’t know how to do it)
3. Use “Google Tag Manager” plugin on your Bubble App, and just insert your Tag Manager Container ID

[gs1]

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

@renatoasse

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”

.
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?