Manually Building UI

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 here.

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.

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.

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.

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.

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.