FontSize¶

FontSize element is an element with two fields:

example

<input type="number" name="size">
<select name="unit">
    <option value="1">px</option>
    <option value="2">%</option>
    <option value="3">rem</option>
</select>

font-size

Build-in Validators¶

Element validates:

unit: should be 1 (px), 2 (%) or 3 (rem)
size: number should be int if unit is px, float - if unit is % or rem.

Available Validators¶

Element does not have available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "fontSize",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : {
    "<element_defaultValue_unit>": string,
    "<element_defaultValue_size>":  int|float,
  }
}

example

{
  "type" : "fontSize",
  "name" : "baseTextSize",
  "label" : "Base text size",
  "labelDescription" : "Changes base text size",
  "isRequired" : false,
  "isHidden" : false,
  "defaultValue" : {
    "unit": 1,
    "size": 20
  }
}

Element value¶

Element has different value format depending on location in the system

The format of this element's value differs depending on where it is used in the system.

In SVE "defaultValue" and "value" are arrays:

example

{
  "type" : "fontSize",
  "name" : "baseTextSize",
  "label" : "Base text size",
  "labelDescription" : "Changes base text size",
  "isRequired" : true,
  "isHidden" : false,
  "defaultValue" : {
    "unit": 1,
    "size": 20
  },
  "value" : {
    "unit": 1,
    "size": 24
  }
}

Value in twig is converted to a string:

example in twig

<p style="font-size:{{ moduleConfig.baseTextSize }}">Some text here</p>

result in html

<p style="font-size:24px">Some text here</p>

And the same in css (less variables defined by user have the prefix "skin_" added):

example in less

.class-example {
  font-size: @skin_baseTextSize;
}

result in css

.class-example {
  font-size: 24px;
}