Guidelines

Pre-defined styles can be applied to any element level in the portal. We do not limit which styles can be applied to which container. While a style is attached to an element, it may also affect other elements within, through inheritance. The behavior is similar to CSS when a style has a direct corresponding version in CSS. For example, if ipf-color(#FF0000) is applied at the page level, this color is used for all the text on the page, unless it is overridden at a lower level. On the other hand, if ipf-backgroundcolor(#0000FF) is applied at the page level, only the page gets that background color, not its child elements. These are additional guidelines about pre-defined styles:

  • For styles taking color parameters, the color can be either #rrggbb, rgba[rrr,ggg,bbb,alpha] (decimal values), or transparent.
  • For styles taking length and size parameters, the value is assumed to be in pixel units if no unit is supplied. Otherwise, these units are supported:
    • px - pixels
    • em - 1em is the same as the font size of the element. 1.5em would thus be 50% larger.
    • % - for font size, percentage of the font size the element would have had if no size had been supplied; for width/height, percentage of parent container

    When an explicit unit is used, the unit must immediately follow the number; for example, 42%.

  • If a resource URL begins with http://, it is treated as an absolute path. If it is has a leading forward slash, /, it is treated as a site relative path. If the URL is not absolute or relative, it is treated as a dynamic path, where the same search is performed for the resource in Assets as during resolution of user-defined styles.
  • For styles that allow additional behavior to be specified (for example, behavior when hovering over the element), if this parameter is optional and omitted, the corresponding event will not yield any change from the specified default behavior of the element.
  • If no parameter is passed to a style, the parentheses are not needed.
  • A Tuple or List is an ordered construct beginning with a left square bracket, [, and ending with a right square bracket, ], used to group a number of comma separated values together. Tuples can also be used to group a list of comma separated tuples, which is used in order to disambiguate style parameters.
  • If an element is not rendered, any styles on it will not be active. However, any styles on the wrapping container are still in effect. The container for an element is the location in which the element is rendered at render time.