Use the Mixins tab to define mixins. A mixin is a reusable style pattern.
Mixins can define a reusable typography, border, or background style — or a style that is a combination of typography, border, and background styles.
Mixins enable you to create incremental styling changes which provide a natural cascading of styles. You can reuse mixins in other mixins and component styles. A mixin can inherit styles from other mixins. Components can also inherit styles from mixins. You can reference one or multiple mixins to define the appearance of UI components, such as buttons or links.
Using mixins helps ensure consistency across your user interface, maximize re-use, and minimize future maintenance. You can change mixins at any time. A change to a mixin cascades throughout all elements in the skin that reference the mixin.
You can modify, add, and delete mixins in the following categories:
- Typography — text styling mixin. Mixins in this category can inherit from other mixins containing text styling.
- Backgrounds — background styling mixin. Mixins in this category can inherit from other mixins containing background styling.
- Borders — border styling mixin. Mixins in this category can inherit from other mixins containing border styling.
- Combinations — combination of text, border, or background styles. Mixins in this category can inherit from any other mixins.
If you want to create a mixin that is a combination of text, background, or border styling, add a mixin within the Combinations category. You cannot move a mixin to another category. However, you can re-name existing mixins.
The arrow indicates the currently selected mixin.
Upgrading a pre-7.1 skin
- When you open a pre-7.1 skin, mixins, formerly known as style presets, are automatically placed in the correct category. For example, a style preset containing only text styles displays in the Typography category, while a style preset containing text and background styles displays in the Combinations category.
- Default styles in pre-7.1 skins are set to editable on upgrade.
Specify the Overall Font
Overall Font: specify the default font for all mixins in this skin.
As a best practice, use the Overall Font when defining mixins. If you define the presentation of components using mixins that reference the Overall Font, then you can change the font used throughout the skin in a single location.
Modifying an existing mixin
To modify an existing mixin:
- Determine the type of mixin you want to modify: Typography, Backgrounds, Borders, or Combinations.
- Select the mixin. The selected mixin displays in the middle column.
- Define styles for the Text, Border, and Backgroundelements, as appropriate. Depending upon the configuration of the mixin, you may have the following options when styling each element within the mixin:
| Remove | | remove the styles from the element. You can then add styles or inherit styles from another mixin. |
| Inherit | | remove the style from the element and select another mixin from which to inherit styles for this element. |
| Add Style | | define a style for this element, rather than inherit styles from an existing mixin. |
You can inherit the majority of styles for a mixin from other mixins, and override individual style elements as necessary.
| Text | Define text styling for the mixin by inheriting styles from another mixin or specifying styles for the following: - Font — Select the font family. The font family defaults to (use overall), which is the font you specified in the Overall Font field at the top of the Mixins tab.
- Font Size — Select the font size in pixels (px), points (pts), em (the current font size), or percentage (%).
- Color — Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color.
- Font Weight — Select a font weight from the list.
- Text Decoration — Select a text decoration option from the list, if desired. For example, Underline. The blank selection is the default, for backward compatibility, and indicates that no additional attributes are applied.
- Transform Text — Select a text transformation option from the list, if desired. For example, Lowercase. The blank selection is the default, for backward compatibility, and indicates that no additional attributes are applied.
- Additional styles — Add additional styles to this element by specifying a CSS Attribute and Value. Click Add additional styles to define another CSS attribute-value pair. Click delete to remove an additional style.
If a text element, such as Font Weight, inherits styles from another mixin, you can override the inherited style by clicking Override. You can then define another style for this text element. To remove a style override and inherit styles from the mixin displayed in the Inherits From field, select Remove override. |
| Border | Define border styling for the mixin by inheriting styles from another mixin or specifying styles for the following: - same for all sides — select this check box to specify the same border style for the top, left, right, and bottom borders. Choose from none, solid, dashed, or dotted.
- If you clear the same for all sides check box, select a border type for the Top, Left, Right, and Bottom borders. For each border, you can select none, solid, dashed, or dotted. Specify the pixel width and color of the border, if applicable.
|
| Background | Define border styling for the mixin by inheriting styles from another mixin or specifying styles for the following:
- none — Indicates no background color, similar to setting a transparent background.
- solid — Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color.
- gradient — Select the Direction in which you want to blend the background colors, horizontal or vertical. Specify the Start and End colors of the gradient. Specify a Backup color, in the event that the browser cannot render the gradient.
- Additional styles — Add additional styles to this element by specifying a CSS Attribute and Value. Click Add additional styles to define another CSS attribute-value pair. Click delete to remove an additional style.
|
- A preview of the mixin displays, as you define it, in the preview area on the right.
To preview the mixin in use by the mixins and components that reference it, select a component from the Preview with list on the right. This list displays all the components that reference the selected mixin. After selecting a component in which to preview the mixin, click Details to view a summary of where the mixin is used within the component styles. For example, Mixin text style used in Header>>Expanded Text.
- Click Save. You can now apply this mixin to elements in the skin. See Skin rules— Completing the Components tab.
Defining a new mixin
To create a new mixin, click Add. The mixin is populated with default values.
If you want to create a new mixin that:
- inherits from another mixin, right-click the mixin from which you want to inherit styles, and then click Clone with inheritance. You can override inherited text elements, if desired, and remove inheritance and add styles as desired.
- is a copy of an existing mixin (but does not inherit styles from that mixin), right-click the mixin that you want copy and then click Clone.
Deleting a mixin
You cannot delete a mixin if another mixin or component inherits styles from that mixin. Mixins and components that reference the selected mixin display in the Preview with list on the right.
Update elements that reference the mixin you want to delete — the delete option is not available until you remove all references to the selected mixin.
To delete a mixin, select the mixin that you want to delete and then click Remove from skin. On the dialog that displays, click Delete.
Determining where a mixin is referenced
To preview the mixin in use by the mixins and components that reference it, select a component from the Preview with list on the right. This list displays all the components that reference the selected mixin.
After selecting a component in which to preview the mixin, click Details to view a summary of where the mixin is used within the component styles.
If you upgraded a skin rule from PRPC v5.X-6.2SP2, the Standard Active, Standard Inactive, Sub Active, and Sub Inactive mixins are populated with the values from your Quick Create settings.
About Skin rules
Open topic with navigation