https://github.com/s-acss/react-native
Static Atomic CSS React Native Version
https://github.com/s-acss/react-native
acss react-native s-acss sacss
Last synced: 4 months ago
JSON representation
Static Atomic CSS React Native Version
- Host: GitHub
- URL: https://github.com/s-acss/react-native
- Owner: s-acss
- Created: 2019-06-25T06:47:40.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-27T13:27:38.000Z (about 4 years ago)
- Last Synced: 2025-01-27T04:48:04.401Z (4 months ago)
- Topics: acss, react-native, s-acss, sacss
- Language: JavaScript
- Homepage:
- Size: 245 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @sacss/react-native
[![npm package][npm-badge]][npm]
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/@sacss/react-native
Quick way to write style in react native.
Idea from Atomic CSS Design system.
```
$ yarn add @sacss/react-native
```
## How to use?
```JSX
import React from 'react';
import {Text, View, ImageBackground, Image} from '@sacss/react-native';
import mImg1 from "./assets/1.jpg";
import mImg2 from "./assets/2.jpg";
export default function App() {
return (
Hello world!
Hello Again!
);
};
```
## How to bind to custom component?
```JSX
import React from 'react';
import {Text, View} from 'react-native';
import withAcss from '@sacss/react-native';
const CusText = widthAcss(Text);
const CusView = widthAcss(View);
export default function App() {
return (
Custom text
);
};
```
## Name rules
It looks wired in first sight what we use abbreviation instead of the full name. Cause we want user just remember the rules below rather than all the props.
1. Only Initials: `aic` means `alignItems: center`;
2. Direct digital connection: `fw700` means `fontWidth:700`;
4. `p` means `percent`: `w100p` means `width:'100%'`;
```JSX
Hello world!
```
equal to
```JSX
Hello world!
```
## API
```JSX
const styleMap = {
ac: 'alignContent',
acs: ['alignContent', 'stretch'],
acc: ['alignContent', 'center'],
acfs: ['alignContent', 'flex-start'],
acfe: ['alignContent', 'flex-end'],
acsb: ['alignContent', 'space-between'],
acsa: ['alignContent', 'space-around'],
ai: 'align-items',
ais: ['alignItems', 'stretch'],
aib: ['alignItems', 'baseline'],
aic: ['alignItems', 'center'],
aifs: ['alignItems', 'flex-start'],
aife: ['alignItems', 'flex-end'],
as: 'alignSelf',
asa: ['alignSelf', 'auto'],
ass: ['alignSelf', 'stretch'],
asb: ['alignSelf', 'baseline'],
asc: ['alignSelf', 'center'],
asfs: ['alignSelf', 'flex-start'],
asfe: ['alignSelf', 'flex-end'],
bc: 'backgroundColor',
br: 'borderRadius',
bw: 'borderWidth',
bs: 'borderStyle',
btw: 'borderTopWidth',
btc: 'borderTopColor',
brw: 'borderRightWidth',
brc: 'borderRightColor',
bbw: 'borderBottomWidth',
bbc: 'borderBottomColor',
blw: 'borderLeftWidth',
blc: 'borderLeftColor',
btrr: 'borderTopRightRadius',
btlr: 'borderTopLeftRadius',
bbrr: 'borderBottomRightRadius',
bblr: 'borderBottomLeftRadius',
b: 'bottom',
b0: 'bottom',
c: 'color',
dn: ['display', 'none'],
f: 'flex',
f1: ['flex', 1],
fdr: ['flexDirection', 'row'],
fdrr: ['flexDirection', 'row-reverse'],
fdc: ['flexDirection', 'column'],
fdcr: ['flexDirection', 'column-reverse'],
fwn: ['flexWrap', 'nowrap'],
fwb: ['fontWeight', 'bold'],
fw100: ['fontWeight', 100],
fw200: ['fontWeight', 200],
fw300: ['fontWeight', 300],
fw400: ['fontWeight', 400],
fw500: ['fontWeight', 500],
fw600: ['fontWeight', 600],
fw700: ['fontWeight', 700],
fw800: ['fontWeight', 800],
fw900: ['fontWeight', 900],
fs: 'fontSize',
ff: 'fontFamily',
fsn: ['fontStyle', 'normal'],
fsi: ['fontStyle', 'italic'],
h: 'height',
h100p: ['height', '100%'],
jcc: ['justifyContent', 'center'],
jcsb: ['justifyContent', 'space-between'],
jcfs: ['justifyContent', 'flex-start'],
jcfe: ['justifyContent', 'flex-end'],
jcsa: ['justifyContent', 'space-around'],
jcse: ['justifyContent', 'space-evenly'],
l: 'left',
l0: ['left', 0],
lh: 'lineHeight',
m(value) {
return {
marginTop: value,
marginBottom: value,
marginRight: value,
marginLeft: value,
};
},
mt: 'marginTop',
mr: 'marginRight',
mb: 'marginBottom',
ml: 'marginLeft',
mh: 'marginHorizontal',
mv: 'marginVertical',
o: 'opacity',
oh: ['overflow', 'hidden'],
p(value) {
return {
paddingTop: value,
paddingBottom: value,
paddingRight: value,
paddingLeft: value,
};
},
pa: ['position', 'absolute'],
pr(value) {
if (value === true) {
return {
position: 'relative',
};
}
return {
paddingRight: value,
};
},
pt: 'paddingTop',
pb: 'paddingBottom',
pl: 'paddingLeft',
ph: 'paddingHorizontal',
pv: 'paddingVertical',
r: 'right',
r0: ['right', 0],
t: 'top',
t0: ['top', 0],
tac: ['textAlign', 'center'],
tar: ['textAlign', 'right'],
taa: ['textAlign', 'auto'],
tal: ['textAlign', 'left'],
taj: ['textAlign', 'justify'],
ttu: ['textTransform', 'uppercase'],
ttc: ['textTransform', 'capitalize'],
ttn: ['textTransform', 'none'],
ttl: ['textTransform', 'lowercase'],
w: 'width',
w100p: ['width', '100%'],
zi: 'zIndex',
};
```
Pure, simple, natural.
As you can see that is all the code we create blew.
We just did a little but can help you a lot when create style in react native.
help us to make it better together [issue](https://github.com/nu-system/acss-react-native/issues).