Skip to main content

Layer Styles

There are some attributes that are repeated several times within a configuration, such as colors and fonts. To reduce redundancy, layer styles can be created. Their structure is based on CSS and they provide the possibility to set attributes to layers that meet certain criteria.

File structure​

Every file in the ./layer_style directory is a JSON file with two fields: name and content. The name is the selector of the specific style, while the content contains the attributes that are to be set.

Example​

{
  "name": ".fullSize",
  "content": {
    "constraints": [
      {
        "type": "pos",
        "x": "0",
        "y": "0"
      },
      {
        "type": "size",
        "width": "100%",
        "height": "100%"
      }
    ]
  }
}

Selectors​

There are three kind of selectors: type, class and name.

Type​

To change every layer of a specific type, the type is the name of the layer style. E.g. color or text.

Class​

To change only the layers of a class, the class name preceded by a dot is the name of the layer style. E.g. .fullsize or .bigText.

Name​

To change only layers that have a specific name, the name preceded by a # is the name of the layer style. E.g. #title or #firstName.

Examples​

Set the font for all text layers.

{
  "name": "text",
  "content": {
    "font": "Roboto-Regular"
  }
}

Set the font size of the class bigText.

{
  "name": ".bigText",
  "content": {
    "fontSize": "30pt"
  }
}

Set the font size for layers with the name title.

{
  "name": "#title",
  "content": {
    "fontSize": "35pt"
  }
}