Good morning everyone!
Everyone here at Bubble is very excited to announce that the new Responsive Engine Beta is now live!
About a year ago to date, we set out to re-think how responsive apps are built in Bubble. Our goal was to empower our users to build more beautiful apps by providing a faster and more powerful way to build responsively in Bubble. Whereas the existing Responsive Engine tried to make ‘best guess’ assumptions on your desired responsive behavior, we wanted to bring more power and control to the user while still allowing them to opt into any additional complexity.
After numerous iterations, prototypes, and user testing sessions, we landed on a new direction for building Responsive Apps in Bubble based on CSS and CSS Flexbox properties. For those not familiar, CSS Flexbox is a modern web layout technology that makes building responsive web layouts easier by allowing elements to ‘flex’ (grow, shrink) and align in a prescriptive way. We also discovered a noticeable performance increase on pages that are upgraded to the new Responsive Engine.
Take a look at the overview video to learn a little more.
The new Responsive Engine [beta] is built on the following principles:
- Build responsive earlier: Pages start out with the fixed, WYSIWYG behavior you are used to, but can opt-into responsive behavior early in the build process instead of at the end with the old system.
- Container Layouts: Container elements (page, group, popup, floating group, etc.) now have ‘container layout types’ that define the behavior of its child elements as the screen or content re-sizes. These are Fixed, Align to Parent, Row, and Column.
- Parent Container / Child Element relationships: Grouping elements into containers is now a lot more powerful as the controls an element inherits is based on its parent container layout. You’ll notice us talk about Parent container and Child elements alot
- Margins: All elements now have margins! Margins are extra space around an element and are added to the overall width and height of an element. Thus, elements will now align and snap to the margin border.
- New Repeating Group controls: The new Responsive Engine [beta] also contains new repeating group controls that give you far more control over the behavior of your repeating groups as well as allow them to be fully responsive.
- The upgrade to new responsive happens page-by-page. Existing page settings and behavior will be migrated to the new engine. Be sure to check the post-upgrade behavior though as its not a 1:1 mapping before putting anything into production.
Note: The New Responsive Engine is still in Beta.
This means the feature is pretty close to look, feel, and function but some design and functionality changes may still be made before the new Responsive becomes the default experience. In addition, there may still be some bugs present as we continue more robust testing. This is especially true for 3rd party plugins and templates that have not yet had an opportunity to upgrade. Keep this in mind if you plan on using upgraded pages in production.
In addition, it should be noted that this beta period is an important time to allow template creators an opportunity to update their templates to the new engine as well as collect feedback on how the feature is working.
The following Help Guide will give you far more detail into the new Responsive Engine, how to upgrade, and how to use the new controls.
We are very excited to see what you all build with these new controls as well as your feedback on how you are liking the new feature. Thanks everyone and happy (responsive) Bubbling!
UPDATE
New Responsive feature announcements since the original Beta launch on November 4, 2021:
- Migrate page “as-is”
- Overflow Scroll on Responsive Groups
- Animate Horizontal Collapse
- Group Elements in Responsive Containers
- Overview of why we designed a new engine vs updating the old engine
- Additional layout controls in conditionals
- Drag & Drop in the Elements Tree
- Padding and Gap Controls
- Drag & Drop in Responsive containers
