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!
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.
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!)
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!!
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:
Open Sans is a really great font! You canât really go wrong with using Open Sans. (Bubble uses Open Sans and itâs the most popular Google font!)
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.
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.
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)
The emojis used in this Forum can be downloaded for free 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.
Wow! Thank you so much @NigelG! That would be amazing!! 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.
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?
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.
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.
@NigelG I was thinking about this too! Iâm working on a page of new buttons that should work nicely I think! Will post as soon as I finish/label the Styles!
Iâm working on a page of new buttons that should work nicely I think!