Most applications have a common set of branding e.g. colours, fonts, and tinting common controls. Prism provides support for this with styles.
Styles enable you to declare reusable values for any attribute within a layout. You can also declare application-wide styles that affect the overall styling of your application.
All of the styles within your application are contained within a
styles.xml file. Prism supports platform-specific files just like with layouts, e.g. on iOS it will look for the most specific styles file
An example of a basic styles file is as follows:
<style> <home-screen> <background-color>#000000</background-color> </home-screen> </style>
As you can see with the above example, we have one style we can use:
home-screen. We can apply this style in our layout like so:
<layout> <view id="homeScreenBackground" style="homeScreen" /> </layout>
Style names are automatically converted from hyphen-case to camelCase.
We can also nest styles and mix properties with nested styles:
<style> <home-screen> <background-color>#000000</background-color> <posts> <item-layout>post-list-item</item-layout> </posts> </home-screen> </style>
We can apply these styles in our layout like so:
<layout> <view id="homeScreenBackground" style="homeScreen"> <list style="homeScreen.posts" /> </view> </layout>
Each platform provides its own concepts of tinting/branding system controls:
As observed this isn’t consistent per-platform. Prism approaches this by allowing you to declare application-level colours to be applied to system elements outside of the scope of your layouts. For example:
<style> <application> <primary-color>#FF0000</primary-colour> </application> </style>
The application style supports declaring the following properties:
In this guide we’ve learnt how to declare styles in Prism to apply common branding across your application. In the next guide, we’ll run through how to build a more complex application.