Component Placement

In this chapter we will talk about the correct way to place a component. To do so you need to work with the Row Span and the Column Span. The main difference between Hybris and FirstSpirit is that in Hybris you had to think in columns when positioning components in a grid. In FirstSpirit you have to think in rows.

Both the ColSpan and the RowSpan must be set separately for Mobile, Tablet, Latop and Desktop.

Device	Col Span
Mobile	COLSPAN_2, COLSPAN_4
Tablet	COLSPAN_MD_2, COLSPAN_MD_3, COLSPAN_MD_4, COLSPAN_MD_5, COLSPAN_MD_6, COLSPAN_MD_7, COLSPAN_MD_8, COLSPAN_MD_9, COLSPAN_MD_10, COLSPAN_MD_12
Desktop	COLSPAN_LG_2, COLSPAN_LG_3, COLSPAN_LG_4, COLSPAN_LG_5, COLSPAN_LG_6, COLSPAN_LG_7, COLSPAN_LG_8, COLSPAN_LG_9, COLSPAN_LG_10, COLSPAN_LG_12
Desktop	COLSPAN_XL_2, COLSPAN_XL_3, COLSPAN_XL_4, COLSPAN_XL_5, COLSPAN_XL_6, COLSPAN_XL_7, COLSPAN_XL_8, COLSPAN_XL_9, COLSPAN_XL_10, COLSPAN_XL_12

Device	Row Span
Mobile	ROWSPAN_1, ROWSPAN_2, ROWSPAN_3, ROWSPAN_4, ROWSPAN_5, ROWSPAN_6
Tablet	ROWSPAN_MD_1, ROWSPAN_MD_2, ROWSPAN_MD_3, ROWSPAN_MD_4, ROWSPAN_MD_5, ROWSPAN_MD_6
Laptop	ROWSPAN_LG_1, ROWSPAN_LG_2, ROWSPAN_LG_3, ROWSPAN_LG_4, ROWSPAN_LG_5, ROWSPAN_LG_6
Desktop	ROWSPAN_XL_1, ROWSPAN_XL_2, ROWSPAN_XL_3, ROWSPAN_XL_4, ROWSPAN_XL_5, ROWSPAN_XL_6

RowSpan and ColSpan are best explained using examples. Therefore, in the following sections, we will use a text box and an image to illustrate the differences between the various settings.

ColSpan

In FirstSpirit, we will use the familiar 12-column grid layout to arrange our components. So, in simplified terms, the ColSpan is the width of the component. It doesn't matter how many components you put in a row, but you only have the given 12 columns per row and you have to divide them among the components. However, you don't always have to use all 12 columns.

Examples

Now we will show you a few examples of different ColSpan (Desktop). Keep in mind that in these examples the RowSpan is not manually changed, we will get to that later:

Image = COLSPAN_XL_12
Textbox = COLSPAN_XL_12

COLSPAN_XL_12

As you can see, the two components (textbox and image) are the same size. Also, each of them need the whole length (ColSpan_12) of the grid container. This is also why they don't fit next to each other.

Image = COLSPAN_XL_6
Textblock = COLSPAN_XL_6

COLSPAN_XL_6

As you can see, the two components (textbox and image) are the same size. Also, together they fill the whole length (ColSpan_12) of the grid container.

Image = COLSPAN_XL_3
Textbox = COLSPAN_XL_9

COLSPAN_XL_different

As you can see, the image component is a lot smaller than the textbox. Still, they fill the whole length of the grid container.

Image = COLSPAN_XL_3
Textbox = COLSPAN_XL_3

COLSPAN_XL_3

As you can see, the two components (textbox and image) are the same size. However, this time they don't need the whole lenght of the grid container. So you could add more components.

RowSpan

The RowSpan determines over how many rows the component should go.

Now we will show you a few examples of different RowSpans (Desktop). The ColSpan for both components for all of these examples is COLSPAN_6.

Image = ROWSPAN_XL_3
Every Textbox = ROWSPAN_XL_1

ROWSPAN_XL_different

Since we used the COLSPAN_XL_6 the two components combined still need the whole length (ColSpan_12) of the grid container. However, since we changed the ROWSPAN the height of the components is different to each other.

Order

Order is used to specify the exact position of the component in the grid.

Layout Order Options

The order can be set separately for mobile, tablet and desktop. However, it is important to know for the correct use of Order that Mobile is always the first breakpoint. This means that if you have chosen an order for Mobile, you must also choose one for Tablet and Desktop! If you do not want a specific order for Tablet and Desktop, you can select ORDER_NONE, but you must select an order, this field cannot be left blank if you have selected an order for Mobile.

An example: You have created a button and want it to appear at the bottom of the page for mobile devices. Therefore, you select ORDER_LAST for Mobile. Since you have selected an order for mobile, you must also select an order for tablet and desktop. You also select ORDER_LAST for Tablet,but you want to keep the default order, which is already visible in the preview, for Desktop. Since you can't leave the field blank, you select Order_NONE.

Aspect Ratio

The aspect ratio is a setting that determines the ratio of the side lengths to each other. For some components (e.g. Home Stage), the aspect ratio is preset and therefore cannot be changed. For some components, you have the option to set the ratio yourself. In this case, you must set the aspect ratio for each device individually. The focus point, i.e. the part of the image that is always visible no matter which aspect ratio is selected, can be set separately. For more information on how to do this, have a look at the chapter images on the Component Page.

Note: The aspect ratio 1:1 is recommended for mobile devices. This is therefore also the default value.

As we have done previously, we will explain the Aspect Ratio with an example:

Example

Aspect Ratio = 16:9

Aspect Ratio 16:9