Design

The concept of design covers all the frontend build aspects of Bubble. To make building a more consistent and understandable process and allow teams to more easily coordinate there are certain recommendations and standard practices that you are encouraged to implement.

These are described in detail in:

The TL:DR; of these sections can be summarized as:

  • Design responsively from the start.

    • Use conditional logic referring to breakpoints to do so.

  • Use Bootstrap sizing for groups, elements, padding, margins, etc.

  • Use responsive layout settings wherever possible

  • Name elements and groups using a consistent structure:

    • {Element Shorthand} {Parent Group Initials} {Organizing Group Initial} {Describe Child Thing}

    • The above string can be lengthened or reduced according to context please stay consistent to the system. See Naming Conventions for further details.

    • In the example below we can see the repeating group card is named: GP RL B RG Card

  • Commonly recurring elements should have the same child name (E.g. Title will be reused a lot) and will be differentiated from one another by their parent group or organizing group Initials.

Last updated