Bubble.io Layout Design

Purpose and Scope

This SOP provides guidelines for designing layouts in Bubble.io, taking into account the platform's current limitations and best practices. It applies to all designers and developers working on Bubble.io projects at LowCode Agency.

Definitions

• Bubble.io: A no-code platform for web application development.
• Grid System: A structure of columns and rows used for organizing content in web design.
• Responsive Design: Design approach that adapts to different screen sizes and devices.

Current Layout System

Grid System

• Bubble.io does not utilize a traditional column/grid system for layout design.
• Layouts rely on adjustable width and height attributes, along with paddings and margins.

Key Attributes

1. Width: Adjustable width settings for elements.
2. Height: Adjustable height for elements.
3. Margins: Used to space elements adequately.
4. Paddings: To create space within elements.

Procedure

1. Designing Layouts

• Utilize margins and paddings to achieve desired layouts.
• Adjust width and height attributes of elements as needed.
• Avoid relying on grid frameworks that are not native to Bubble.io.

2. Creating Card Sections

• When designing card sections or similar layouts: a. Use margins to create space between cards. b. Apply paddings within cards for internal spacing. c. Adjust individual card widths and heights for consistency.

3. Setting Frame Sizes

• For Desktop:
  • Set the minimum frame size to 1440 pixels.
• For Mobile (responsive design for guests or individual users):
  • Set the minimum frame size to 320 pixels.

4. Responsive Design Considerations

• Ensure layouts adapt well to different screen sizes between the desktop and mobile minimum sizes.
• Test designs at various breakpoints to ensure proper responsiveness.

Best Practices

1. Maintain consistency in spacing by using standardized margin and padding values.
2. Create reusable elements with preset attributes for common layout patterns.
3. Regularly test layouts on different devices to ensure proper responsiveness.
4. Document any custom layout solutions for team reference and future projects.

Exceptions and Special Scenarios

• For complex layouts that are challenging to achieve with Bubble.io's native tools, consult with the development team lead for alternative solutions or workarounds.

Contact Information

• For Bubble.io design queries: Design channel in Slack
• For technical implementation questions: Bubble channel in Slack