Tachons for React Native

Tachons for React Native brings functional styling to react-native. This module uses naming convention defined by Tachons and comes with theming support.

Advantages

• Less code
• No need to maintain a separate stylesheet
• No need to find a proper name for every component you want to style
• Looking at a component tells you exactly how it looks, it's all in one place.
• And more

Theming Support

theme.js

import { addTheme, setTheme } from 'tachyons-react-native'

// the first theme is considered to be the default theme
addTheme('light', {
  primary: '#19AEA2',
  primaryText: '#464646',
  secondary: '#464646',
  ternary: '#F8FAFE',
  accent: '#FF5762',
  divider: '#D1D1D1',
  shadow: '#F8F7F7',
  page: '#F0f0F0',
  card: '#FFFFFF',
  success: '#7CBB00',
  error: '#F65314',
  navigation: '#565A5C',
  title: '#474747',
  subtitle: '#82898D',
  description: '#595959',
  placeholder: '#A2A4A5',
  border: '#DADADE',
  transparent: 'transparent'
})

// second theme if you need
addTheme('dark', {
  primary: '#464646',
  .... 
})

// call setTheme to set default theme
setTheme('dark')

App.js

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'

import './theme'
import { styles as s } from 'tachyons-react-native'

export default class App extends React.Component {
  render () {
    return (
      <View style={[s.flex, s.alignCenter, s.justifyCenter, s.primaryBg]}>
        <Text style={[s.tc, s.b, s.i, s.ba, s.primaryText]}>Open up App.js to start working on your app!</Text>
      </View >
    )
  }
}

Live theme switching using withTheme

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'

import './theme'
import { styles as s, withTheme } from 'tachyons-react-native'

export default withTheme(class App extends React.Component {
  render () {
    return (
      <View style={[s.flex, s.alignCenter, s.justifyCenter, s.primaryBg]}>
        <Text style={[s.tc, s.b, s.i, s.ba, s.primaryText]}>Open up App.js to start working on your app!</Text>
        <TouchableOpacity onPress={() => this.props.setTheme(this.props.theme === 'dark' ? 'light' : 'dark')}>
          <Text>Toggle Theme</Text>
        </TouchableOpacity>
      </View >
    )
  }
})

Theme Based Styles

STYLE NAME | STYLES |-------|--------------------------------- ${name} | {"color": ${color}} ${name}TextShadow | {"textShadowColor": ${color}} ${name}TextDecoration | {"textDecorationColor": ${color}} ${name}Bg | {"backgroundColor": ${color}} ${name}Ba | {"borderColor": ${color}} ${name}Bt | {"borderTopColor": ${color}} ${name}Br | { borderRightColor: ${color} } ${name}Bb | {"borderBottomColor": ${color}} ${name}Bl | {"borderLeftColor": ${color}} ${name}Tint | {"tintColor": ${color}} ${name}Overlay | {"overlayColor": ${color}}

Sample Styles (Primary)

STYLE NAME | STYLES |-------|--------------------------------- primary | {"color": ${color}} primaryTextShadow | {"textShadowColor": ${color}} primaryTextDecoration | {"textDecorationColor": ${color}} primaryBg | {"backgroundColor": ${color}} primaryBa | {"borderColor": ${color}} primaryBt | {"borderTopColor": ${color}} primaryBr | { borderRightColor: ${color} } primaryBb | {"borderBottomColor": ${color}} primaryBl | {"borderLeftColor": ${color}} primaryTint | {"tintColor": ${color}} primaryOverlay | {"overlayColor": ${color}}

Style Guide

FLEX

STYLE NAME | STYLES ---------- | ------ flex | {"flex": 1} flex0 | {"flex": 0} flex1 | {"flex": 0.1} flex2 | {"flex": 0.2} flex3 | {"flex": 0.3} flex4 | {"flex": 0.4} flex5 | {"flex": 0.5} flex6 | {"flex": 0.6} flex7 | {"flex": 0.7} flex8 | {"flex": 0.8} flex9 | {"flex": 0.9} noFlex | {"flex": -1} flexColumn | {"flexDirection": "column"} flexRow | {"flexDirection": "row"} flexWrap | {"flexWrap": "wrap"} flexNowrap | {"flexWrap": "nowrap"} flexColumnReverse | {"flexDirection": "column-reverse"} flexRowReverse | {"flexDirection": "row-reverse"} itemsStart | {"alignItems": "flex-start"} itemsEnd | {"alignItems": "flex-end"} itemsCenter | {"alignItems": "center"} itemsBaseline | {"alignItems": "baseline"} itemsStretch | {"alignItems": "stretch"} selfStart | {"alignSelf": "flex-start"} selfEnd | {"alignSelf": "flex-end"} selfCenter | {"alignSelf": "center"} selfBaseline | {"alignSelf": "baseline"} selfStretch | {"alignSelf": "stretch"} justifyStart | {"justifyContent": "flex-start"} justifyEnd | {"justifyContent": "flex-end"} justifyCenter | {"justifyContent": "center"} justifyBetween | {"justifyContent": "space-between"} justifyAround | {"justifyContent": "space-around"}

RESIZE

STYLE NAME | STYLES ---------- | ------ contain | {"resizeMode": "contain"} cover | {"resizeMode": "cover"} stretch | {"resizeMode": "stretch"}

BORDER

STYLE NAME | STYLES ---------- | ------ ba | {"borderStyle": "solid", "borderWidth": 1} bt | {"borderTopWidth": 1} br | {"borderRightWidth": 1} bb | {"borderBottomWidth": 1} bl | {"borderLeftWidth": 1} bn | {"borderWidth": 0} br0 | {"borderRightWidth": 0} br1 | {"borderRadius": 2} br2 | {"borderRadius": 4} br3 | {"borderRadius": 8} br4 | {"borderRadius": 16} brPill | {"borderRadius": 9999} brBottom | {"borderTopLeftRadius": 0, "borderTopRightRadius": 0} brTop | {"borderBottomLeftRadius": 0, "borderBottomRightRadius": 0} brRight | {"borderTopLeftRadius": 0, "borderBottomLeftRadius": 0} brLeft | {"borderTopRightRadius": 0, "borderBottomRightRadius": 0} bDotted | {"borderStyle": "dotted"} bDashed | {"borderStyle": "dashed"} bSolid | {"borderStyle": "solid"} bw0 | {"borderWidth": 0} bw1 | {"borderWidth": 2} bw2 | {"borderWidth": 4} bw3 | {"borderWidth": 8} bw4 | {"borderWidth": 16} bw5 | {"borderWidth": 32} bt0 | {"borderTopWidth": 0} bb0 | {"borderBottomWidth": 0} bl0 | {"borderLeftWidth": 0}

COLOR

STYLE NAME | STYLES ---------- | ------ bBlack | {"borderColor": "#000"} bNearBlack | {"borderColor": "#111"} bDarkGray | {"borderColor": "#333"} bMidGray | {"borderColor": "#555"} bGray | {"borderColor": "#777"} bSilver | {"borderColor": "#999"} bLightSilver | {"borderColor": "#aaa"} bMoonGray | {"borderColor": "#ccc"} bLightGray | {"borderColor": "#eee"} bNearWhite | {"borderColor": "#f4f4f4"} bWhite | {"borderColor": "#fff"} bWhite90 | {"borderColor": "rgba( 255, 255, 255, .9 )"} bWhite80 | {"borderColor": "rgba( 255, 255, 255, .8 )"} bWhite70 | {"borderColor": "rgba( 255, 255, 255, .7 )"} bWhite60 | {"borderColor": "rgba( 255, 255, 255, .6 )"} bWhite50 | {"borderColor": "rgba( 255, 255, 255, .5 )"} bWhite40 | {"borderColor": "rgba( 255, 255, 255, .4 )"} bWhite30 | {"borderColor": "rgba( 255, 255, 255, .3 )"} bWhite20 | {"borderColor": "rgba( 255, 255, 255, .2 )"} bWhite10 | {"borderColor": "rgba( 255, 255, 255, .1 )"} bWhite05 | {"borderColor": "rgba( 255, 255, 255, .05 )"} bWhite025 | {"borderColor": "rgba( 255, 255, 255, .025 )"} bWhite0125 | {"borderColor": "rgba( 255, 255, 255, .0125 )"} bBlack90 | {"borderColor": "rgba( 0, 0, 0, .9 )"} bBlack80 | {"borderColor": "rgba( 0, 0, 0, .8 )"} bBlack70 | {"borderColor": "rgba( 0, 0, 0, .7 )"} bBlack60 | {"borderColor": "rgba( 0, 0, 0, .6 )"} bBlack50 | {"borderColor": "rgba( 0, 0, 0, .5 )"} bBlack40 | {"borderColor": "rgba( 0, 0, 0, .4 )"} bBlack30 | {"borderColor": "rgba( 0, 0, 0, .3 )"} bBlack20 | {"borderColor": "rgba( 0, 0, 0, .2 )"} bBlack10 | {"borderColor": "rgba( 0, 0, 0, .1 )"} bBlack05 | {"borderColor": "rgba( 0, 0, 0, .05 )"} bBlack025 | {"borderColor": "rgba( 0, 0, 0, .025 )"} bBlack0125 | {"borderColor": "rgba( 0, 0, 0, .0125 )"} bDarkRed | {"borderColor": "#e7040f"} bRed | {"borderColor": "#ff4136"} bLightRed | {"borderColor": "#ff725c"} bOrange | {"borderColor": "#ff6300"} bGold | {"borderColor": "#ffb700"} bYellow | {"borderColor": "#ffd700"} bLightYellow | {"borderColor": "#fbf1a9"} bPurple | {"borderColor": "#5e2ca5"} bLightPurple | {"borderColor": "#a463f2"} bDarkPink | {"borderColor": "#d5008f"} bHotPink | {"borderColor": "#ff41b4"} bPink | {"borderColor": "#ff80cc"} bLightPink | {"borderColor": "#ffa3d7"} bDarkGreen | {"borderColor": "#137752"} bGreen | {"borderColor": "#19a974"} bLightGreen | {"borderColor": "#9eebcf"} bNavy | {"borderColor": "#001b44"} bDarkBlue | {"borderColor": "#00449e"} bBlue | {"borderColor": "#357edd"} bLightBlue | {"borderColor": "#96ccff"} bLightestBlue | {"borderColor": "#cdecff"} bWashedBlue | {"borderColor": "#f6fffe"} bWashedGreen | {"borderColor": "#e8fdf5"} bWashedYellow | {"borderColor": "#fffceb"} bWashedRed | {"borderColor": "#ffdfdf"} bTransparent | {"borderColor": "transparent"} black90 | {"color": "rgba( 0, 0, 0, .9 )"} black80 | {"color": "rgba( 0, 0, 0, .8 )"} black70 | {"color": "rgba( 0, 0, 0, .7 )"} black60 | {"color": "rgba( 0, 0, 0, .6 )"} black50 | {"color": "rgba( 0, 0, 0, .5 )"} black40 | {"color": "rgba( 0, 0, 0, .4 )"} black30 | {"color": "rgba( 0, 0, 0, .3 )"} black20 | {"color": "rgba( 0, 0, 0, .2 )"} black10 | {"color": "rgba( 0, 0, 0, .1 )"} black05 | {"color": "rgba( 0, 0, 0, .05 )"} white90 | {"color": "rgba( 255, 255, 255, .9 )"} white80 | {"color": "rgba( 255, 255, 255, .8 )"} white70 | {"color": "rgba( 255, 255, 255, .7 )"} white60 | {"color": "rgba( 255, 255, 255, .6 )"} white50 | {"color": "rgba( 255, 255, 255, .5 )"} white40 | {"color": "rgba( 255, 255, 255, .4 )"} white30 | {"color": "rgba( 255, 255, 255, .3 )"} white20 | {"color": "rgba( 255, 255, 255, .2 )"} white10 | {"color": "rgba( 255, 255, 255, .1 )"} black | {"color": "#000"} nearBlack | {"color": "#111"} darkGray | {"color": "#333"} midGray | {"color": "#555"} gray | {"color": "#777"} silver | {"color": "#999"} lightSilver | {"color": "#aaa"} moonGray | {"color": "#ccc"} lightGray | {"color": "#eee"} nearWhite | {"color": "#f4f4f4"} white | {"color": "#fff"} darkRed | {"color": "#e7040f"} red | {"color": "#ff4136"} lightRed | {"color": "#ff725c"} orange | {"color": "#ff6300"} gold | {"color": "#ffb700"} yellow | {"color": "#ffd700"} lightYellow | {"color": "#fbf1a9"} purple | {"color": "#5e2ca5"} lightPurple | {"color": "#a463f2"} darkPink | {"color": "#d5008f"} hotPink | {"color": "#ff41b4"} pink | {"color": "#ff80cc"} lightPink | {"color": "#ffa3d7"} darkGreen | {"color": "#137752"} green | {"color": "#19a974"} lightGreen | {"color": "#9eebcf"} navy | {"color": "#001b44"} darkBlue | {"color": "#00449e"} blue | {"color": "#357edd"} lightBlue | {"color": "#96ccff"} lightestBlue | {"color": "#cdecff"} washedBlue | {"color": "#f6fffe"} washedGreen | {"color": "#e8fdf5"} washedYellow | {"color": "#fffceb"} washedRed | {"color": "#ffdfdf"} bgBlack90 | {"backgroundColor": "rgba( 0, 0, 0, .9 )"} bgBlack80 | {"backgroundColor": "rgba( 0, 0, 0, .8 )"} bgBlack70 | {"backgroundColor": "rgba( 0, 0, 0, .7 )"} bgBlack60 | {"backgroundColor": "rgba( 0, 0, 0, .6 )"} bgBlack50 | {"backgroundColor": "rgba( 0, 0, 0, .5 )"} bgBlack40 | {"backgroundColor": "rgba( 0, 0, 0, .4 )"} bgBlack30 | {"backgroundColor": "rgba( 0, 0, 0, .3 )"} bgBlack20 | {"backgroundColor": "rgba( 0, 0, 0, .2 )"} bgBlack10 | {"backgroundColor": "rgba( 0, 0, 0, .1 )"} bgBlack05 | {"backgroundColor": "rgba( 0, 0, 0, .05 )"} bgWhite90 | {"backgroundColor": "rgba( 255, 255, 255, .9 )"} bgWhite80 | {"backgroundColor": "rgba( 255, 255, 255, .8 )"} bgWhite70 | {"backgroundColor": "rgba( 255, 255, 255, .7 )"} bgWhite60 | {"backgroundColor": "rgba( 255, 255, 255, .6 )"} bgWhite50 | {"backgroundColor": "rgba( 255, 255, 255, .5 )"} bgWhite40 | {"backgroundColor": "rgba( 255, 255, 255, .4 )"} bgWhite30 | {"backgroundColor": "rgba( 255, 255, 255, .3 )"} bgWhite20 | {"backgroundColor": "rgba( 255, 255, 255, .2 )"} bgWhite10 | {"backgroundColor": "rgba( 255, 255, 255, .1 )"} bgBlack | {"backgroundColor": "#000"} bgNearBlack | {"backgroundColor": "#111"} bgDarkGray | {"backgroundColor": "#333"} bgMidGray | {"backgroundColor": "#555"} bgGray | {"backgroundColor": "#777"} bgSilver | {"backgroundColor": "#999"} bgLightSilver | {"backgroundColor": "#aaa"} bgMoonGray | {"backgroundColor": "#ccc"} bgLightGray | {"backgroundColor": "#eee"} bgNearWhite | {"backgroundColor": "#f4f4f4"} bgWhite | {"backgroundColor": "#fff"} bgTransparent | {"backgroundColor": "transparent"} bgDarkRed | {"backgroundColor": "#e7040f"} bgRed | {"backgroundColor": "#ff4136"} bgLightRed | {"backgroundColor": "#ff725c"} bgOrange | {"backgroundColor": "#ff6300"} bgGold | {"backgroundColor": "#ffb700"} bgYellow | {"backgroundColor": "#ffd700"} bgLightYellow | {"backgroundColor": "#fbf1a9"} bgPurple | {"backgroundColor": "#5e2ca5"} bgLightPurple | {"backgroundColor": "#a463f2"} bgDarkPink | {"backgroundColor": "#d5008f"} bgHotPink | {"backgroundColor": "#ff41b4"} bgPink | {"backgroundColor": "#ff80cc"} bgLightPink | {"backgroundColor": "#ffa3d7"} bgDarkGreen | {"backgroundColor": "#137752"} bgGreen | {"backgroundColor": "#19a974"} bgLightGreen | {"backgroundColor": "#9eebcf"} bgNavy | {"backgroundColor": "#001b44"} bgDarkBlue | {"backgroundColor": "#00449e"} bgBlue | {"backgroundColor": "#357edd"} bgLightBlue | {"backgroundColor": "#96ccff"} bgLightestBlue | {"backgroundColor": "#cdecff"} bgWashedBlue | {"backgroundColor": "#f6fffe"} bgWashedGreen | {"backgroundColor": "#e8fdf5"} bgWashedYellow | {"backgroundColor": "#fffceb"} bgWashedRed | {"backgroundColor": "#ffdfdf"}

POSITION

STYLE NAME | STYLES ---------- | ------ top0 | {"top": 0} right0 | {"right": 0} bottom0 | {"bottom": 0} left0 | {"left": 0} top1 | {"top": -16} right1 | {"right": -16} bottom1 | {"bottom": -16} left1 | {"left": -16} top2 | {"top": -32} right2 | {"right": -32} bottom2 | {"bottom": -32} left2 | {"left": -32} absoluteFill | {"top": 0, "right": 0, "bottom": 0, "left": 0} relative | {"position": "relative"} absolute | {"position": "absolute"}

WIDTH

STYLE NAME | STYLES ---------- | ------ dtFixed | {"width": "100%"} flexAuto | {"minWidth": 0} mw100 | {"maxWidth": "100%"} mw1 | {"maxWidth": 16} mw2 | {"maxWidth": 32} mw3 | {"maxWidth": 64} mw4 | {"maxWidth": 128} mw5 | {"maxWidth": 256} mw6 | {"maxWidth": 512} mw7 | {"maxWidth": 768} mw8 | {"maxWidth": 1024} mw9 | {"maxWidth": 1536} mwNone | {"maxWidth": "none"} w1 | {"width": 16} w2 | {"width": 32} w3 | {"width": 64} w4 | {"width": 128} w5 | {"width": 256} w10 | {"width": "10%"} w20 | {"width": "20%"} w25 | {"width": "25%"} w30 | {"width": "30%"} w33 | {"width": "33%"} w34 | {"width": "34%"} w40 | {"width": "40%"} w50 | {"width": "50%"} w60 | {"width": "60%"} w70 | {"width": "70%"} w75 | {"width": "75%"} w80 | {"width": "80%"} w90 | {"width": "90%"} w100 | {"width": "100%"} wAuto | {"width": "auto"} measure | {"maxWidth": 480} measureWide | {"maxWidth": 544} measureNarrow | {"maxWidth": 320}

FONT

STYLE NAME | STYLES ---------- | ------ i | {"fontStyle": "italic"} fsNormal | {"fontStyle": "normal"} normal | {"fontWeight": "normal"} b | {"fontWeight": "bold"} fw1 | {"fontWeight": "100"} fw2 | {"fontWeight": "200"} fw3 | {"fontWeight": "300"} fw4 | {"fontWeight": "400"} fw5 | {"fontWeight": "500"} fw6 | {"fontWeight": "600"} fw7 | {"fontWeight": "700"} fw8 | {"fontWeight": "800"} fw9 | {"fontWeight": "900"} f1 | {"fontSize": 48} f2 | {"fontSize": 36} f3 | {"fontSize": 24} f4 | {"fontSize": 20} f5 | {"fontSize": 16} f6 | {"fontSize": 14} f7 | {"fontSize": 12}

HEIGHT

STYLE NAME | STYLES ---------- | ------ h1 | {"height": 16} h2 | {"height": 32} h3 | {"height": 64} h4 | {"height": 128} h5 | {"height": 256} h25 | {"height": "25%"} h50 | {"height": "50%"} h75 | {"height": "75%"} h100 | {"height": "100%"} minH100 | {"minHeight": "100%"} hAuto | {"height": "auto"}

LETTER

STYLE NAME | STYLES ---------- | ------ tracked | {"letterSpacing": 1.6} trackedTight | {"letterSpacing": -0.8} trackedMega | {"letterSpacing": 4}

LINE

STYLE NAME | STYLES ---------- | ------ lhSolid | {"lineHeight": 1} lhTitle | {"lineHeight": 1.25} lhCopy | {"lineHeight": 1.5}

OVERFLOW

STYLE NAME | STYLES ---------- | ------ overflowVisible | {"overflow": "visible"} overflowHidden | {"overflow": "hidden"} truncate | {"overflow": "hidden"}

OPACITY

STYLE NAME | STYLES ---------- | ------ o100 | {"opacity": 1} o90 | {"opacity": 0.9} o80 | {"opacity": 0.8} o70 | {"opacity": 0.7} o60 | {"opacity": 0.6} o50 | {"opacity": 0.5} o40 | {"opacity": 0.4} o30 | {"opacity": 0.3} o20 | {"opacity": 0.2} o10 | {"opacity": 0.1} o05 | {"opacity": 0.05} o025 | {"opacity": 0.025} o0 | {"opacity": 0} dim | {"opacity": 1} dimActive | {"opacity": 0.8}

PADDING

STYLE NAME | STYLES ---------- | ------ pa0 | {"padding": 0} pa1 | {"padding": 4} pa2 | {"padding": 8} pa3 | {"padding": 16} pa4 | {"padding": 32} pa5 | {"padding": 64} pa6 | {"padding": 128} pa7 | {"padding": 256} pl0 | {"paddingLeft": 0} pl1 | {"paddingLeft": 4} pl2 | {"paddingLeft": 8} pl3 | {"paddingLeft": 16} pl4 | {"paddingLeft": 32} pl5 | {"paddingLeft": 64} pl6 | {"paddingLeft": 128} pl7 | {"paddingLeft": 256} pr0 | {"paddingRight": 0} pr1 | {"paddingRight": 4} pr2 | {"paddingRight": 8} pr3 | {"paddingRight": 16} pr4 | {"paddingRight": 32} pr5 | {"paddingRight": 64} pr6 | {"paddingRight": 128} pr7 | {"paddingRight": 256} pb0 | {"paddingBottom": 0} pb1 | {"paddingBottom": 4} pb2 | {"paddingBottom": 8} pb3 | {"paddingBottom": 16} pb4 | {"paddingBottom": 32} pb5 | {"paddingBottom": 64} pb6 | {"paddingBottom": 128} pb7 | {"paddingBottom": 256} pt0 | {"paddingTop": 0} pt1 | {"paddingTop": 4} pt2 | {"paddingTop": 8} pt3 | {"paddingTop": 16} pt4 | {"paddingTop": 32} pt5 | {"paddingTop": 64} pt6 | {"paddingTop": 128} pt7 | {"paddingTop": 256} pv0 | {"paddingTop": 0, "paddingBottom": 0} pv1 | {"paddingTop": 4, "paddingBottom": 4} pv2 | {"paddingTop": 8, "paddingBottom": 8} pv3 | {"paddingTop": 16, "paddingBottom": 16} pv4 | {"paddingTop": 32, "paddingBottom": 32} pv5 | {"paddingTop": 64, "paddingBottom": 64} pv6 | {"paddingTop": 128, "paddingBottom": 128} pv7 | {"paddingTop": 256, "paddingBottom": 256} ph0 | {"paddingLeft": 0, "paddingRight": 0} ph1 | {"paddingLeft": 4, "paddingRight": 4} ph2 | {"paddingLeft": 8, "paddingRight": 8} ph3 | {"paddingLeft": 16, "paddingRight": 16} ph4 | {"paddingLeft": 32, "paddingRight": 32} ph5 | {"paddingLeft": 64, "paddingRight": 64} ph6 | {"paddingLeft": 128, "paddingRight": 128} ph7 | {"paddingLeft": 256, "paddingRight": 256}

MARGIN

STYLE NAME | STYLES ---------- | ------ ma0 | {"margin": 0} ma1 | {"margin": 4} ma2 | {"margin": 8} ma3 | {"margin": 16} ma4 | {"margin": 32} ma5 | {"margin": 64} ma6 | {"margin": 128} ma7 | {"margin": 256} ml0 | {"marginLeft": 0} ml1 | {"marginLeft": 4} ml2 | {"marginLeft": 8} ml3 | {"marginLeft": 16} ml4 | {"marginLeft": 32} ml5 | {"marginLeft": 64} ml6 | {"marginLeft": 128} ml7 | {"marginLeft": 256} mr0 | {"marginRight": 0} mr1 | {"marginRight": 4} mr2 | {"marginRight": 8} mr3 | {"marginRight": 16} mr4 | {"marginRight": 32} mr5 | {"marginRight": 64} mr6 | {"marginRight": 128} mr7 | {"marginRight": 256} mb0 | {"marginBottom": 0} mb1 | {"marginBottom": 4} mb2 | {"marginBottom": 8} mb3 | {"marginBottom": 16} mb4 | {"marginBottom": 32} mb5 | {"marginBottom": 64} mb6 | {"marginBottom": 128} mb7 | {"marginBottom": 256} mt0 | {"marginTop": 0} mt1 | {"marginTop": 4} mt2 | {"marginTop": 8} mt3 | {"marginTop": 16} mt4 | {"marginTop": 32} mt5 | {"marginTop": 64} mt6 | {"marginTop": 128} mt7 | {"marginTop": 256} mv0 | {"marginTop": 0, "marginBottom": 0} mv1 | {"marginTop": 4, "marginBottom": 4} mv2 | {"marginTop": 8, "marginBottom": 8} mv3 | {"marginTop": 16, "marginBottom": 16} mv4 | {"marginTop": 32, "marginBottom": 32} mv5 | {"marginTop": 64, "marginBottom": 64} mv6 | {"marginTop": 128, "marginBottom": 128} mv7 | {"marginTop": 256, "marginBottom": 256} mh0 | {"marginLeft": 0, "marginRight": 0} mh1 | {"marginLeft": 4, "marginRight": 4} mh2 | {"marginLeft": 8, "marginRight": 8} mh3 | {"marginLeft": 16, "marginRight": 16} mh4 | {"marginLeft": 32, "marginRight": 32} mh5 | {"marginLeft": 64, "marginRight": 64} mh6 | {"marginLeft": 128, "marginRight": 128} mh7 | {"marginLeft": 256, "marginRight": 256} na1 | {"margin": -4} na2 | {"margin": -8} na3 | {"margin": -16} na4 | {"margin": -32} na5 | {"margin": -64} na6 | {"margin": -128} na7 | {"margin": -256} nl1 | {"marginLeft": -4} nl2 | {"marginLeft": -8} nl3 | {"marginLeft": -16} nl4 | {"marginLeft": -32} nl5 | {"marginLeft": -64} nl6 | {"marginLeft": -128} nl7 | {"marginLeft": -256} nr1 | {"marginRight": -4} nr2 | {"marginRight": -8} nr3 | {"marginRight": -16} nr4 | {"marginRight": -32} nr5 | {"marginRight": -64} nr6 | {"marginRight": -128} nr7 | {"marginRight": -256} nb1 | {"marginBottom": -4} nb2 | {"marginBottom": -8} nb3 | {"marginBottom": -16} nb4 | {"marginBottom": -32} nb5 | {"marginBottom": -64} nb6 | {"marginBottom": -128} nb7 | {"marginBottom": -256} nt1 | {"marginTop": -4} nt2 | {"marginTop": -8} nt3 | {"marginTop": -16} nt4 | {"marginTop": -32} nt5 | {"marginTop": -64} nt6 | {"marginTop": -128} nt7 | {"marginTop": -256} indent | {"marginTop": 0, "marginBottom": 0} center | {"marginRight": "auto", "marginLeft": "auto"} mrAuto | {"marginRight": "auto"} mlAuto | {"marginLeft": "auto"}

TEXT

STYLE NAME | STYLES ---------- | ------ tl | {"textAlign": "left"} tr | {"textAlign": "right"} tc | {"textAlign": "center"}

Z-INDEX

STYLE NAME | STYLES ---------- | ------ z0 | {"zIndex": 0} z1 | {"zIndex": 1} z2 | {"zIndex": 2} z3 | {"zIndex": 3} z4 | {"zIndex": 4} z5 | {"zIndex": 5} z999 | {"zIndex": 999} z9999 | {"zIndex": 9999} zMax | {"zIndex": 2147483647}