Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

CSS helper classes

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

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.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us