Blog / Tutorials
In this article, we go over using the frontend builder, and how to design responsive and good-looking layouts!
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:
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.
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
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)
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.
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.
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
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
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.
Start using canonic's fullstack solution to build internal tools for free