Working with Master Screens
About this lesson
In this course, you will discover how to create Master Screens and how to take advantage of their benefits. You will learn a critical method to ensure consistency, speed and efficiency in the design of your web application.
Master Screens provide a centralized definition for layout and design elements - such as headers, footers and menu bars - that are repeated across the various screens of your web application. This structure gives developers the opportunity to easily manage and update the consistency of screen layout and design. Curious about how the Master Screen structure works? Let's take a look at the details.
First, we will learn how to create a Master Screen on the Kuika Low-code platform. With Kuika, you can prepare designs that will contain common elements that you can use on your screens using Master Screens.
Now let's create a Master Screen.
When you create a new Master Screen via the Screens panel, the fixed layouts for the top, left and bottom edges are turned on by default.
With the Properties panel, you can manage the layout, status and format of Layouts according to your needs and create different combinations.
For example, you can make a layout with only the top or only the left layout, or a layout with the top and left layout open.
After deciding on the layout structure, you can add the elements to the Master Screen with drag and drop.
For example, let's consider a scenario where you will prepare a Header design with Master Screen.
- After organizing your Layout layout so that the top Layout remains open, convert the Row in the top Layout into a single column.
- Add a Horizontal Stack inside the column.
- Drag an Image and a Label into the Horizontal Stack.
- Select a sample logo image for Image. Perform ImageFit and Style edits.
- Select Label and enter a sample screen name and make Style edits.
- Select Horizontal Stack and make alignment adjustments.
We have prepared a simple Header design using Master Screen. Now let's see how to use this design on different screens.
- Open the sample screen where you will use the Master Screen.
- Select Master Screen using the Properties panel of the screen.
You have now completed a sample Master Screen.
Using Master Screen ensures design consistency in the application development process, speeds up the process and enables easy management of future changes.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
In this course, you will discover how to create Master Screens and how to take advantage of their benefits. You will learn a critical method to ensure consistency, speed and efficiency in the design of your web application.
Master Screens provide a centralized definition for layout and design elements - such as headers, footers and menu bars - that are repeated across the various screens of your web application. This structure gives developers the opportunity to easily manage and update the consistency of screen layout and design. Curious about how the Master Screen structure works? Let's take a look at the details.
First, we will learn how to create a Master Screen on the Kuika Low-code platform. With Kuika, you can prepare designs that will contain common elements that you can use on your screens using Master Screens.
Now let's create a Master Screen.
When you create a new Master Screen via the Screens panel, the fixed layouts for the top, left and bottom edges are turned on by default.
With the Properties panel, you can manage the layout, status and format of Layouts according to your needs and create different combinations.
For example, you can make a layout with only the top or only the left layout, or a layout with the top and left layout open.
After deciding on the layout structure, you can add the elements to the Master Screen with drag and drop.
For example, let's consider a scenario where you will prepare a Header design with Master Screen.
- After organizing your Layout layout so that the top Layout remains open, convert the Row in the top Layout into a single column.
- Add a Horizontal Stack inside the column.
- Drag an Image and a Label into the Horizontal Stack.
- Select a sample logo image for Image. Perform ImageFit and Style edits.
- Select Label and enter a sample screen name and make Style edits.
- Select Horizontal Stack and make alignment adjustments.
We have prepared a simple Header design using Master Screen. Now let's see how to use this design on different screens.
- Open the sample screen where you will use the Master Screen.
- Select Master Screen using the Properties panel of the screen.
You have now completed a sample Master Screen.
Using Master Screen ensures design consistency in the application development process, speeds up the process and enables easy management of future changes.
We are transitioning to a new user interface on the Kuika Platform and updating our Kuika Academy courses and videos as soon as possible.
In this course, you will discover how to create Master Screens and how to take advantage of their benefits. You will learn a critical method to ensure consistency, speed and efficiency in the design of your web application.
In this course, you will discover how to create Master Screens and how to take advantage of their benefits. You will learn a critical method to ensure consistency, speed and efficiency in the design of your web application.
Master Screens provide a centralized definition for layout and design elements - such as headers, footers and menu bars - that are repeated across the various screens of your web application. This structure gives developers the opportunity to easily manage and update the consistency of screen layout and design. Curious about how the Master Screen structure works? Let's take a look at the details.
First, we will learn how to create a Master Screen on the Kuika Low-code platform. With Kuika, you can prepare designs that will contain common elements that you can use on your screens using Master Screens.
Now let's create a Master Screen.
When you create a new Master Screen via the Screens panel, the fixed layouts for the top, left and bottom edges are turned on by default.
With the Properties panel, you can manage the layout, status and format of Layouts according to your needs and create different combinations.
For example, you can make a layout with only the top or only the left layout, or a layout with the top and left layout open.
After deciding on the layout structure, you can add the elements to the Master Screen with drag and drop.
For example, let's consider a scenario where you will prepare a Header design with Master Screen.
- After organizing your Layout layout so that the top Layout remains open, convert the Row in the top Layout into a single column.
- Add a Horizontal Stack inside the column.
- Drag an Image and a Label into the Horizontal Stack.
- Select a sample logo image for Image. Perform ImageFit and Style edits.
- Select Label and enter a sample screen name and make Style edits.
- Select Horizontal Stack and make alignment adjustments.
We have prepared a simple Header design using Master Screen. Now let's see how to use this design on different screens.
- Open the sample screen where you will use the Master Screen.
- Select Master Screen using the Properties panel of the screen.
You have now completed a sample Master Screen.
Using Master Screen ensures design consistency in the application development process, speeds up the process and enables easy management of future changes.
Files
Sources
Glossary
