Adding New CSS Rules for Custom Widgets

When developing custom widgets, the developer is in complete control of the HTML that is generated for their custom widget and what CSS classes it references. The developer should ensure the CSS is as specific as possible to their widget. The developer must also be aware of how their widget can inherit styling from the Cúram application's default CSS without adding any custom CSS for the widget. The developer has two choices:

• Inherit - Without writing any custom CSS for the widget, default styling (e.g., color) will be applied due to the cascading and inheritance rules of CSS. Choosing this option will mean the widget is subject to changes from any future release of the Cúram application.
• Specific - If the widget has specific styling requirements then ensure they are explicitly defined in custom CSS for the widget. This will help to insulate the widget from changes to the default styling within the application. The recommended approach is to use the features provided by the Custom Widget Development Framework to generate a unique identifier for your widget and apply that to id attribute of the root element. All CSS rules for the custom widget can then be based off this identifier. Consult the Cúram Widget Development Guide for more details.

Every visual aspect (color, font size, borders, margin padding etc.) for a custom widget should be analyzed and the developer should decide on whether it should be inherited or specific. Also, it is impossible to guarantee there will never be impact on custom CSS, even if it is as specific as possible. As a guideline, it would be expected that with minor service pack releases of the Cúram application, the underlying HTML and CSS will not change drastically. However, a major release of the Cúram application may bring a new user interface and with it major changes to HTML structure and CSS. Even if a custom widget has specific CSS, it may need to be updated to adhere to the Cúram application's new look and feel.