[openBase] Template to Kickstart your App Development

[vincent56]

At Ideable*, we have been building products with Bubble for over 4 years. In those four years, we developed a standardized process for building apps. This process helps us work on projects interchangeably, work more efficiently, consistently and faster. It also makes building more fun as it skips the boring stuff!

Over endless iterations, we created openBase. The starting point for every app that comes with all the functionality an app needs and a unique responsive grid with the sizing system we use for openBuild. It is fully compatible with all openBuild UI components.

Now, we provide it as a Bubble template for the no-code community. ‌

openBase comes in two flavors:

openBase Framework‌

This is a free template to get you started with openBuild. The layouts are all responsive and have the same size system as the components from openBuild. See this as the bare bones framework with some nice extras.
‌

• ‌4 App Layouts
  
  
• Responsive grid compatible with openBuild
  
• openBuild styles
• Useful option sets
• Free reusable elements

Get the template

openBase Pro‌

This template has everything you need to build beautiful responsive, clean and scalable apps. it has just the right amount of workflows to make your development easier without constraining you too much. It has everything in the Starter template plus;

• Navigation with workflows
• Menus with workflows (also mobile menus)
• Headers & Footers
• Message & Action popup with workflows
• Login & Sign up
• Transactional email
• User Settings & Profile
• Admin panel
• Reusable elements

We are working on getting Pro ready for the template market

What is great about these templates is that you get all the openBuild styles. So when you make changes to those styles (adapt them to one of your existing apps for example), you instantly have a library of 300+ UI components styled for your app.

[jaguarconsultoriadig]

Hi.

Why is the standard of responsiveness 350, and we still have many cell phones with 320?

In this case, do I have to change the responsiveness?

thankful

[thecashbag]

Did you decide to release the OpenBase Pro version for free?

Because I see that the OpenBase Free template now offers all the stuff you listed here as reserved for the Pro version.

If you are still releasing another OpenBase Pro version, what is the expected ETA and price?

P.S. I really like what you’re doing with OpenBuild UI library Releasing a fully featured free OpenBase template is a great way to get people into the OpenBuild ecosystem.

[vincent56]

We have soft launched the template as we are updating and completing the documentation. But yes, it’s free. It’s a separate product from openBuild but the template and default openBuild components are fully compatible.

Anyone can use openBuild to store their own assets in whatever size and some cool things are in the works for it!

[thecashbag]

Cool!

Just a heads up…

I installed your template before installing the Chrome extension. Then I had a hard time figuring out why the template had a bunch of stuff missing that the description and docs said it included. So I deleted it and re-installed, but this time I had the Chrome extension active while installing. After that everything was working fine in the template.

I’m not sure if you need to have the chrome extension running for the template to load fully. If that is the case, you should be make it very clear and stupidly obvious in the template description on Bubble and also in your docs. Like big red writing haha.

The other reason it could be working now is because I got the trimmed down version last week, and just now snagged the updated fully fledged “soft launch” version with everything included.

[vincent56]

I think its the last comment. The template is supposed to be a completely independent product from openBuild so there is no content that magically appears after installing the extension.

Maybe indeed there was something with the previous version which was simply the framework. Let me know if there is any other issue!

[thecashbag]

Good to know

I have been playing around with the OpenBase theme, and while editing things I managed to mess up the header in the base-menu page.

The User Group (e.g. the round profile picture) no longer hides itself on mobile screen sizes. So it displays on top of the mobile hamburger menu icon.

I have been looking at a copy of the original theme to try and fix my problem, but I can’t figure how you’re hiding the User Group on small screens. There’s no related workflow or conditional used to hide it on small screens.

Can you tell me how you are hiding the User Group on small screens, so that I can fix my header?

[vincent56]

The header is one of the most complex elements on the page because there are a bunch of conditionals at play at the same time. We want to show the avatar when there is one and the first letter capitalized when there is no avatar if the user is logged in.

At the same time we want to hide that completely when the user is not logged in. And finally we need to hide that too when the width of the page is less than 800px. This means we cannot use the ‘user is logged’ in statement to do this. In this case, we solved it with the element hierarchy. Meaning the Hamburger Group sits at the front of the elements overlapping the other groups below.

[thecashbag]

A-ha! Makes sense now. Thanks

[thecashbag]

EDIT: I solved one of the big problems. So I edited this post. Only one smaller problem left!

There is another problem I’ve been trying to solve for two days now, with little luck.

I think maybe it’s due to a quirk with the OpenBase template of which I’m unaware. Hopefully you can tell me what’s going on.

I’m trying to add an autocomplete search box in the base-menu page header.

As shown below, I’ve added an input in the header with workflows that show the focus group when the input is clicked. This setup is very similar to what when you have done with the Avatar Group and Profile Menu in the base-menu page.

The problem is that when the group that contains the input has a fixed width the entire header displays wrong.

The input gets floated to the right, pushing down the login and avatar elements in the process. This only happens on screens smaller than 1380px (which is most of them).

In case it helps, I’ve also pushed a live version of the site you can see here: https://pineapple-profit-beta.bubbleapps.io/. And here is a screenshot of the element tree incase that also helps:

Hoping you know what’s going on If there is anything I can provide to helps figure out what’s going on please let me know!

[vincent56]

Hi! Putting stuff in the header that needs to be responsive is pretty tricky indeed and not exclusively an openBase issue

The answer would probably lie somewhere in the resonsive settings for everything in the header group and is not something I can fix from looking at the screenshot.

We actually have a reusable element that is a search box with a focus group repeating group for this use case. It’s now in openBuild downloadable as a reusable element.
The height is taller than the header, but when you put it in the header and adjust the height of the reusable to just show the input, everything will look good regardless. However, responsive issues remain to be solved whenever you put something new in the header unfortunately.

[thecashbag]

Alight I’m in I just signed up for a paid plan of OpenBuild

[destryhunt.dh]

What types of problems can I expect if I install this template on a one page app nearing completion? Will it disrupt the current functionality?

[destryhunt.dh]

Disregard, I can see now that it is not possible to add a template to an existing app. I’ll just borrow some of your concepts

[yorgio1024]

You can copy to your app

[destryhunt.dh]

It took me two days to copy it to my app and resolve all the errors. Ouch. I wish there was an easier way.

[vincent56]

Out of curiosity, what have you been trying to achieve? Copy your existing app in the openBase template?

[destryhunt.dh]

I am trying to turn something I made into a single page app. I have developed the essential functionality of an app without any appealing UI. My plan was to leave UI for last. I realized that I probably should have developed the essential functionality of my app after setting up the structure of the UI I intended to use, but I was unaware of the existence of Openbase at that time and figured I would just learn how to create the UI when the time came.

There are SO many workflows comprising the essential functionality of my app that I decided it would be too difficult to migrate it into an OpenBase template. Thus, I migrated the base-mobile page (of the OpenBase template), with all of its states and workflows, into my existing app in order to bootstrap the UI development. The process was time consuming, but I finally accomplished the goal. I have combined the base-mobile page and my app onto a single bubble page, thereby getting me one step closer to my single page app.

The base-mobile portion of my single page app comprises the top half of the Bubble page, and the my previously developed app comprises the bottom half. Now I have to learn more about the many moving parts of the base-mobile groups so that I can determine what to keep and what to get rid of. Then, hopefully, I will be able to better figure out how to connect the groups belonging to the previously developed app to what remains of the base-mobile groups.

I’m not sure if my explanation is confusing, so hit me up with questions.

[vincent56]

Sounds good. And indeed this is the big advantage and disadvantage of Bubble: as you build, you design. It means you can go really fast but it also means you can set yourself up for a lot of extra work if you haven’t done anything to the UI or layout structure but just built out your workflows.

As everything is so connected, you have experienced the difficulty of having to do the UI before the UX/workflows. This is why a starter template/framework like openBuild is so powerful. Especially when combined with the UI components from the openBuild extension/library.

This is in a nutshell how we develop an app from scratch using openBase. First we decide the layout of the app. For this we have a choice between a full menu left, a ribbon menu left, a top menu or a mobile first/only layout.

1. Choosing the right layout for your app

For apps with a lot of menu items or not a lot of real estate to work with, we choose the full left menu. Stripe is a good example of the need for such a menu. They have complex menu items that do not lend themselves well to icons.

For apps that need a lot of screen real estate or have a fairly straightforward menu list, we choose the ribbon menu layout. Bubble is a good example of such a layout. It’s important to maximize the screen width and the menu items are clear enough to understand from just looking at the icons so the ribbon menu makes sense.

If we build a marketplace app or something leaning more towards a website, we select the top menu layout. Airbnd is a good example of an app with a top menu layout. This landing page style app (or part of) would look weird with a left menu.

For mobile first applications, we have a mobile layout.

2. Creating your app pages or sections
After you picked your layout, you can start building the sections or pages that make up your app. We tend to go with a single page app using groups (sections) for pages. You can read more about the differences between single page app and multiple pages here.

Without going too deep, apps use in most cases variations of just two screens: A ‘list view’ screen and a ‘detail view’ screen. Take Airbnb. You browse the listings from their landing or search page. You click a listing and come into the detail view.

List view. You click a listing and go to the detail view.

Detail view with specific data related to this listing.

3. Creating the UI for your sections/pages
After deciding your layout, your type of screens, what about the parts making up a page or section? Again this is where openBase is pretty great . We created a responsive framework consisting of different sizes. We believe those sizes can create 90% of app designs.

Here you can see how you can combine the sizes to make a section/page layout.

S - 350px
M - 535px
L - 720px
XL - 1090px

So, in the example of the Airbnb detail page, you can create that simply in openBase using:

XL Section - for the image gallery
L-S Section for the Listing details on the left and Booking form on the right side.

Hope this helps you or perhaps others trying openBase!

[destryhunt.dh]

Thank you for the detailed response. I will bookmark it and reference it multiple times, I’m sure. I am impressed with the tools you have developed and made available. Just based on what you already provide for free, the excellent documentation, and the freely shared tricks of the trade (like this description of the steps you follow in developing), I’m hooked. Truly amazing, even if I realized late and had a painful migration as a result. I would love to see how others are using the tools (tutorials, etc). I will stay tuned.