{"_id":"react-native-stylekit","_rev":"351134","name":"react-native-stylekit","description":"a stylekit for react native","dist-tags":{"latest":"1.0.0"},"maintainers":[{"name":"maskzh","email":"maskzh@gmail.com"}],"time":{"modified":"2021-07-13T07:54:03.000Z","created":"2016-06-01T16:46:09.510Z","1.0.0":"2017-05-23T07:41:40.964Z","0.0.3":"2016-06-02T03:43:07.432Z","0.0.2":"2016-06-02T03:42:14.133Z","0.0.1":"2016-06-01T16:46:09.510Z"},"users":{},"author":{"name":"maskzh"},"repository":{"type":"git","url":"git+https://github.com/maskzh/react-native-stylekit.git"},"versions":{"1.0.0":{"name":"react-native-stylekit","version":"1.0.0","description":"a stylekit for react native","main":"./lib","scripts":{"clean":"rimraf ./lib","build":"npm run clean & babel ./src --out-dir ./lib","lint":"eslint ./src/*.js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/maskzh/react-native-stylekit.git"},"keywords":["react","native","style"],"author":{"name":"maskzh"},"license":"ISC","bugs":{"url":"https://github.com/maskzh/react-native-stylekit/issues"},"homepage":"https://github.com/maskzh/react-native-stylekit#readme","devDependencies":{"babel-cli":"^6.9.0","babel-eslint":"^6.0.4","babel-preset-es2015":"^6.9.0","babel-preset-stage-2":"^6.5.0","eslint":"^2.11.1","rimraf":"^2.5.2"},"gitHead":"9fb81063b3579c3d93264c985f4e38ca42be3b8d","_id":"react-native-stylekit@1.0.0","_shasum":"96fc013345b8d3cd60dfdaced0d47af7a9d5316b","_from":".","_npmVersion":"4.6.1","_nodeVersion":"6.10.0","_npmUser":{"name":"maskzh","email":"maskzh@gmail.com"},"dist":{"shasum":"96fc013345b8d3cd60dfdaced0d47af7a9d5316b","size":7119,"noattachment":false,"key":"/react-native-stylekit/-/react-native-stylekit-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-native-stylekit/download/react-native-stylekit-1.0.0.tgz"},"maintainers":[{"name":"maskzh","email":"maskzh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-stylekit-1.0.0.tgz_1495525300654_0.7753165217582136"},"directories":{},"publish_time":1495525300964,"_cnpm_publish_time":1495525300964,"_hasShrinkwrap":false},"0.0.3":{"name":"react-native-stylekit","version":"0.0.3","description":"a stylekit for react native","main":"./lib","scripts":{"clean":"rimraf ./lib","build":"npm run clean & babel ./src --out-dir ./lib","lint":"eslint ./src/*.js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/maskzh/react-native-stylekit.git"},"keywords":["react","native","style"],"author":{"name":"maskzh"},"license":"ISC","bugs":{"url":"https://github.com/maskzh/react-native-stylekit/issues"},"homepage":"https://github.com/maskzh/react-native-stylekit#readme","devDependencies":{"babel-cli":"^6.9.0","babel-eslint":"^6.0.4","babel-preset-es2015":"^6.9.0","babel-preset-stage-2":"^6.5.0","eslint":"^2.11.1","rimraf":"^2.5.2"},"gitHead":"a12e6ea68bbbbbdc8d6756821fa2e581599b377e","_id":"react-native-stylekit@0.0.3","_shasum":"8939573688f8be8e469c5834181d510f71ef24d0","_from":".","_npmVersion":"3.8.6","_nodeVersion":"5.11.1","_npmUser":{"name":"maskzh","email":"maskzh@gmail.com"},"dist":{"shasum":"8939573688f8be8e469c5834181d510f71ef24d0","size":6342,"noattachment":false,"key":"/react-native-stylekit/-/react-native-stylekit-0.0.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-native-stylekit/download/react-native-stylekit-0.0.3.tgz"},"maintainers":[{"name":"maskzh","email":"maskzh@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-native-stylekit-0.0.3.tgz_1464838984982_0.8479251496028155"},"directories":{},"publish_time":1464838987432,"_cnpm_publish_time":1464838987432,"_hasShrinkwrap":false},"0.0.2":{"name":"react-native-stylekit","version":"0.0.2","description":"a stylekit for react native","main":"./lib","scripts":{"clean":"rimraf ./lib","build":"npm run clean & babel ./src --out-dir ./lib","lint":"eslint ./src/*.js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/maskzh/react-native-stylekit.git"},"keywords":["react","native","style"],"author":{"name":"maskzh"},"license":"ISC","bugs":{"url":"https://github.com/maskzh/react-native-stylekit/issues"},"homepage":"https://github.com/maskzh/react-native-stylekit#readme","devDependencies":{"babel-cli":"^6.9.0","babel-eslint":"^6.0.4","babel-preset-es2015":"^6.9.0","babel-preset-stage-2":"^6.5.0","eslint":"^2.11.1","rimraf":"^2.5.2"},"gitHead":"a12e6ea68bbbbbdc8d6756821fa2e581599b377e","_id":"react-native-stylekit@0.0.2","_shasum":"7a7fb01e620377c0ad051b2fd31872de99f0552a","_from":".","_npmVersion":"3.8.6","_nodeVersion":"5.11.1","_npmUser":{"name":"maskzh","email":"maskzh@gmail.com"},"dist":{"shasum":"7a7fb01e620377c0ad051b2fd31872de99f0552a","size":6348,"noattachment":false,"key":"/react-native-stylekit/-/react-native-stylekit-0.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-native-stylekit/download/react-native-stylekit-0.0.2.tgz"},"maintainers":[{"name":"maskzh","email":"maskzh@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-native-stylekit-0.0.2.tgz_1464838932884_0.6119092355947942"},"directories":{},"publish_time":1464838934133,"_cnpm_publish_time":1464838934133,"_hasShrinkwrap":false},"0.0.1":{"name":"react-native-stylekit","version":"0.0.1","description":"a stylekit for react native","main":"./lib","scripts":{"clean":"rimraf ./lib","build":"npm run clean & babel ./src --out-dir ./lib","lint":"eslint ./src/*.js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/maskzh/react-native-stylekit.git"},"keywords":["react","native","style"],"author":{"name":"maskzh"},"license":"ISC","bugs":{"url":"https://github.com/maskzh/react-native-stylekit/issues"},"homepage":"https://github.com/maskzh/react-native-stylekit#readme","devDependencies":{"babel-cli":"^6.9.0","babel-eslint":"^6.0.4","babel-preset-es2015":"^6.9.0","babel-preset-stage-2":"^6.5.0","eslint":"^2.11.1","rimraf":"^2.5.2"},"gitHead":"0ce43b278c18469b78c9c1bc89d0dd3d5da17c55","_id":"react-native-stylekit@0.0.1","_shasum":"cdfc34b68dcfa26a31bb464fcef13b884f50997d","_from":".","_npmVersion":"3.8.6","_nodeVersion":"5.11.1","_npmUser":{"name":"maskzh","email":"maskzh@gmail.com"},"dist":{"shasum":"cdfc34b68dcfa26a31bb464fcef13b884f50997d","size":6629,"noattachment":false,"key":"/react-native-stylekit/-/react-native-stylekit-0.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-native-stylekit/download/react-native-stylekit-0.0.1.tgz"},"maintainers":[{"name":"maskzh","email":"maskzh@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-native-stylekit-0.0.1.tgz_1464799569102_0.3864870888646692"},"directories":{},"publish_time":1464799569510,"_cnpm_publish_time":1464799569510,"_hasShrinkwrap":false}},"readme":"# React Native 样式工具箱 [![Build Status](https://travis-ci.org/maskzh/react-native-stylekit.svg?branch=master)](https://travis-ci.org/maskzh/react-native-stylekit) [![npm version](https://img.shields.io/npm/v/react-native-stylekit.svg)](https://www.npmjs.org/package/react-native-stylekit)\n一个用于快速构建界面的样式工具库\n\n## 安装\n```shell\nnpm i react-native-stylekit --save\n```\n\n## 使用\n```shell\nimport React from 'react'\nimport { View } from 'react-native'\nimport stylekit from 'react-native-stylekit'\n\nconst SK = stylekit({ borderColor: '#eee' })\n\nexport default () =>\n  <View style={[SK.p1, SK.m1]}></View>\n```\n\n## 文档\n  - [borders](#borders-边框相关)\n  - [colors](#colors-文字色背景色边框色)\n  - [flex](#flex-栅格布局)\n  - [typography](#typography-排版相关)\n  - [utilities](#utilities-其他工具)\n  - [whitespace](#whitespace-内补外补)\n\n### borders 边框相关\n默认的 borderStyle 为 `solid`，默认的 borderColor 为 `#D9D9D9`，默认的 borderRadius 为 `5px`\n\n#### 边框类型\n下面的对象默认都有 `borderStyle` 和 `borderColor` 的样式\n```js\nb0: { borderWidth: 0 },\nbh: { borderWidth: 0.5, borderColor, borderStyle },\nb1: { borderWidth: 1, borderColor, borderStyle },\n\nbt0: { borderTopWidth: 0 },\nbth: { borderTopWidth: 0.5, borderColor, borderStyle },\nbt1: { borderTopWidth: 1, borderColor, borderStyle },\n\nbr0: { borderRightWidth: 0 },\nbrh: { borderRightWidth: 0.5, borderColor, borderStyle },\nbr1: { borderRightWidth: 1, borderColor, borderStyle },\n\nbb0: { borderBottomWidth: 0 },\nbbh: { borderBottomWidth: 0.5, borderColor, borderStyle },\nbb1: { borderBottomWidth: 1, borderColor, borderStyle },\n\nbl0: { borderLeftWidth: 0 },\nblh: { borderLeftWidth: 0.5, borderColor, borderStyle },\nbl1: { borderLeftWidth: 1, borderColor, borderStyle },\n```\n#### 边框其他样式\n- .rounded     { borderRadius: $borderRadius }\n- .not-rounded { borderRadius: 0 }\n\n\n### colors 文字色背景色边框色\n提供文字颜色、边框颜色支持的颜色\n```js\nconst $primary = '#337ab7'\nconst $success = '#5cb85c'\nconst $info = '#5bc0de'\nconst $warning = '#f0ad4e'\nconst $danger = '#d9534f'\n\nconst $white = '#fff'\nconst $silver = '#F4F4F4'\nconst $lightgrey = '#ececec'\nconst $grey = '#ccc'\nconst $midgrey = '#777'\nconst $darkgrey = '#444'\nconst $black = '#222'\nconst $trueblack = '#000'\n```\n\n**文字颜色、背景颜色、边框颜色，分别使用 `colorXxx`、`bgXxx`、`borderXxx`（eg. colorSuccess、bgWhite、borderBlack）**\n\n> 提供 `textXxx` 作为 `colorXxx` 的别名\n\n额外提供如下颜色对象\n```js\nc0: { color: #000 },\nc1: { color: #111 },\nc2: { color: #222 },\nc3: { color: #333 },\nc4: { color: #444 },\nc5: { color: #555 },\nc6: { color: #666 },\nc7: { color: #777 },\nc8: { color: #888 },\nc9: { color: #999 },\nca: { color: #aaa },\ncb: { color: #bbb },\ncc: { color: #ccc },\ncd: { color: #ddd },\nce: { color: #eee },\ncf: { color: #fff },\n```\n\n### flex 栅格布局\n#### Flex 容器\n```js\ncolumn: { flexDirection: 'column', flexWrap: 'nowrap' },\nrow: { flexDirection: 'row', flexWrap: 'wrap' },\n```\n\n#### Flex 定位\n```js\ncenter: { alignItems: 'center', justifyContent: 'center' },\ntopLeft: { alignItems: 'flex-start', justifyContent: 'flex-start' },\nbottomRight: { alignItems: 'flex-end', justifyContent: 'flex-end' },\n\n// row 和 column 定位不同，所以要分开写\ncolumnTopCenter: { alignItems: 'center', justifyContent: 'flex-start' },\ncolumnTopRight: { alignItems: 'flex-end', justifyContent: 'flex-start' },\ncolumnCenterLeft: { alignItems: 'flex-start', justifyContent: 'center' },\ncolumnCenterRight: { alignItems: 'flex-end', justifyContent: 'center' },\ncolumnBottomLeft: { alignItems: 'flex-start', justifyContent: 'flex-end' },\ncolumnBottomCenter: { alignItems: 'center', justifyContent: 'flex-end' },\n\nrowTopCenter: { alignItems: 'flex-start', justifyContent: 'center' },\nrowTopRight: { alignItems: 'flex-start', justifyContent: 'flex-end' },\nrowCenterLeft: { alignItems: 'center', justifyContent: 'flex-start' },\nrowCenterRight: { alignItems: 'center', justifyContent: 'flex-end' },\nrowBottomLeft: { alignItems: 'flex-end', justifyContent: 'flex-start' },\nrowBottomCenter: { alignItems: 'flex-end', justifyContent: 'center' },\n```\n\n#### Flex 对齐\n```js\nspaceAround: { justifyContent: 'space-around' },\nspaceBetween: { justifyContent: 'space-between' },\n\nalignStart: { alignSelf: 'flex-start' },\nalignCenter: { alignSelf: 'center' },\nalignEnd: { alignSelf: 'flex-end' },\nalignStretch: { alignSelf: 'stretch' },\n```\n\n#### Flex Size\n```js\nflex1: { flex: 1 },\nflex2: { flex: 2 },\nflex3: { flex: 3 },\nflex4: { flex: 4 },\nflex5: { flex: 5 },\n```\n\n### typography 排版相关\n#### 文本对齐\n```js\ntextCenter: { textAlign: 'center' },\ntextLeft: { textAlign: 'left' },\ntextRight: { textAlign: 'right' },\n```\n> `tc`、`tl`、`tr` 分别作为 `textCenter`、`textLeft`、`textRight` 的别名\n\n#### 字体大小\n```js\nfs12: { fontSize: 12 },\nfs13: { fontSize: 13 },\nfs14: { fontSize: 14 },\nfs15: { fontSize: 15 },\nfs16: { fontSize: 16 },\n...\nfs35: { fontSize: 35 },\nfs36: { fontSize: 36 },\n```\n\n#### 行高\n```js\nlh12: { lineHeight: 12 },\nlh13: { lineHeight: 13 },\nlh14: { lineHeight: 14 },\nlh15: { lineHeight: 15 },\nlh16: { lineHeight: 16 },\n...\nlh71: { lineHeight: 71 },\nlh72: { lineHeight: 72 },\n```\n\n#### 其他字体样式\n```js\nitalic: { fontStyle: 'italic' },\ntracked: { letterSpacing: 4 },\nnoTextDecoration: { textDecorationLine: 'none' },\nunderline: { textDecorationLine: 'underline' },\nlineThrough: { textDecorationLine: 'line-through' },\n\nthin: { fontWeight: 200 },\nregular: { fontWeight: 400 },\nbold: { fontWeight: 700 },\n```\n\n### utilities 其他工具\n#### overflow\n```js\noverflowHidden: { overflow: 'hidden' },\noverflowVisible: { overflow: 'visible' },\n```\n\n> ofh，ofv 作为 overflowHidden，overflowVisible 的别名\n\n#### position\n```js\nrelative: { position: 'relative' },\nabsolute: { position: 'absolute' },\n\ntop: { top: 0 },\nright: { right: 0 },\nbottom: { bottom: 0 },\nleft: { left: 0 },\n```\n\n#### image\n```js\nimgCover: { resizeMode: 'cover' },\nimgContain: { resizeMode: 'contain' },\nimgStretch: { resizeMode: 'stretch' },\n```\n\n### whitespace 内补外补\n提供内补和外补，以 `10` 为粒度\n\n#### 内补\n```js\np0 { padding: 0 },\np5 { padding: 5 },\np10 { padding: 10 },\n...\np50 { padding: 50 },\n\n/*\npt => paddingTop\npr => paddingRight\npb => paddingBottom\npl => paddingLeft\n*/\npt0 { paddingTop: 0 },\npt5 { paddingTop: 5 },\npt10 { paddingTop: 10 },\n...\npt50 { paddingTop: 50 },\n\n/*\nptb => paddingTop & paddingBottom\nplr => paddingRight & paddingLeft\n*/\nptb0 { paddingTop: 0, paddingBottom: 0 },\nptb5 { paddingTop: 5, paddingBottom: 5 },\nptb10 { paddingTop: 10, paddingBottom: 10 },\n...\nptb5 { paddingTop: 50, paddingBottom: 50 },\n```\n\n#### 外补\n**外补同补风格一致，对象前缀为 `m`**\n","_attachments":{},"homepage":"https://github.com/maskzh/react-native-stylekit#readme","bugs":{"url":"https://github.com/maskzh/react-native-stylekit/issues"},"license":"ISC"}