Skip to main content


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

Creating mixins

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Build a system of style patterns that you can reuse across the user interface for improved design consistency. By using mixins, you can store the visual characteristics of your interface in small, complementary clusters, and define formatting not only for individual components, but also for scenarios that extend to many contexts.

For example, you can create a mixin that you want to apply whenever the user approves an action. You can then associate that mixin with all the controls that the application uses to get approval from the user, such as buttons or checkboxes.

  1. In the navigation pane of Dev Studio, click Records.
  2. Expand the User Interface category, and then click Skin.
  3. Open the skin that you want to edit.
  4. On the Mixins tab, click the My Mixins tab.
  5. Under the header that represents the category for the mixin that you want to create, click Create new mixin.
    For example: To create a composite mixin for approvals, under Combinations, click Create new mixin.
  6. In the Create new mixin window, provide a meaningful name and a description for the format, and then click Submit.
  7. In the settings pane in the middle of the window, define the mixin.
    For example: To create a mixin with bold text, no rules for borders, and a green background, perform the following steps:
    1. In the Text section, select Custom styles, and then set the Font weight setting to Bold.
    2. In the Font color field, enter #FFFFFF.
    3. In the Border section, select None.
    4. In the Background node, select Custom styles, and then set the Type setting to solid.
    5. In the Color field, enter #008000 (green).
    Sample mixin configuration
    Configuration for a green background and white bold font.
  8. Optional: To add CSS-based formatting to the mixin, perform the following actions:
    1. Expand the Additional styles node.
    2. Click Add additional styles, and then define the CSS attribute and value pair that you want to use to format the component.
      For example: To change the default font color to white, in the Typeface settings section, in the Attribute field, enter color, and set the Value field to white.
  9. Click Save.

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