https://github.com/mateosilguero/consistencss
An "atomic css" style toolkit for React Native
https://github.com/mateosilguero/consistencss
atomic-css css react-native styles typescript
Last synced: 3 months ago
JSON representation
An "atomic css" style toolkit for React Native
- Host: GitHub
- URL: https://github.com/mateosilguero/consistencss
- Owner: mateosilguero
- License: mit
- Created: 2020-04-24T03:30:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T14:14:47.000Z (over 2 years ago)
- Last Synced: 2025-06-24T15:54:42.388Z (4 months ago)
- Topics: atomic-css, css, react-native, styles, typescript
- Language: TypeScript
- Homepage: https://consistencss.now.sh/
- Size: 5.39 MB
- Stars: 48
- Watchers: 2
- Forks: 3
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# consistencss
[](#contributors-)
[](https://badge.fury.io/js/consistencss)
An "atomic css" style toolkit for React Native, inspired by [tailwindcss](https://tailwindcss.com/docs/installation/)
Full Documentation: https://consistencss.now.sh/
## Installation
```sh
npm install consistencss
```
using yarn:
```sh
yarn add consistencss
```
## Troubleshooting
See [Troubleshooting](./Troubleshooting.md).
## Usage
```js
import { View } from 'react-native';
import C, { apply } from 'consistencss';
// ...
const App = () => {
return (
);
};
// apply also accepts strings
const styles = {
title: apply(C.font6, C.uppercase),
subtitle: apply('capitalize', C.mt2),
};
```
## Set your theme using `extend`
```js
import { View } from 'react-native';
import C, { apply, extend } from 'consistencss';
extend({
colors: {
primary: 'cornflowerblue',
secondary: 'green',
randomcolor: '#f2d687',
},
});
const App = () => {
return (
);
};
```
or change the default base size (4):
```js
import { Text, View } from 'react-native';
import C, { apply, extend } from 'consistencss';
// the default base is 4, so m4 = margin: 16
// m2 = margin: 8
extend({
sizing: {
base: 2,
},
});
// chaging to 2, m4 = margin: 8
// m2 = margin: 4
const App = () => {
return ;
};
```
even you could set default styles for componentes, like View, Text and TouchableOpacity
```js
import C, { apply, extend, View } from 'consistencss';
extend({
components: {
View: apply(C.bgYellow, C.p4),
},
});
const App = () => {
// we import View from consistencss
// and this have a default style
return ;
};
```
Uses the classNames API, and create your custom classes !
```js
import C, { apply, extend, classNames, View, Text } from 'consistencss';
extend({
classes: {
debug: apply(C.border1, C.borderRed),
},
});
const App = () => {
return (
...
;
};
```
## This repository includes:
- [source code](./src/index.tsx) (with their respective unit test and 100% of code coverage, and benchmark test)
- [an example app](./example/index.tsx)
- [documentation](./website/README.md) (powered by [docusaurus](https://docusaurus.io))
## License
MIT
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Mateo Silguero
💻
Ezequiel Leites
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!