Forum Academy Marketplace Showcase Pricing Features

Bubble Forum Styles App for Everyone to Use (Buttons Added on 8/29)

Hello Everyone! :slight_smile:

I created this public app for people to submit styles of elements, free for the Bubble community to use. The idea of this app is similar to the Forum App, but focused entirely on the design/style of elements in Bubble. If you have styled certain elements and would like to share the design/formatting, you can create a new page in this app with your design. Once you’ve finished your page, you can go to the the ‘submit_your_style’ page, so that your style is included in the homepage repeating group.

*Edit: In order to use the Styles in this app, you can navigate to the Styles tab, right-click on a Style, select ‘Copy Style’ and paste the Style into your Bubble app’s Style list. Hope this helps! :slight_smile:

Preview:

Editor:

13 Likes

Cool idea :slight_smile:

1 Like

Could be cool to package these styles as actual Bubble styles, since we enable copy pasting them now, from app to app.

5 Likes

Ah, right! I missed that was a possibility to right-click and copy a Bubble style. That’s a much better way to do this! Now each element has its own defined Bubble style.

1 Like

Hello Everyone, :slight_smile:

I just finished updating this app a bit. Aside from having Bubble Styles, I added two new sections. One section of the site now displays free design resources. I’ve uploaded some free fonts that I found on Dribbble, but this section is open for anyone to submit icons, graphics, stock photos, etc. as well (basically anything that would be helpful for a Bubbler to have, and is free to use, would be awesome to submit!) :+1:

The other new section is for design tutorials. I’ve added some YouTube tutorials on designing for mobile, typography and creating wireframes which I found to be really helpful. Please feel free to share any of your favorite tutorials/talks here as well. I hope this can be an app for Bubble Styles, but also a place to learn about what to keep in mind about design. Thank you guys for checking out this app!! :blush:

Free Resources:

Design Tutorials:

Preview:

Editor:

8 Likes

Hello Bubblers, :slight_smile:

I just finished creating a new page/set of Bubble Styles called “Stylespace”. This is my attempt at replicating Squarespace’s homepage typography and styling in Bubble. I wanted to create this to have a better understanding of which free typography can be used in Bubble to create a similar, modern design. My intention was not to directly copy or use this as a way to do everything Squarespace does; I just wanted to see how to structure and better understand which fonts to use, what size they should be, how to space things correctly, how to align things correctly, and how to incorporate useful transitions. Every element on this page has a Bubble style and please feel free to use them! Here are some tips I found out by doing this and by watching some videos on typography:

  1. Open Sans is a really great font! :slight_smile: You can’t really go wrong with using Open Sans. (Bubble uses Open Sans and it’s the most popular Google font!)

  2. If something doesn’t feel right about the look of elements in an app, I have found that this is because there isn’t enough spacing between my elements, or the spacing is inconsistent. For example: if I have three elements vertically stacked on each other (1,2,3), then the distance between 1 and 2 should probably be equal to the distance between 2 and 3. The grid, align, ‘distribute vertically’ and ‘distribute horizontally’ help a ton with this. I would also usually place elements too close together, making it difficult to focus attention/read easily.

  3. If you feel stuck as to which colors to choose, try using White, Black (or Dark Grey), Really Light Grey and then one other color. I read that the one color will help readers focus their attention. If you’re using a lot of different colors, Adobe’s Color CC really helps see which colors look best together. Their color selector is amazing.

  4. Aligning type to the left can give the site a ‘modern’ feel. Aligning type to the center can give the site a ‘classic’ feel. (According to this video)

  5. The emojis used in this Forum can be downloaded for free :+1: from EmojiOne in SVG, PNG, and Font formats. I put this in the Styles site under Resources. They require attribution if you are using this for commercial purposes.

And that’s it! If anyone has any advice on typography/design (anything) please feel free to post anything to the Styles site, or to this thread of course. :slight_smile:

Preview of Stylespace:

Preview:

Editor:

11 Likes

Looks great!

1 Like

Thanks so much @potentialthings! :slight_smile:

Nice!

1 Like

Thank you @vega.andrew!! :slight_smile:

This is so good I want to create a new app just to use it.

Can you copy whole styles, or do you have to copy each element ?

Wow! Thank you so much @NigelG! That would be amazing!! :slight_smile: I think the easiest way to do this would be to enter ‘Stylespace’ in the Style tab Search box, and then copy+paste each of the Styles individually into your app’s Style section:

Then copy and paste all of the page’s elements into a blank page on your app? I wasn’t able to ‘select all’, copy+paste the entire page at once, but it did allow me to select multiple elements at one time and paste them.

6 Likes

Great, thanks !

1 Like

Hi, I have a question. In the squarespace style, you have material icon as element type. When I create my app, there’s no material icon element type. How can I add it?

Thanks,
Jon

Nevermind, I found it. Add google material icon… :slight_smile:

1 Like

“Ionic elements” is a nice one to have too! :slight_smile:

@fayewatson

What “button” elements would you suggest using for a Save / Cancel function on a page ?

I have replaced a popup with a group that expands on the the page, but am not sure which of the elements would replace the buttons. I have used the sub-menu buttons but I think they look a little lost there.

Maybe the “Getting Started” buttons ?

Thank you :slight_smile:

How do i change when the floating header will be displayed? I tried playing with the condition but even if I use a lower value its still (start) displaying at the same area? Also, I’ve been playing with the transition to have it enter fading in like in squarespace but i can’t seem to make it work.

How can I make the submenu work?

  1. For each submenu, make a group and put the image, headline, sub-headline copy and get started inside the group?
  2. make a workflow and when clicked, show the group (basically just putting it on top (or in front) of the previous group?
  3. Change the style of the submenu clicked.

Is this correct? Is this optimal? Sorry, new to this…

@NigelG I was thinking about this too! :+1: I’m working on a page of new buttons that should work nicely I think! :slight_smile: Will post as soon as I finish/label the Styles!