OverviewIntroduction
When designing screens we must consider how we want the page content to layout (Size and Position), but also how it should respond to its content and the screen it is being viewed on, such as different sized monitors or mobile devices.
This page explains key concepts that you need to understand about how layout components can be positioned, sized and made responsive.
Position
Relative Positioning (Recommended)
Setting the properties on a parent area determines how child objects are positioned. such as in a row or column. The following video describes how to position your items:
Iframe |
---|
src | https://www.youtube.com/embed/hDbSVkHpxEM?rel=0 |
---|
width | 650 |
---|
height | 400 |
---|
|
Configuration Options
In the Styles tab for an area we can set the following styles to determine how items held within the area are laid out. PhixFlow uses CSS flexbox to achieve this, for more information on using flexbox visit: a guide to flexbox:
- Direction: the content will be laid out.
- Row puts components next to each other horizontally.
- Column puts components below each other vertically.
- Wrap: allows components to start a new row or column when all space is filled or the screen size changes and components need to flow onto additional rows or columns, rather than disappearing off-screen.
- Justify: determines where content will be placed for example, Flex Start - tells the first component to be in the top left.
- Align: Alignment within the are, for example Stretch - tells each component to stretch to fit the available space. If all components fit on one row, then the components extend to fill the vertical space. If components have to wrap to form a second row, each row will occupy half the vertical space.
Image Removed
Position can also be set in a shared style which allows you to combine positioning with conditional formatting rules. For example,
- show or hide an area base on an on/off toggle.
- Use the Internal Variable _client.mobile which returns true if the page is being viewed on a mobile device to amend how the screen looks.
Absolute or Fixed Position
Absolute positioning stipulates a fixed position for an item. For example, to specify a component is always positioned in the top left corner of its parent area, set Position Settings → Top: 0 and Left: 0.
If you have a fixed layout component combined with components that have relative positioning, be aware that:
- the fixed component's size depends on its Position Settings → Width and Height. If no value is set it will have the default minimum size.
In Front or Behind Another Component
To change which component is in front/behind:
- add a CSS Properties and set:
- CSS Tag:
z-index
- Value: this is a whole number that determines how far in front or behind an item will appear. For example, items with a z-index of 20 will appear in front of items with a value of 10. Consider using a larger increment, for example 10, as this provides the flexibility of adding more layers if they are needed.
Size
To control the size of layout components on a screen, again we can use Relative and Absolute sizing. The following video helps illustrate how this works:, start by considering how the content should be laid out. It can be useful to sketch out a design, for example using a wireframe.
Expand |
---|
|
A wireframe is a visual representation of the layout and structure of your screen or screens. It outlines your basic components, such as areas, tiles, text, images and buttons. |
Think about how the page should respond to its content, e.g. should the page respond to the size of the content and be scrollable, or to the size of screen it is being displayed on? Finally, consider any restrictions required, such as maximum or minimum sizes for components.