Servoy supports the use of HTML cascading style sheets (CSS 3.0) for styling the applications. In order to allow a more powerful way to interact with CSS syntax Servoy not only contains a pre-filled default CSS file but also implements also support a compiler for Less files.

...

CSS is a plain text file that contains the style that is applied to each every component that shows can be present in a form and the style of the form itself.

...

• Adds to the consistency of the user interface; form elements across the application can use the same styles.
• Gives the developer to make style changes over many/all forms by changing a single value in the CSS.
• Style sheets can be used over multiple applications, adding consistency to the all the company's applications.
• Adds consistency to an application in team development, making it easier for development teams to use the same styling on all forms.
• Style sheets can be changed programmatically, allowing a developer to change styles to different users' taste or to have periodic style changes in their applications. See overrideStyle function for more details.

Less Overview

Less (stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS that that helps you write .css that is more dynamic. It supports variables and other helpful concepts. In Servoy Developer the .less file will compile  into an actual .css automatically. For a detailed documentation about Less language see the Official Documentation for Less.

Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly and is the suggested approach for a smart, consistent and modern application styling.

• For detailed documentation on Less language features, see Features

  
  

  Code Block
  title Less sample
  // import of the custom servoy theme properties that will import the hidden servoy theme, this imported file is for customizing the default servoy theme properties @import 'custom_servoy_theme_properties.less'; // Add your custom less/css to this file you can use the same less properties that are specified in the above properties.less

  
  

Creating a Style

To create a style in Servoy:

...

1. Click on Styles under the Resources project in the Solution Explorer and do one of the following:
   1. Select the style desired (shown in the Solution Explorer list view) and click on the Open style button in the Solution Explorer list view toolbar.
   2. Double click the style desired.
   3. Right click on the style desired and select Open style from the menu.
2. The style will open in the center of the Workspace in an editor view.

Less Overview

Less (stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS that that helps you write .css that is more dynamic. It supports variables and other helpful concepts. In Servoy Developer the .less file will compile  into an actual .css automatically. For a detailed documentation about Less language see the Official Documentation for Less.

Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly and is the suggested approach for a smart, consistent and modern application styling.

For detailed documentation on Less language features, see Features

...

...

Structure of the Style Sheet

...