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"
  }
}