This page is for application designers who want to know how style settings are applied.
Overview
When applying styles, it is possible to set a value globally, using a shared style, or specifically on the object. PhixFlow applies the CSS in a specific order, with the values set at the object level overriding those set globally. This is explained in the following video.
Where to Apply Styles
Every layout component has its property tab. This includes sections:
- Shared Styles
- Styles
- CSS Properties
These provide options to set the common style settings. To set other options, use CSS Properties where you can specify a CSS tag and its value
You can apply styles at
Object-level - only apply to the selected object. This means it applies only to the object. Object-level settings override anything set in shared styles Hard to update across an application
Global-level - share styles, reusable, consistent look and feel. Update the source and all occurences get updated across application. Remember to test your changes and check that they look OK in all places.
You can easily drag a CSS property you have created, and you can open the shared style and drag the CSS Property to it.
Style Order
Object level styles override Global level
Styles cascade down (CSS = Cascading Style Sheet) from the global to the object level
It is possible to set different information for the same style, in Shared Styles and directly on a layout component. PhixFlow applies styles in the following order:
- Shared Styles - global
- CSS Properties - object
- Style Settings - object
- Conditional Formatting - global - shared style
- Position Settings - object level
Conditional formatting rules - for example to show or hide a button
Expressions
