Theme Cosmos - Design templates: customization and optimization with helper classes

From PegaWiki
Theme Cosmos - Design Templates Customization & Optimization with Helper classes / This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

Theme Cosmos - Design templates: customization and optimization with helper classes

Description Customization guidelines for design templates with the use of CSS helper classes
Version as of 8.5
Application Pega Platform
Capability/Industry Area User Experience

Theme Cosmos - Design Templates Customization & Optimization with Helper classes
This article has been moved over to our Pega Community here in order to align with our larger content strategy. Please update any bookmarks or links that you may have to this location.

Design templates

A design template is a reusable asset that defines a set of layouts for an application. When you create a new section, you can specify a design template for the section and place your controls or other content based on the design. It is a way of separating data from its presentation. Design templates can be used for individual sections or for entire pages.

Design templates offer many benefits:

  • Codify design patterns in your application
  • Ensure the consistency of layouts
  • Allow patterns to be easily reused elsewhere
  • Provide a common language between designers and developers

Helper classes

Applying Helper Classes
Applying helper classes

Helper classes are readily available CSS code snippets, which can be added to sections and controls to style and customize your UI. Pega provides a wide variety of helper classes for styling layouts, spacing, fonts, colors, and so on. Additionally, you can reuse helper classes in multiple UI components. This is an improvement over component style formats which are tied to specific controls or layouts.

For example, in a scenario where you need to remove extra padding from a design template with a default container format, instead of creating a new format with adjusted padding, use the padding-b-0 helper class, which removes bottom padding (see the Applying helper classes image).

Note: Usage of helper classes is a highly recommended approach for styling an application. For more information, see CSS Helper classes

Customization of design templates

Customizing Design Templates with Helper Classes
Customizing design templates with helper classes

Helper classes provide a wide variety of customization options of design templates. By using helper classes you can add extra spacing and margins, or modify the layouts according to your company's UI mockups or custom requirements.

Use case examples

The following examples are helper classes suitable for customizing layouts:

  • flex-col-5, flex-col-6, flex-col-8, flex-col-12 – used to convert a single column inline-layout to 5, 6, 8 or 12 column layouts, respectively.
  • padding-1x, padding-2x, padding-3x – used to add padding to layouts. Helper classes support padding for the top (t), left (l), bottom (b), and right (r) side of the layout. For example, to add padding to the left side of a layout, use the padding-l-2x helper class, and to add padding to the bottom, use padding-b-3x. Helper classes support margins in a similar way, for example, margin-1x, margin-2x, and so on.

We can further customize complex design templates at individual row level, for example, a different column in each row.

Customizing Complex Design with Helper Classes
An example user form with helper classes (flex-space-1 & flex-cell-3) added to controls

The following helper classes have been introduced in Theme-Cosmos:02-01-01 (from Pega 8.5), Theme UI Kit, and Theme-Clarity (from Pega 8.6) to achieve more flexible 2-column and 3-column forms:

  • flex-cell-half – used to size the field to 50% of the column.
  • flex-cell-2 – used to occupy a 2-column width. For example, in a 3-column-inline wrapping template, this helper class makes a field occupy two out of three available columns.
  • flex-cell-3 – used to occupy 3-column width in any number of columns.
  • flex-space-1 – used to give a 1 column-wide right margin to a field.
  • flex-space-2 – used to give a 2 column-wide right margin to a field.

Optimization of design templates

  • Always try to organize your UI into reusable design templates to simplify maintenance and customization.
  • Use helper classes as much as possible and try to avoid nested design templates if the same look and feel can be achieved by using helper classes.
  • Use helper classes to generate empty space, for example, flex-space-1.
  • Create a design template for a specific purpose and try to make it generic enough to be reused wherever applicable.
  • Give a specific name and icon to each new design template to represent its usage and purpose.
  • Properly identify regions inside design templates and name them clearly enough to support the design and its use case.

Reference links