Styling Overview
Last updated
Last updated
The appearance of an application is dictated primarily by building blocks called Web Controls. Each Web Control has an intended function that informs its appearance, but outside of each Web Control's base framework, Airkit provides a plethora of customization options.
Each Web Control has a set of styling properties that can be edited to your liking. While the exact properties that can be styled vary from Web Control to Web Control, there are nevertheless some common patterns in how styling changes are implemented across elements. For more, see Web Control Styling Properties.
Web Controls can be customized using the style properties in the Style tab of the Inspector, which is available when inspecting Web Controls in either the Web Flows Builder or the Theme Builder.
By default, changes made in the Web Flows Builder apply only to the selected instance of the Web Control. This is typically useful when creating Animations, which require the animated styling component to be defined in terms of a variable that is typically limited in scope and thus can't be applied to the whole application. For more, see Animations.
Outside of Animations, it is best practice to tie finalized styling properties to the theme so that they can be reused throughout an application. For more on defining and editing Themes, see Themes and Control Variants.
If you want to apply custom assets, such as fonts, GIFs, or pictures, to your application, this can be done by uploading your Custom Assets to the Media Library. For more on this, see Working with Custom Assets.
On common application of custom assets is using a company logo to define an App Header. App Headers are created by making changes to the Page Layout, which defines the placement of Web Controls inside of Web Pages as a function of screen size. This allows the application UI to remain relatively uniform regardless of the device being used to access it. For more information on Page Layouts and App Headers, see Page Layouts and Creating an App Header, respectively.