Skip to main content


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

Best practices for styling your application

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Build a visually appealing and intuitive UI by ensuring that you have well-defined and comprehensive presentation settings in your application.

You control the styling of your application by modifying the presentation settings in the application skin. The skin separates the content of your application from its presentation, so that you can reuse your configurations and maintain a consistent UI design. For example, you can customize the elements of the skin to match your company branding and ensure that the styling is uniform throughout your application.

Follow the best practices for using the skin to make the styling process more convenient:

  • Ensure that your application inherits styling from the out-of-the-box skin rule.
    The default pyEndUser rule should be the base on which you build the styling for your application.
  • Define your skin at the application level, so that you can use it across your portals for a consistent and efficient design.
  • For mobile applications, consider creating a separate skin that includes only the styles that you need.
  • Disable unused components and formats in the skin to reduce performance impact.
  • Set base font, background and layout settings.
    With base settings, you achieve consistency across your UI at a basic level with minimal effort.
  • Use existing component styles in the skin as much as possible.
    Create new styles only for widespread and repeatable patterns in your application.
  • Use meaningful and unique names for new styles and mixins.
  • Provide detailed usage instructions for custom styles and mixins.
  • Create mixins that combine styles from all mixin categories for related settings.
    For example: Create one mixin for border, text, and background colors to reduce granularity and make future color modifications more convenient.
  • Create a general mixin in every mixin category from which more specialized mixins can inherit baseline settings.
    For example: Create a general typography mixin with font family settings and ensure that heading mixins inherit from the general mixin.
  • Add style sheets on the skin level instead of the harness level.
    Skin-level style sheets reduce the number of distinct CSS files that the system has to download and parse.
  • Use the skin and CSS helper classes instead of inline CSS styles.
    Inline styles are a performance risk and affect maintenance.

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