Canvas Documentation
Bubble Best Practices
v2
v2
  • Welcome
  • Introduction
  • Contents
  • Using Bubble
    • Bubble basics
    • Bubble best practices
      • Principles
      • Database
      • Design
      • Security
      • SEO
      • Speed
      • Modularity
        • Data triggers
  • Using the template
    • Getting the template
    • Setup
      • Quickstart
      • Features and configuration
        • Customizable landing page
        • Header menu
        • Menu focus group
        • Styles and colors
        • Extending the admin portal
        • Set a password policy
        • Enable cookies
        • Alerts
        • Emails
        • Hidden variables popup
        • Set up index page redirects
        • Set up payments on account page
        • Set up social media links
        • Search engine optimization (SEO)
        • Setting up domains
        • Legal docs
    • Extending the template using Canvas Pages
      • How it works
      • Get started
      • Setting up added modules
      • Updating Canvas styles
    • Extending the template manually
      • Padding
      • Pages, groups, and popups
      • Hiding groups
      • Styles
    • Reference
      • Pages
        • index
        • admin
        • home
        • account
        • verify
        • login and loginsimple
        • termsofservice
        • privacypolicy
        • reset_pw
        • standardpage
        • 404
      • Reusable elements
        • header
        • footer
        • signup/login
        • popupsreusable
        • menufocusgroup_template (︙)
        • menufocusgroup_user
        • menufocusgroupfeature_b
        • menufocusgroup_email
        • menufocusgroup_notifications
        • menufocusgroup_shoppingcart
        • menufocusgroup_search
        • cookiespermission
        • homepageblocks
        • admin portal reusables
          • admindashboard
          • admingeneralsettings
          • adminemail
          • adminseosettings
          • adminsocialmediasettings
          • adminsocialmediainfo
          • adminlegalpages
          • adminhomepagesetup
          • adminstyles
          • adminfeaturebacklog
      • Data and workflows
        • Data structure
        • Option sets
        • API workflows
      • Canvas Pages: lists of modules & page templates
  • Demos
    • Yelp for Books
  • Other Canvas templates
Powered by GitBook
On this page
  • Standard page
  • Standard group
  • Popups

Was this helpful?

  1. Using the template
  2. Extending the template manually

Pages, groups, and popups

Various types of containers that are used

PreviousPaddingNextHiding groups

Last updated 5 years ago

Was this helpful?

Standard page

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

  • The standard page will come with a header and a footer.

  • There will be a page title group called Group Title and it will hide and collapse when the current page width is less than 500px.

  • There will be a group on the page called Group page860Group. This group will have a width of 860px, with a minimum width of 99% and a maximum width of 105%. All groups on the page should be added into this main content group for responsiveness purposes.

Standard group

  • Groups should be added into the main content group Group page860Group on the page.

  • All groups should have a width of 860px, a minimum width of 20%, and no maximum width.

  • Every standard group will come with two padding groups called Group verticalPadding 1 and Group verticalPadding 2. Please do not delete these groups as they are there for responsiveness purposes.

  • Within each standard group, there will be a 780px width main content group. You should add elements and repeating groups into this group.

  • If you have multiple groups on a page and each group has a different visibility rule, you should hide all groups by default and check the box for “Collapse when hidden”. For responsiveness, groups on the same page should be stacked vertically (not overlapping) or they will not collapse properly.

Popups

Popups will come in two widths:

  • Simple popups with some text and a button are 360px, with a minimum width of 20%

  • Popup forms (with input fields) are 680px, with a minimum width of 20%