What is a Palette?

A palette contains ready-made template components that you can drag onto a screen canvas to add content. Palette components can be simple, such as a data field. They can also be multi-component layouts that provide sections of a screen with a header, data display and action buttons. Layouts can even be a complete screen. Layouts and components can display data, enable application users to enter data, or can display information from external sites, such as a Google map.

You can create your own layouts and add them to palettes; see Changing or Creating a Palette. However, we recommend you start with the palettes designed by the PhixFlow team. These layouts are designed to create responsive screens that will rearrange to suit the size and aspect ratio of the device on which the application is running. The palettes available to your application are:

• the basic palettes provided with every PhixFlow installation
• the palettes provided by the template package selected when you created the application, for example Serene Grey
• any palettes included in a package that you added to your application; see Package
• any palettes you created for the application; see Changing or Creating a Palette

To use a palette, drag layouts and components onto the screen canvas; see Adding Screen Content. 

If you close the palette tab, in the screen canvas toolbar, click  Palette to reopen it.

Searching the Palette

Use the search box at the top of the palette area to locate template components that contain the text typed in the search box.

Before we look in more detail at using a a palette, it helps to understand that the components of a screen are grouped into containers which form layers, as shown in the following image.

• Click on the image to enlarge it
• Download for printing: PDF Quick Reference Sheet

Moving Components

See Moving Components on a Screen.

Adding Tiles 

The Serene Grey palette includes sections for complete screens and for tiles. The complete screens have tile containers, in which the responsive design settings are configured. When you drag a tile from the palette onto the screen canvas, PhixFlow highlights suitable tile containers where you can drop the tile.

If you create your own screen, to use tiles from the palette, you must first provide a suitable tile container by:

• either dragging in a tile container from the palette
• or adding an area component and setting the responsive design options; see Sizing and Positioning Screen Content.

Adding Components to a Tile 

To add a component into a tile that you have added to your screen, Shift-drag the component from the palette and drop it into the tile.

Changing a Layout Direction 

Tile containers and tiles use the CSS Flex option to specify the layout of contained components as being in either columns or rows. In the palette, the icon for a tile has an arrow to show which direction its contained components will flow.

To change the flow direction:

1. Click on a component on the canvas to find it in the layers panel
2. If necessary, identify the container for the component and its siblings.
3. Right-click the name of the parent and click  Edit.
4. PhixFlow opens the component's  Properties tab
5. Click the  Styles tab and scroll down to the Direction section:
    
6. Set:
   • Direction: either Row or Column. This provides the main axis along which components flow.
   • Wrap: whether or not the content should Wrap around to the next line.
   • Justify: how components align along the main axis. For example, Flex Start aligns a row to the left. 
   • Align: how components align perpendicular to the main axis. For example, Center 
     • for a row: aligns components between the top and bottom of a row
     • for a column: aligns components between the left and right of the column.

See also:

• Component properties
• Sizing and Positioning Screen Content