Introduction

In this chapter we will learn everything about screen layouts from positioning options to ensuring our screen designs look great on all devices. This topic is delivered most effectively in a practical format, therefore to begin we will create a screen that will be used to illustrate the configuration options.

Create a Screen

1. From the screens home page create a new screen.
   1. Name, Invoicing.
   2. Template, Tile with Buttons.
2. Add two additional tiles to the screen. Use the Blank - Column template from the palette.
3. The screen should look like this:
   1.  

Flex Layout

PhixFlow utilises CSS flexbox to layout content on a screen. This makes it easy for us to create great looking screen designs with only a few button clicks, and for the more advanced uses the CSS can be customised to suit. Flexbox allows us to specify the size of content and/or have the layout dynamically respond to the size of the screen on a device.

Flexbox is made up of a Parent and Children. The parent determines how the child items are positioned. In the example we created, there is a Tile Container which is the parent, and tiles which are the children. Lets look at the options 

Direction

The first option is the Flex-Direction, simply called Direction in PhixFlow. This is set on the parent object. By enabling this option PhixFlow automatically sets up the flex layout, and the direction of flow of the children items is set. This is illustrated below:

Row  

Column

To see this in PhixFlow:

1.  In the layers section, click on the Tile Container.
2. The properties one, click on the Styles tab.
3. Scroll Down until you see the flex options:
   1. 
4. Change Direction to Column, and click 

   Insert excerpt
   _finish _finish nopanel true

   .
5. Switch the option back to Row and save the change.

Wrap

Flex wrap is applied to the parent and it lets the child objects know what to do if they do not all fit on one line. By default the children will try to fit onto one line. With no-wrap set content will stay on a single line, with wrap enabled content is allowed to wrap around as needed to be displayed. This is illustrated below. The screen size, content, size and minimum sizes set on the child items will determine if they will fit on one line. We will look at these settings later in this chapter.

To see this in PhixFlow:

1. The Tile Container is set to wrap.
2. Click on Tile and set its width to be 80%. As illustrated below:
   1. 
3. This does not leave sufficient space for the remaining tiles so one of them wraps to the next line. 
   1. This is caused as there is a minimum width (min-width) set on the tiles of 130px.
4. If you have a large monitor you may need to set the Tile container to be larger until the tiles wrap.
5. Remove the size settings applied.

Justify and Align

These settings determine how the child items will layout within a parent, they are analogous to the settings in a Word document and how text is positioned. The options available and how they are applied is directly linke dto linked to the Direction property, for . For example Justify = Flex Start, applied to a row will move start the child items from the left where as if applied to a column the child items start at the top. Here are the descriptions for each property.

Once you have read through them, try them out on the example screen we created at the start of this chapter.

• Flex Start: items are packed toward the

• start of the flex-direction.
• start: items are packed toward the start of the writing-mode direction.
• • Image Added
• Flex End: items are packed toward the end of the
 writing-mode direction.left: items are packed toward left edge of the container, unless that doesn’t make sense with the 
• flex-direction
, then it behaves like start.
• right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.
center
• .
  • Image Added
• Center: items are
centered
• centred along the line
space-between
• .
  • Image Added
• Space Between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-aroundspace-evenly
• . 
  • Image Added
• Space Around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
• • Image Added
• Space Evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal
.

Responsive Design

Min/Max Sizes

Padding

Margin

Background Images

Design Approach
• .
  • Image Added
• Baseline: items are aligned such as their baselines align
  • Image Added
• Stretch: fill the container perpendicular to the Direction, respecting the min and max sizes of the children.
• Image Added

Auto Size

Auto Size makes the child objects take up the available space in the Direction of the flex box. Unlike the options we have seen so far this particular option is set on the child objects.

To see this in practice:

1. Select Tile 2 on the Invoicing screen.
2. In the Styles tab, scroll down to Auto Size, and untick this option.
3. Save your changes, the screen will appear as follows:
   1. Image Added

Auto Size is very useful in making the layout adjust to fit the screen. Removing Auto Size the layout will adjust to fit the size of its content. This is an important distinction. Auto Size is screen centric and no Auto Size is content centric. 

Min/Max Sizes

Min and Max sizes come in the form of Heights and Widths, they define the constraints of the items on a screen. They are especially important in controlling the look and feel of your screen content and how they display on different screens. This is because while many external factors can manipulate content, such as Flex Box Stretch, min and max sizes are respected so that content will not shrink below the min size and will not expand beyond the max size.

The syntax for applying min and max sizes are as follows, and these are case sensitive:

Syntax for CSS Property	Values	Examples
minWidth	can be px, %, calc();	100px
maxWidth	can be px, %, calc();	50%
minHeight	can be px, %, calc();	calc(40% + 20px);
maxHeight	can be px, %, calc();	as above

Padding 

Padding is used to put space around the content within an area. The key concept here is the padding is placed within the area. This is illustrated below. 

Image Added

Margin

Margin is used to make space outside an area.. The key concepts is it will create space between the item and items surrounding it. As illustrated above.

Responsive Screen Design

W3C Schools defines how a website/screen responds as "...about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices.". By controlling how a screen adapts to a different screen we can ensure our web applications are fit for purpose. A classic example of this is how will the screen look on laptop vs a mobile phone?

By combining the options we've discussed so far we can achieve a responsive screens. The Serene Grey template is designed to be responsive already, however you may wish to manipulate how it responds to better suit your requirements.

Our screens are designed to use tiles to house content. We will create an example screen layout that combines auto size and minWidth to space content out.







Background Images