Responsive Engine Beta in Bubble

Introduction

• Overview of the new responsive engine based on CSS Flexbox.
• Tutorial focus: How the engine works and new features available.

Upgrading to the Responsive Engine

• Must upgrade each page to use new responsive engine features.
• This includes reusable elements since they act as their own page.

Container Layouts

• Every container element has a layout for organizing child elements.
• The page itself is a container; it must be set to a responsive container layout.
• Four Container Layouts Available:
  1. Fixed (not responsive):
     • Child elements stay absolutely positioned.
     • Does not respond to changes in screen or content size.
  2. Aligned Parent:
     • Child elements pinned to a non-ant (9 parts instead of 4).
     • Elements stay pinned when the page resizes.
  3. Row:
     • Child elements align horizontally by default.
     • New elements are added to the end; wrap down as the container shrinks.
  4. Column:
     • Child elements stack vertically.
     • New elements added to the end of the list.

Child Element Layout Controls

• Layout controls depend on the parent container layout.
• If the page is set to a column layout, elements can be:
  • Left-aligned
  • Center-aligned
  • Right-aligned
  • Stretched to fit

Dragging and Positioning

• Dragging and dropping is no longer possible; size and position determined by layout and margin settings.
• Width can be set in pixels or percentages relative to the parent container.

Width and Height Properties

• Elements can have fixed or min/max height.
• Max width and height can be infinite relative to the parent container.

Margin Features

• Margins now align and snap based on the margin border.
• Condition-based margins can be set for different page widths.

Repeating Groups Upgrade

• Repeating groups compatible with the new responsive engine.
• Custom behavior set at the cell level with new layouts and controls.

Conclusion

• Mix and match container layouts according to their behavior.
• Pay attention to child elements and their properties for responsive building.
• For more information, refer to Bubble Academy.