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.
- 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.
- 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.
- 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.
- 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.
Previous topic Updating the UI Kit in your application Next topic Adjusting layout styling by using CSS helper classes