Style Indicator System ( SIS )

The Styles Indicator System (SIS) in GenerateBlocks helps users quickly identify the source of style property values.

How It Works

In the Styles tab the SIS displays color-coded-dots next to selectors, responsive settings, style panels, style group labels, and style properties.

Each dot indicates that a style property has a value and the dots color specifies the values origin:

• Local ( Orange Dot )

  A blocks local or global style property contains a value.

• Inherited ( Yellow Dot )

  A property is inheriting its value from a responsive view or parent selector.
  Example 1: Tablet and Mobile responsive views are inheriting Desktop styles
  Example 2: A <a> ( link ) is inheriting its typography from its parent Text Block.

• Global ( Purple Dot )

  A property is set using a global style class.

This visual cue makes it easy to determine whether a block or global style class has style property values and where they come from. This is especially helpful when working with selectors or switching between responsive views.

Selectors and Responsive Views

See figure 1 point 1.

Top-level groups, such as Selectors or Responsive Views, display a single indicator dot if any properties contain a value. If a group contains multiple style sources, the indicator shows the first applicable style in this order:

1. Local
2. Inherited
3. Global

This ensures the most specific style type is always prioritized.

Style Panels

See figure 1 point 2

Individual style panels e.g., Layout, Spacing, Sizing may display all three indicator dots if they contain property values of each style type. This provides a clear overview of the style sources within each panel.

Style Group Labels

See figure 1 point 3

Certain style panels contain groups of related properties, such as Padding and Margin. These group labels may also display all three indicator dots if they include values from each style type.

Unlike parent panels, these dots are interactive. Clicking on a dot opens a pop-over showing the related CSS Rules and includes a link to edit them. For more details, see Viewing and Editing CSS Rules.

Style Inspector Controls

See figure 1 point 4

Any style property with a value displays the corresponding indicator next to its control:

• Local (Orange Dot): Editable directly within the control.
• Inherited (Yellow Dot) / Global (Purple Dot): Displays a placeholder value when possible. These indicators are also interactive buttons, opening a pop-over to view and edit the related CSS Rules.

Viewing and Editing CSS Rules

See figure 2

To view a CSS Rule, click on the dot next to any style property. This action also provides a shortcut to directly edit the value.