Styles

Style unit

Style units can be numeric or string. If numeric it will be measured as pixels. Otherwise, specify unit in a string, e.g. 100px, or 1.5em, etc.

Styles object

Styles to be applied to the object and/or children. Local styles will override any global styles. Some tile will not used some of the styles as it would caused a redundancy.

Name	Description
height	height in pixel for the object, e.g. "height": "100px", if there's platform specific, add platform suffix, e.g. "height-css": "100vh"
width	height in pixel for the object, e.g. "height": "100px"
color	color
margin	margin, subset of css (top right bottom left), e.g 10px 5px 10px 5px
padding	padding, subset of css (top right bottom left)
padding[Location]	paddingTop, paddingRight, etc.
margin[Location]	marginTop, marginRight, etc.
border	border, subset of css, e.g. "border": "1px solid #ff0000" or "border": "solid"
borderLeft, borderRight, ...	side specific border
borderRadius	radi for the border, e.g. "borderRadius": "10px" or "borderRadius": "10px 25px" or "borderRadius": "10px 25px 10px 25px". See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
backgroundColor	background color
boxShadow	xoffset yoffset blur? spread? color normal
fontSize	Font size
lineHeight	Line height multiplier where 1.0 is 1x the natural height of the text, 1.5 is 50% larger, ect.
fontFamily	SourceSansSerif, OpenSans, NotoSansJP, MochiyPopOne, Lato, RecoletaAltSemiBold, GothamBold, GothamBook
transform	transform object
backgroundImage	image url
backgroundImageFit	cover, contain, fill, fitWidth, fitHeight
backgroundImageAlignment	center, centerLeft, centerRight, topRight, topCenter, ...
backgroundImageResize	optimize - if set will optimize size for device
gradientByName	gradient fill using named gradients found at https://webgradients.com/
alignment	topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
shadow	Drop shaddow for text; object
decoration	strikethrough, underline, overline

Shadow objects

• offset: x, y offset
• blur = bur px
• color = hex color

Transform objects

• kind: translate, rotationX, rotationY, skewX, skewY
• translate = x, y, z
• rotationX, rotationY = radians
• skew, skewX, skewY = alpha, beta

Style example

{  
  "styles": {
    "root": {
      "backgroundColor": "#fff"
    },
    "element1": {
      "boder": "1px solid #ddd"
    }
  },
  "classes": {
    "root": "text-left"
  }
}