Introduction

As shown in part two, you can use the Kajoo Builder to build and modify your component through the use of elements. However, not only can you add elements to the component, but you can modify how the elements fit together. This section of the guide will explain the layout settings in the Kajoo builder.

The Wireframe Tab

In the Kajoo builder, the left-hand panel has three tabs: Design, Wireframes, and Tree. We covered the Design tab in the previous section of this guide. In this section we’ll talk about the Wireframe and Tree tabs.

The Wireframe tab displays the hierarchy of elements on the page, with the element at the top of the list appearing “behind” the other elements in the builder. For example, if you want a container element to be behind the other elements in the builder, you would drag it to the top of the wireframe list.

Open

The Tree Tab

The Tree tab in the left-hand panel is important for understanding how code will be generated. It shows not just the hierarchy of elements, but how Kajoo recognizes their grouping. For example, if your component is split down the middle into two columns, Kajoo will recognize these as independent sections for which you can modify responsive settings.

Open

The Tree tab showing the grouping of elements and layout

Underneath the element tree, you can see a layout preview for your component across five different breakpoints. Clicking on the different breakpoints will show how your component collapses responsively across these breakpoints.

How to Change Layout Settings for Your Component

Using the Tree tab and the element properties pane, you can change how your component collapses across different breakpoints.

1. Open the Tree tab in the left-hand pane

2. Select a breakpoint in the Tree tab to preview its layout settings - for this example, pick “Sm” for the mobile resolution

3. Select a container element in your component. The properties pane should open on the right.

4. In the properties pane for the selected container element, you should see a “Layout Strategies” section. In here you can select among different layout strategy options, and you should see your choices reflected in the Tree tab in the left-hand pane.

Related articles