Theme Cosmos - Design templates: customization and optimization with helper classes
Theme Cosmos - Design templates: customization and optimization with helper classes
Design templates[edit]
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[edit]
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[edit]
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[edit]
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.
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[edit]
- 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[edit]
https://community.pega.com/knowledgebase/articles/user-experience/85/design-templates