Introduction
The layout is an essential component of an application, as it determines the fixed sections that remain accessible to the user regardless of the page being viewed. Let’s explore how to create a layout from scratch by following a simple and structured approach. Whether you want to create a complex interface with multiple panels or a more minimalist structure, anything is possible with a bit of creativity.
The layout in this example will consist of four distinct elements:
A HEADER to include a logo and quick-access buttons.
A navSideBar to facilitate lateral navigation.
A PAGE CONTENT where the page content will be displayed.
A FOOTER containing useful links and legal notices.
By following the proposed steps, you’ll be able to design a clear and flexible structure ready to be adapted to different needs.
.png)
Step-by-step instructions
1. Creating the Layout
Open the More folder in the Project Explorer panel. Right-click on the Layout folder and select Add Layout.
.png)
Give your layout a name, then save it.
.png)
2. Creating a Page
To visualize the layout, you need to create a page. In the project structure, right-click on the Pages folder, then select Add custom page.
.png)
In Route, specify the path for the page. In this case, the route doesn’t matter since the page is just an example, but it’s mandatory to provide a route to create the page. In the Layout dropdown menu, specify the layout to apply to the page. Logically, this will be the layout created in Step #1.
.png)
Next, double-click on the page to display it. The default structure will include three visible elements: HEADER, SIDEBAR, and PageContent (white area).
.png)
3. Modifying the Default Layout
To make changes to the layout, you’ll need to switch the Designer mode from Page to Layout.
.png)
Once the structure is open, the components mentioned at the end of Step 2 will be visible.
.png)
Delete the default layout’s CSS code to create a layout from scratch. To do this, select the parent Box of the UI structure, then go to the Styles tab in the component panel and delete the existing CSS code.
.png)
From the Toolbox, drag the Grid component into the parent Box. This will allow you to have a bidimensional layout with rows and columns.
.png)
Once the Grid component is in place, it’s time to structure the layout. To do this, click on the orange Edit button.
Make sure you’ve selected the Grid component so the Edit button is visible.
.png)
After clicking Edit, the structure of your grid will appear. By default, it consists of 2 rows and 2 columns, but don’t worry, it’s entirely customizable! To begin, add a row that will represent the HEADER.
.png)
A Box component is placed in the structure, under the parent Box. To help with visualization, a red background is added to this new Box. Next, a text component is inserted into this Box. In the Attribute tab, the value FOOTER is added. Finally, repeat Step 12 for the footer.
.png)
The second row, consisting of two columns, is dedicated to the lateral navigation bar (sideBar 1) and the main content (pageContent 2). For this, repeat the drag-and-drop operations to place the two elements in the first and second columns, respectively.
.png)
.png)
Next, you’ll need to add sizing to the parent Box to give the layout more breathing space. The width and height dimensions are set to 100%.
.png)
To finish, the property of the Box components will be modified to define their size. In this example, the min-content value is assigned to the three elements: HEADER, sideBar, and FOOTER. Thus, the first row will correspond to the HEADER, the last row to the FOOTER, and the first column to the sideBar. Then, a property will be applied to pageContent (located in the second row and second column) with the value auto.
.png)
Optional #1: To better visualize the size of pageContent, you can apply a border to the Box Content.
.png)
Optional #2: You can also adjust the spacing between rows and columns by modifying the attributes of the Grid component. In this example, the default values can simply be removed.
.png)
Conclusion:
This guide has taught you how to configure grids, adjust CSS properties, and organize elements intuitively. With these fundamentals, it becomes easy to create flexible structures ready to accommodate various content while delivering an optimal user experience. Whether for simple projects or more complex interfaces, this method provides a solid foundation for building modern and dynamic applications.