Canonic 101: How to design a page layout on Canonic

Canonic allows you to build full-stack applications without code.

On Canonic you can bring data from external sources such as DB’s (Mongo DB, PostgreSQL, My SQL, Microsoft SQL, etc) or 3rd party services (Slack, Airtable, Google Sheets, etc). You can also create a custom DB on Canonic without writing code. You can read more about how to bring data into Canonic here.

Once your data is ready to plug into components, Canonic’s frontend builder can bring alive a full-fledged web application in minutes. Read more on how to power data into components over here. You can also set actions for components, learn how to configure those here

With your components ready, now it’s time to start designing the page. This involves a few simple steps:

Plan the page

Start row-wise and decide which elements you want in each row. For example in the video below, the 1st row of the page is the title of the tool along with a button, the 2nd row is the table, 3rd row is Chart 1 and Chart 2. I want each row to fill the page width-wise and yet adapt to the height when the width reduces in responsivity.

Grouping the components in each row

Start grouping the components as per the row decided above. Below are how you can group components

You can use CMD + G to group selected components or simply select the components and right-click to group them.

You can also drag the components closer to another component for it to group automatically.

Or, drop a component inside an existing group

Grouping the components for the page

Once all the rows are individually grouped and ready, you can then select all the rows and group them for the page. Then rearrange the rows by right-clicking to allow them to move to the top or bottom (in this case as they are horizontally stacked)

Aligning components inside a group/container

Inside each of the groups/containers, you can modify the stacking of the components. They can be vertically stacked or horizontally. Here for the title + button group and the group of charts, I have changed the alignment to horizontal from vertical.

Using layout configuration

Set the whole group at the right place on the page by using layout configuration for the group. X=0, Y=0, places the group at the top left edge of the page. Additionally, setting each row group and the whole group width at 100% can enable them to occupy the whole wide space on the page.

Setting padding and gaps

Select the individual groups by clicking the cmd/cntrl button on the keyboard and you will see common properties show up on the right-side panel. With the help of the pre-configured tokens you can select the same padding and gap across to give it a uniform look

Configuring layout for responsivity

On Canonic you can set the size of any component by going into the layout configs. The size can be set in pixels, percentages, or with the help of flex. In the current scenario to enable responsivity, we will go ahead and configure flex. Use Min Width config in layout settings to enable correct layout in responsivity

Troubleshooting Tips

1. For components such as lists, tabbed containers, or modal containers, best to start inside out. That means first create the component group outside the page on the canvas, once your group is ready, then drop it inside the containers.
2. Use right-click to ungroup components
3. Avoid creating unwanted groups, this can cause issues
4. Ensure that all component sizes are in percentage to avoid conflicting results in responsivity
5. If you want to add custom padding/gap to any component you can write it in this format 2px 32px or 2px 32px 24px 28px (L, T, R, B)
6. You can modify the orientation, alignment, and justification for the grouped components from insider group/container settings
7. You can also configure wrap conditions inside a container/group
8. Any group/container can easily be converted into a card, you need to add elevation to it.
9. Any group/container can easily be given a background color
10. Any group/container can be provided with different views (this is especially useful when you have different views based on RBAC)
11. Best to always test the UI created in the preview mode as well as the production URL
12. You can modify the design tokens (colors, typography, spacing, font) used within a project from the project settings

This was a quick guide on how to design a page on Canonic’s front-end builder. Trust me, it's like magic and so quick. Once you get it you can design pages in hours if not minutes while keeping it fun and responsive.

If you struggle with designing the page on Canonic, you can write to us at support@canonic.dev or message on discord community. Additionally, refer to the help section from within the app or check our documentation. We will come up with more such guides, just let us know what are you looking for.