CSS helper classes
CSS helper classes are snippets of code that introduce minor formatting changes to your UI. If your application has many formats of the same type, and these formats vary only slightly, using CSS helper classes can save you development time by limiting the number of customized skin formats.
Purpose of CSS helper classes
CSS helper classes carry small amount of formatting information to help you make incremental changes to the look of the UI. For example, the text-italic helper class converts all text in the element to italics. If you want to use an italicized font just a few times in your application, you can apply a helper class to the target element instead of creating a separate component style. This approach reduces the size of the CSS file for the application, which improves the application load time.
Out-of-the-box and custom CSS helper classes
Pega Platform includes a variety of predefined helper classes that you can apply to cells, layouts, or both cells and layouts. To meet your particular business needs, you can also create custom helper classes. For more information, see Reviewing CSS helper class definitions and Creating CSS helper classes.
Skin inheritance
If you want to use predefined CSS helper classes, ensure that your application skin
inherits from the pyEndUser skin (for UI Kit applications) or
CosmosSkin (for Cosmos applications). Alternatively, you can add the
py-common-helper-classes.css file to your application skin. For more
information, see Attaching a CSS to the skin.
- Skins
Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.
- Updating the UI Kit in your application
Ensure that your application includes a modern, responsive, and consistent UI by updating the out-of-the-box UI Kit layer in your application stack.
- Updating the Cosmos theme in your application
Build your application by using the latest UI tools. By ensuring that the Cosmos theme ruleset is up to date, you provide your application with a modern and responsive interface.
- Managing Cosmos UI settings in case designer
Adjust the Cosmos-based user interface of your application to the needs of your organization. By changing Cosmos settings, you can control case-level fields and case behavior to make the interface cleaner or more informative, according to your preferences.
- Uploading custom font files
Ensure that your user interface meets the branding requirements of your company by adding new fonts to Pega Platform. Your custom font files can comprise standard fonts or icon fonts, which you can then add to the default icon set for your application.
- Login screen customization
You can customize the appearance of the login screen and other screens that unauthenticated users access, to maintain design consistency with your company's style guidelines.
- Creating CSS helper classes
Make quick adjustments to the look and feel of your UI by creating a CSS-based helper class that you can use throughout your application. Helper classes style a single UI element, such as a control, and do not affect the appearance of other elements of the same kind, even if those elements use the same style format.
- Reviewing CSS helper class definitions
Save development time and bring greater consistency to the look and feel of your applications by being familiar with the standard Cascading Style Sheet (CSS) helper classes that are available for making minor changes to the behavior or styling of cells and layouts.
- Adjusting cell styling by using CSS helper classes
Apply a Cascading Style Sheet (CSS) helper class to a cell to alter its default styling or behavior in a small way, without creating a new skin format. For example, use a helper class to center an element in a cell.
- Adjusting layout styling by using CSS helper classes
Apply a Cascading Style Sheet (CSS) helper class to a dynamic layout to alter the default styling or behavior in a small way, without creating a new skin format. For example, use a helper class to apply twice the standard margin to the right side of an item in the layout.
Previous topic Managing Cosmos UI settings in case designer Next topic Creating CSS helper classes