https://github.com/rintoj/tachyons-react-native
Tachons for React Native brings functional styling to react-native
https://github.com/rintoj/tachyons-react-native
Last synced: 8 months ago
JSON representation
Tachons for React Native brings functional styling to react-native
- Host: GitHub
- URL: https://github.com/rintoj/tachyons-react-native
- Owner: rintoj
- Created: 2018-01-26T18:34:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T02:34:59.000Z (over 3 years ago)
- Last Synced: 2025-08-24T04:17:40.682Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 706 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tachons for React Native
Tachons for React Native brings functional styling to react-native. This module uses naming convention defined by [Tachons](http://tachyons.io/) 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](http://mrmrs.github.io/writing/2016/03/24/scalable-css/)
# Theming Support
### theme.js
```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
```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 (
Open up App.js to start working on your app!
)
}
}
```
### Live theme switching using `withTheme`
```js
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 (
Open up App.js to start working on your app!
this.props.setTheme(this.props.theme === 'dark' ? 'light' : 'dark')}>
Toggle Theme
)
}
})
```
## 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}