Styling widgets

You can use the full functionality of CSS when styling your widgets. In addition to standard CSS, you can also style your widgets using LESS.

There are two ways of styling your widgets:

• Inline styling
• Separated styling

Ground rules and recommendations

There are a few ground rules to consider when styling widgets:

• Never use IDs, always use CSS classes.
• Use separated styles over inline style attributes as much as possible.
• Try to parametrize the CSS styles.

Using CSS classes over IDs

The ID attribute of HTML objects are supposed to be unique on a single HTML page which may be problematic if the widget is used several times on a single sheet. Therefore, CSS classes should be used instead.

Do not use IDs

<div id="my-object">
    Your custom content ...
</div>

#my-object {
    /* your custom styling */
}

Do use CSS classes

<div class="my-object">
    Your custom content ...
</div>

.my-object {
    /* your custom styling */
}

Inline compared with separated styling

You can style all your HTML elements using inline styling, but it is recommended to separate your styling code from your HTML code. Separated styling is preferred because:

• It is easier to maintain
• It is easier to reuse
• It makes it easier for others to understand and read the HTML

Inline styling

Inline styling can be used but is not recommended because of the reduced maintainability and readability of your HTML.

Example: Inline styling

<div style="color:red;font-weight:bold;">
	This is my Widget
</div>

Separated styling

If you use the separated styling approach, you achieve the same result as in the inline styling example above by declaring the styling in the CSS editor.

Example: Separated styling: HTML

<div class="myClass">
	This is my Widget
</div>

Example: Separated styling: CSS

.myClass {
    color:red;
    font-weight:bold;
}

Parametrized CSS styling

You can use dynamic data binding inside the CSS/LESS definition.

Dynamic CSS properties

/* settings.foreColor = #efefef */
.myClass {
    color: {{settings.foreColor}};
}

Styling with LESS properties

/* layout.property1 = #efefef */
@color: {{settings.foreColor}};

.myClass {
    color: @color; /* Use the Less variable */
}

What is LESS?

LESS is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions, and many other techniques that allow you to make CSS that is more maintainable, themable, and extendable.

LESS