Styles Overview

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

Maestro allows you to create and modify styles that can then be used to attach visual attributes to various designs and components. You can do this by using the Maestro editor Style pane, the built-it style editor, or directly manipulating CSS or LESS configuration files in your IDE. In any case, to create well-designed and efficient styles, you must have good working knowledge of CSS.

Each design, such as a form or a component, consists of the following files that define its looks and feel as well as functionality:

• CSS - defines design’s look and feel using CSS syntax
• HTML - defines the design’s structure
• LESS - defines design’s look and feel using LESS syntax
• PNG - design’s icon in the Palette pane
• JSON - defines design's properties and attributes. For more information, see Create a Custom Native Component JSON File.

Each style has the following configuration files:

• JSON - defines style's properties and attributes in the style.json file
• LESS- defines style's LESS in the style.less file

Style Structure

Let's look at a typical JSON and LESS style configuration to get some ideas how a style is defined.

A shared library can have several styles defined. Let's examine the Avalon Footer Text style. It has 2 files: style.json and style.less.

JSON

The JSON configuration example is shown below:

{
	"block": {},
	"file": "style.less",
	"label": "Avalon Footer Text",
	"widgets": [
		"text-display"
	]
}

The JSON properties are:

• block -
• file - a LESS or CSS file specifying the component's style.
• label - a text describing the component. This test is shown in the list of all resources.
• widgets -

LESS

Maestro adopts the LESS syntax to define components' styles, so you can take advantages of all great features it provides, for example, variables. The typical style is shown below.

form[name='form'] {
  .avalon-footer-text {
    padding: 5px 0;
    font-family: @ux-default-font-family;
    font-size: 11px;
    color: @ux-tertiary-contrast;
    
    // Small devices
    @media (max-width: @screen-md) {
      width: 100%;
      text-align: center;
    }
  }
}

Most of the styles start with the LESS [attribute] selector, for example, form[name='form'] for styling forms without class or ID.

You are encouraged to use variables to specify values of some style's properties. We recommend using Theme Options to look up and define variables, for example, @ux-default-font-family. Maestro editor comes with a large number of preset variables. Each template has its own set of variables. Our latest Avalon template provides the most comprehensive set of variables, so we recommend using it.

It could be tempting to create a new variable for each style's property to make the style very configurable and re-usable. However, we recommend creating a new variable only if it is going to be used in several places more then once. Otherwise, it can significantly increase number of definitions in Theme Options so you will spend more time looking for values and maintaining them.

The Maestro editor allows you to include CSS variables into a form during the build, so they can be updated at runtime.

Next, learn how to create a style.