Build a responsive layout

A responsive layout is essential for building applications that adapt to the screen of any device. KAIZEN provides responsive layout tools that automatically adapt your application's interface to different screen sizes. Use layout components and responsive settings to control how your application appears across devices.

What you can do

With responsive layouts, KAIZEN provides you with the control over component visibility based on the device type. It makes spacing and sizing adjustable, so that the end users can view the application the way they want. You also have the option to reorder the components for different layout effects and set breakpoints for any specific device category.

Once you finish the design, you can deploy the application to multiple screen sizes.

How it works

KAIZEN uses a hierarchy of layout components that work together to create responsive designs:

1. Grid system: Organises content into flexible rows and columns

2. Container components: Wrap and control sub-components

3. Breakpoint settings: Define layout behaviour at specific screen widths.

4. Responsive properties: Adjust individual component settings according to the device

It is recommended to follow these best practices for designing a responsive layout:

• Test your layouts on actual devices, instead of resized browser windows.

• Use relative units (percentages, viewport units) instead of fixed pixel values.

• Start with a smaller screen and scale up to larger screens.

• Hide or simplify complex features on smaller screens.

• Maintain consistent navigation patterns across device types.

Last updated on 20 May 2026