Introduction

In this chapter we will learn everything about screen layouts from sizing options to responding to screen sizes. 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:
4.  Image Added

Layout

PhixFlow utilises CSS flexbox to layout content on a screen. This makes it easy for us to create great looking responsive layouts to hold our data. flexibility in layouts in a simple and effective manner.

Responsive Design

Min/Max Sizes

Padding

Margin

Background Images

Design Approach