BubbleBase
  • Introduction
    • What is BubbleBase?
    • Why Use BubbleBase?
    • How BubbleBase Works
  • Getting started
    • 1. Installing & Setting Up BubbleBase
    • 2. Understanding the Folder & Page Structure
    • 3. How to Customize BubbleBase for Your Project
  • Best practices
    • Database
      • Database Naming Conventions
      • Iconography
    • Design
      • Designing Responsively
        • Responsive Group Settings
        • Breakpoints
        • Page/Group Structure
      • The APG Naming System
        • Naming Conventions
        • Element Shorthand
        • Standardizing Group and Element Names
          • Commonly Occurring Elements
          • Naming Groups Within Groups
    • Workflows
  • APIs
    • Stripe
      • Stripe Checkout (payment mode)
        • Stripe Checkout (payment + price id)
        • Stripe Checkout (payment + no price id)
        • Stripe Checkout (payment + price id + multi line items)
      • Stripe Checkout (subscription mode)
        • Stripe Checkout (Subscription with price id)
        • ⏳ Stripe Checkout (Subscription without price id)
      • Stripe Checkout (marketplace)
      • Stripe Customer Portal
      • Create Customer
      • Retrieve Charges
      • Delete Subscription
      • Retrieve Subscription
      • Retrieve Invoice
      • Retrieve Price
    • SendGrid
      • Send Email (standard)
      • Send Email (template)
  • Data
    • Data types
      • Essential Data Types
        • User
        • Dt_user_profile_images
      • Navigation Data Types
        • Dt_Sidenav
      • Functionality Data Types
        • Dt_Reviews
        • Dt_Notifications
        • Dt_Invoices
        • Dt_Line_Items
        • Dt_email
        • Dt_email_template
        • Dt_email_footer_link
        • Dt_charge
        • Dt_credit
        • Dt_contact_requests
        • Dt_API_logs
      • Kit Data Types
        • Dt_(Kit)_Jobs
        • Dt_(Kit)_AI_messaging_thread
        • Dt_(Kit)_ai_thread
        • Dt_(Kit)_comment data
        • Dt_(Kit)_company data
        • Dt_(Kit)_dashboard_metrics
        • Dt_(Kit)_FAQs
        • Dt_(kit)_form_questions
        • DT_(Kit)_form_answers
        • Dt_(kit)_listings
        • Dt_(kit)_messaging_channel
        • Dt_(kit)_messaging_thread
        • Dt_(kit)_pricing
        • Dt_(kit)_reviews
        • DT_(Kit)_Task List
        • Dt_(Kit)_Task Stage
        • Dt_(kit)_task_comments
        • Dt_(kit)_Tasks
    • Option Sets
      • Navigation Items
        • 🔒 os_navPage
        • 🔒 os_nav_Subpage
        • 🔒 Os_nav_Tab
      • User Roles and Actions
        • 🔒 os_user_types
      • Data Categorization
        • 🔒 os_record_interaction
        • 🔒 os_record_type
        • 🔒 os_action_type
        • Os_toast_type
      • App-Wide Settings
        • 🔒 System
  • Plugins
    • Google
  • Reusable Elements
    • UI Components
      • Authentication Page
        • Design
        • Workflows
      • Landing Page (index)
        • Hero
        • Features
        • Metrics
        • Call-to-Action
        • Pricing
        • FAQs
        • Testimonials
      • Dashboard Page (home)
      • My Profile
  • Popups
    • 🍿 PU_CRUD
    • 🍿 PU_Delete
    • 🍿PU_Action
    • 🍿 PU_Loading
  • App-Wide Components
    • 🔐 Security Redirect
    • ⚙️ Global Events
    • 📌 FG_Sidebar
  • Workflows
    • Frontend workflows
    • Backend workflows
      • delete_user (example)
Powered by GitBook
On this page
  • Naming different Groups or Elements
  • For Parent Groups:
  • For Organizing Groups:
  • For Child Groups:
  • Resolving Naming Conflicts
  1. Best practices
  2. Design
  3. The APG Naming System

Naming Conventions

To create consistency across apps and make elements easier to find in workflows, please using the following naming conventions.

PreviousThe APG Naming SystemNextElement Shorthand

Last updated 5 months ago

Naming different Groups or Elements

For Parent Groups:

{Element Shorthand} {Describe Parent Thing}

For Example: "GP review listing"

For Organizing Groups:

{Element Shorthand} {Parent Group Initials} {Organizing Group Name}

Head = top/first

Body = Middle

Foot = Bottom/last

For Child Groups:

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

For Example: "TXT RL H date"

NOTE: you can continue to chain on child group names as is appropriate as you nest deeper, however if you use organizing group initials consistently, this should become less necessary.

For Reusable Elements:

{Reusable Element Name} {Page Name}

To avoid confusion when using a reusable element multiple times replace Bubble's automatic "A", "B", "C" with the page name.

If you use the same reusable multiple times on a page, simply follow the standard naming conventions.

{Reusable Element Name} {Page Name} {Parent Group Initials} {Organizing Group Initial} {Child Thing}

Try to make it only as complex as it needs to be, usually parent group initials will be enough.

Here is an example of a simple page layout using the APG nomenclature and design principles:

Resolving Naming Conflicts

By using the {Parent Group Initials} and {Organizing Group Initial}, you should avoid 99% of conflicts. However, if conflicts occur between similar groups or elements, they will likely occur:

  • Within the same parent group:

    • In this case, please differentiate by creating {Sibling Group} names and using the following structure:

{Element Shorthand} {Parent Group Initials} {Organizing Group Initial} {Sibling Group name/initial} {Describe Child Thing}

Wherever possible try to avoid using numbers, as this can get confusing in workflows for those unfamiliar with the app (however, use your judgment, as there may be times when this makes the most sense).

These are explained in more detail in the , but put simply, you should break up each page (and where necessary, complex groups) into three sections:

Naming Groups Within Groups Section