Appendix

This appendix outlines the contents introduced in the Style, Themes, and Templates Tutorial. It also provides some links to more in-depth documentation. Return to this document any time you want to review how to customize your UI.

Airkit Studio

• App Preview: Preview the application flow from the perspective of a user

• Web Flows Builder: Create and modify the UI

• Media Library: Upload assets, including pictures and custom fonts, for use within the application

• Theme Builder: Make stylistic changes that apply throughout your entire application.

Kitcloud Templates provide you with a complete Journey flow.

Once selected, Kitcloud Templates can be edited just like any other Airkit application. They are made out of the same component pieces.

• Label Web Controls display text, and the text can be edited in the Inspector, under Control Properties > Text

  • Expanding the Expression Editor allows you to define your text with Airscript, Airkit's internal programing language specialized for data manipulation.

You can define headers for your applications by changing the Page Layout.

Application headers are created in the Web Flows Builder, under Page Layout.

• Mobile Layouts define how you application appears on mobile devices.

• Desktop Layouts define how your application appears in browser windows.

• Page Layouts consist of nested Containers, including a special one designated Main Content. This is the Container that holds the contents of the Web Page. Navigating to a new Web Page changes what Main Content is displayed, but will otherwise not change any aspect of the Page Layout, which is applied to the application universally.

  • Headers are defined by inserting Web Controls (such as Labels and Images) in Containers above the Main Content. For more, see Creating an App Header.

Theme Builder allows you to style Variants.

A Variant is a set of styling properties for a specific Web Control, similar to a class in CSS. Every Web Control has associated Variants: cosmetic variations that appear differently but function identically.

Theme Builder also allow you to modify app-wide defaults, such as the default colors that are used to define Variants across different Web Controls.

Use the Media Library to store custom assets for use throughout your application.

Valid assets include everything from pictures and GIFs (which will be available for selection in Image Web Controls) to Custom Fonts, which will be available for selection when changing the styling properties of a Font.

Bind variables to styling components and apply animations in order to create dynamic, custom UI components.