If you’ve been involved in the Bubble.io world you know they’ve recently made a new design engine available to everyone.
Finally.
It’s something they’ve been working on for YEARS.
But they still consider it beta.
Regardless, we started to work with it (along with many other thousands of users).
Our initial impressions is that we’ll have to unlearn some things, learn a bunch of new things and avoid some other things altogether.
Unlearn: Liberal Use of Groups
In the legacy design engine, we had to constantly place stuff in groups. In this new engine, you don’t need as many. Nested groups hell is a thing of the past for most layouts.
Learn: Flexbox
Since the new engine hews closely to the CSS Flexbox standard, you should understand how that works.
If you’re old school and like to read physical books, pick up O’Reilly’s CSS THE DEFINITIVE GUIDE (Eric A. Meyer & Estelle Weyl), 4th Edition. Read the FLEXBOX section.
Missing: CSS Grid
We really wished they had incorporated the CSS GRID standard. We’ll have to write our own CSS to try to implement that where needed.
Missing: Padding
This is such an odd thing to have left out. So you end up having to use margins in awkward ways….
Don’t: Let Bubble Automatically Convert Existing Pages
You can turn on the new responsive engine on existing pages. But don’t use the option for converting the existing elements to the new engine.
The reason is that it is extremely hard to reflow things in the new engine. The conversion process adds a ton of additional elements that need to be removed. It is far faster to do things yourself rather than undo what Bubble does.