#6 Bubble Makers: If you build an app, build it in style 😎

Hey! Pablo here.

In 2021, this newsletter will be published every two weeks. I want to spend more time building products, and sending one email every other week will allow me to create better content across different platforms. Quality >> Quantity!

As usual, this newsletter issue includes:

  1. One section for Bubble beginners

  2. One section for more experienced Bubble makers

  3. One cool app built with Bubble

  4. One tweet related to Bubble that I found inspiring and helpful.

Feel free to skip to the section you think you’ll enjoy the most.

The Beginners Bubble

When I first started building on Bubble, I loved that I could just drag & drop elements in the blank canvas and have a functional app in hours. However, if you want to build an app with consistent design, there are 2 things I strongly recommend you do before you start:

  1. Go to the Settings page and change the colour palette to match your brand colours.

  2. Create a Styles page to define the colours, buttons, fonts and text sizes of your main elements.

There are various reasons why you should be using styles inside your app:

  • To be consistent in your design.

  • To be able to edit all elements with the same style at once instead of having to go one by one. This is especially important if you have a lot of pages or if you need to work on a project after a long time without touching it, as you won’t remember where all your elements are.

  • Because it makes your app faster. Bubble creates a CSS file with all your different elements’ properties when you load the page. Having styles means this file will be smaller.

“Okay, but what if I have an element that needs to be centred-aligned instead of left-aligned? What if I want the text to be just a bit smaller?”

Fair question. You’ll be tempted to click Remove style and edit it by hand, but I strongly recommend you not to do this. Once you start it’s hard to stop and you’ll end up with a bunch of elements in your app without style, which might make it hard for you to keep a consistent design in the future.

Instead, there are 2 things you can do:

  1. Have different style versions of the same element (H1 centred, H1 left, H1 right), so that you can choose the right one for each use case.

  2. Click the conditional tab of the element you want to change and change it when This URL is not empty. The image below shows a text that has the H1 style but is formatted to blue because the condition always applies (the URL is never empty).

The Makers Bubble

It’s usually a good practice to create a Styles page. That said, you might not need it if you’re using a template.

Templates are an amazing way to kickstart your app without much effort and learn how different elements work in Bubble.

However, it might be more difficult to build with them than without them. Only by having experience using Bubble, you’ll be able to easily tweak them and adapt them to your needs.

If you want to check all templates that are available for Bubble, you can find them here and filter them by category (landing page, marketplace, CRM, etc.)

A few templates I like

Canvas by Airdev
: Incredibly complete. They just released an update that lets you create pages for your Bubble app with a chrome extension. This is by far my most used template and all I can say is that it is worth the learning curve.

Template Preview (click on any of the images once you're in the page)

Template Page

EZ Dashboard: Very complete dashboard with graphs, forms, tables and tab menus.

Template Preview

Template Page

Clean Login Signup: Simple page with signup flows.

Template Preview

Template Page

There are a few other templates I want to try in the future, such as Tasky - Project Management or Headstart Lite. However, learning how to use Canvas has kept me quite busy!

Do you normally use templates? Any good ones that you recommend?

Bubble App of the Week

This week’s app is Rate My Excel, an app created by Lianna Gerrish that helps companies quickly vet candidates' Excel skills with a fully automated testing platform.

After creating an account, the company manager can invite candidates to do an Excel test and review their score reports. Candidates receive an email invite, log into their assessment, answer questions and submit a work sample. 

There’s a free demo in case you want to try it. It might give you some ideas for your own projects. Here’s a GIF that shows the manager interface:

This app shows the power of Bubble when building SaaS. I can see many companies needing a solution similar to this one, to assess candidates’ skills in different fields.

Tweet of the Week

This week I want to share a tweet by Nigel Godfrey. Nigel has been commenting in the Bubble forum since 2016, which is amazing. Not many people were building in Bubble 5 years ago!

He raises an interesting question: Are there performance issues with no-code apps?

I would love to hear your thoughts on this. I haven’t hit many limits myself but I know it’s because of options a and b!

I hope you enjoyed this issue as much as I enjoyed sharing what I’m learning.

If you want to talk a bit more about one of those questions, you can DM me on Twitter or reply to this email. Thanks for reading!