Skin rules

Use the skin to specify the presentation of your content. You can style all presentation elements of your interface in the skin, including typography, borders, backgrounds, layouts, and UI placement and alignment. By defining presentation attributes in the skin, you separate the content that is defined in sections and harnesses from its presentation. This ensures greater consistency and promotes reuse.

You can define a single skin for your application, ensuring that all portals are presented in the most consistent manner.

Mixins and style formats

The skin is comprised of mixins and style formats.

  • Mixin —A reusable typography, border, or background style, or combination of these styles, that you can use when defining other mixins and style formats for components. Define mixins on the Mixins tab in the skin.

  • Style format —You can define style formats for components, such as dynamic layouts, or controls, such as buttons and links. You can define multiple style formats for each component, for example, numerous button style formats. Define style formats for components on the Components tab; reference the style formats in property panels for sections, harnesses, and controls.

    To create a fully extensible skin, define mixins and use them to define other mixins and style formats for components. You can create multiple style formats for many components. If necessary, you can create custom styles and attach additional style sheets.

When to use a CSS helper class instead of changing a style format

If your application has many formats of the same type, such as inline or stacked formats, and these formats vary only slightly, you might benefit from using CSS helper classes. Applying a CSS helper class to a layout or cell saves development time, reduces maintenance work (by limiting the number of customized skin formats), and improves the consistency of your application's look and feel. By avoiding the introduction of unnecessary static content, you also improve your application's initial loading time.

To analyze your existing formats, review the My Formats section on the Component styles tab of the Skin form.

For more information, see CSS helper classes.

Skin references

Skin rules are associated with an application and a portal. A portal can refer to the skin specified in the application or to a different skin. Setting the portal skin to use the skin associated with an application means that all portals in an application can use a single skin. This enables greater reuse and consistency across your application.

If you do not specify a skin for your application, the default end user skin is applied.

To view the skins in use by the current and built-on applications and the access groups and operators that use them, see Accessing a skin.

Skin inheritance

Skin inheritance allows formats and mixins of a parent skin to be passed down to a dependent skin. You can add a parent skin or set skin inheritance when you create a new skin.