Canvas Documentation
Bubble Best Practices
v6.0
v6.0
  • Introduction
  • Key Features
  • What's New
  • Canvas Design System Figma File
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Page
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
      • Mail merge terms
    • Miscellaneous
      • Setting up two factor authentication
      • Cookie and consent banner
      • Setting your password policy
      • Set up Payment info on Account page
      • Loading screen
      • Configuring multiple languages
      • Customizing your app's portal page colors
    • Reference
      • Pages
        • Index
        • Product homepage
        • Marketplace homepage
        • SaaS homepage
        • About us
        • Pricing
        • Admin Portal
        • Account
          • Account deletion
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Log in
        • Cookies Permission
        • Widgets
          • App security
          • Header Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email & templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, setup checklist, and settings
          • Admin options app variables
        • Menu Focus Elements
        • Sidebar tab
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Canvas library
    • Updating asset RG data source
    • UI Patterns
      • Simple Dashboard Page
      • Product Marketplace Dashboard Page
      • Labor Marketplace Profile Page
      • Social Network Profile Page
      • Simple Events Search Page
      • Events Search Page
      • Ecommerce Search Page
      • Labor Marketplace Search Page
    • Page templates
      • Basic Bubble Marketing Page
      • Chat Messenger Page
      • Form Builder Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List Page
      • Horizontal Tabs Portal / Dashboard Page
      • Standard Portal / Dashboard Page
      • Simple Portal / Dashboard Page with Icons
      • Double Sidebar Portal Page Template
      • Search Page
      • Map Search Page with Toggle and Filters
      • Floating Map Search Page
      • Search Bar Page
      • Multi-Step Page With Progress Bar
      • Standard Multi-Step Process Page
      • Multi-Step Process Page with Sidebar
      • Gallery Profile or Product Page
      • Sidebar Profile Page with Tabs
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • Pagination
      • Monthly Calendar Scheduling Widget
      • No Reply Comments Thread
      • Nested Comments Thread (with Like and Reply)
      • Placeholder Group
      • List with Circular Progress Bar Repeating Group
      • Top Input Chat Widget
      • Bottom Input Chat Widget
      • Toggle Tabs Group
      • Single-Select or Multi-Select Pill Tabs Group
      • Settings Group
      • Order Confirmation Group
      • To-Do List Repeating Group
      • Title Group with Button and Filters
      • Product Details Group With Progress Bar
      • Listing details with Icons and Menu Focus Group
      • Week Daily Availability Group
      • Frequently Asked Questions (FAQ) Repeating Group
      • Dismissible Module
      • Video Group
      • About Group
      • Add to Cart Group
      • Full Width Map with Directions Link
      • Location Module (Map and Directions)
      • Drag and Drop Repeating Group
      • Infinite Columns Horizontal Scroll Data Table with Fixed First Column (Repeating Group)
      • Nested Data Table (Repeating Group)
      • Standard Data Table (Repeating Group)
      • Standard Data Table (Table Element)
      • Mobile-Friendly Data Table (Repeating Group)
      • Mobile-Friendly Data Table (Table Element)
      • Infinite Columns Horizontal Scroll Data Table (Repeating Group)
      • Infinite Columns Horizontal Scroll Data Table (Table Element)
      • Activity Feed
      • Social Feed
      • Nested Repeating Group
      • Advanced Form Inputs Group
      • Reviews with Ratings Summary and Images
      • Reviews Repeating Group with User Images
      • Reviews (Text Only) Repeating Group
      • Standard Repeating Group with Image
      • Search Bar Group
      • Listing Details Group
      • Post Group with Upvoting UI
      • Large Chart Dashboard Widget
      • Chart With Key Metrics Dashboard Widget
      • 2-Column Table and Key Metrics Dashboard Widgets
      • 2-Column Large Metrics Dashboard Widgets
      • 4-Column Large Metrics Dashboard Widgets
      • Main Image with Thumbnails
      • Centered Profile Block
      • Left-justified Profile Block
      • Tile Image Gallery and Popup
      • Image Feed with Nested Comments Thread
      • 1-Column Standard Form Inputs Group
      • 2-Column Slideshow Tiles Repeating Group
      • 2-Column Repeating Group (Text, Link, Image, and Description)
      • 2-Column Repeating Group (Link, Text, and Button)
      • 2-Column Repeating Group with Actions
      • 2-Column Grid Tiles Repeating Group
      • 2-Column Form Group
      • 4-Column Tiles Repeating Group
      • Expiration timer
    • Popups
      • Edit Drawer
      • Map Location Details Drawer
      • Details and Comments Drawer
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll Popup
      • Permissions popup
      • Multimedia Slideshow Popup
      • Edit Popup
      • Standard Form Popup
      • Subscribe Popup
      • Feedback / Contact Popup
      • Details Popup
      • Add List Popup
      • Advanced Form Popup
      • Rating Popup
      • Toggle Tabs Popup
      • Share Popup
      • Multi-Step Popup
      • Invoice Popup
      • Stripe Credit Card Purchase Popup
      • View Profile Popup
      • Send Message Popup
      • Multi-Select Pill Tabs Popup
      • Net Promoter Score (NPS) Popup
      • Pricing Plans Popup
    • Reusables
      • Multimage uploader
      • Sidebar_icontab
      • Doublesidebar_tab
Powered by GitBook
On this page
  • Standard page
  • Group Title
  • Blocks container 860 (do not rename)
  • Blocks
  • Header group
  • Standard group
  • Popups

Was this helpful?

  1. CANVAS FUNCTIONALITY
  2. Reference
  3. Design standards

Manually Building UI

When you need to build something yourself

PreviousDesign standardsNextUpdating asset RG data source

Was this helpful?

Using elements and spacing consistently across your application is important for your app's design to remain cohesive with the Canvas template.

Canvas manages this for you but there are times you will find you need to build pieces of your UI manually. The guidelines below specify the standards used by Canvas to help you maintain a consistent brand and design across your application.

Standard page

If you need a generic Canvas page simply add the 'Standard page' to your app with Canvas extension by following the steps .

This will create a new page in your app with a header, footer, and all the elements below as a starting point for building your new page.

A standard page will have a width of 1220px, minimum width of 0, and no maximum width.

Group Title

This group is placed just below the header and is a full width element that can be used as the title element for the entire page. By default it includes a title and a description text.

NOTE: This element is set to be hidden when the page width is less than 500px. Keep in mind if you are building for mobile that the element will not be shown on most phones.

Blocks container 860 (do not rename)

This group is used as a main container for the page body content and can be found on every Canvas page.

  • On standard pages, the default width is set to 860px with responsive minimum width of 99% and a maximum width of 105%.

  • On portal pages, the default width is set to 860px with responsive minimum width of 80% and no maximum width.

To maintain responsiveness across different screen sizes all groups on the page should be nested inside this group.

Nesting a group within another group can be achieved by dragging the group to be nested into the containing group. The border of the containing group will turn RED when the nested group is successfully nested

All Canvas blocks are designed to fit and operate responsively at this standard width of 860px. Changing the width of the Blocks container 860 (do not rename) group can cause issues with responsiveness and new blocks you may add to your project

Blocks

Most Canvas blocks will come with a main container group and are designed to be used as either main sections for a single page or as a full page itself when creating a portal page

The block will contain two main groups: Header group and Standard Group

Header group

A header group is used to describe the page or section to which it belongs. Each header group contains a title, description, and a button by default. See Standard Group below to learn more about the widths, padding, and responsiveness of groups in general.

  • The title has a font size of 24pt, a height of 36px, minimum width of 20%, and no maximum width set

  • The description has a font size of 16pt, a height of 24px, minimum width of 20%, and no maximum width set.

Standard group

A standard group is used to contain the main content of the page or section. This can be text, images, repeating groups, or any combination of elements. When placed below a header group there should be 15px of spacing between bottom of the header group and the top of the standard group.

A standard group contains the following three main elements:

  • Outer Group: This group operates as a container for the entire section and has a width of 860px, a minimum width of 20%, and no maximum width set.

  • Inner Group: This is the content container for this section and will have a width of 780px, a minimum width of 20%, and no maximum width set. To maintain proper responsiveness, all content elements should be placed within this inner group.

  • Padding Groups: There are two groups called Group verticalPadding 1 and Group verticalPadding 2 which are located at the top left and right of the outer group. These groups have a standard width of 40px, a minimum width of 50%, and no maximum width set and are used to maintain a dynamic padding distance between edges of the outer group and the inner group.

Do not delete the padding groups as they are integral to maintain responsiveness

Popups

Canvas comes with two different popup sizes. The small popup is 360px wide and the standard popup is 680px wide. Both have a minimum responsive width set to 20%. The padding between the edge of a popup and its inner content is 30px on all sides.

Small popups generally have a title, some text, and a couple of buttons. Padding between main elements is 20px.

The Standard popup has a title, inputs, and a couple of buttons. The padding between main elements is 20px with the exception of the inputs. Padding between inputs is 15px.

An input's label text element is 18px in height, uses a 12pt font size, and has a 0px spacing between the label text and the input element below it.

A Portal Page is a single Bubble page that has a left side navigation menu and creates the illusion of navigating between pages by hiding and showing groups on the page. To learn more, see the .

Hiding Groups section
Nesting a group within a containing group
Module containing a header group and a standard group
Standard group on a page with a button and a width of 860px
Small popup with description text and a width of 360px
Standard popup with inputs and a width of 680px
here