Consistencss NPM

consistencss

An "atomic css" style toolkit for React Native, inspired by tailwindcss

Full Documentation: https://consistencss.now.sh/

Installation

npm install consistencss

using yarn:

yarn add consistencss

Troubleshooting

See Troubleshooting.

Usage

import { View } from 'react-native';
import C, { apply } from 'consistencss';

// ...
const App = () => {
  return (
    <View style={apply(C.m4, C.p2, C.bgRed)}>
      <Text style={C.textRed}></Text>
      <Text style={[C.textBlue, C.m6]}></Text>
      <Text style={styles.subtitle}></Text>
    </View>
  );
};

// apply also accepts strings
const styles = {
  title: apply(C.font6, C.uppercase),
  subtitle: apply('capitalize', C.mt2),
};

Set your theme using `extend`

import { View } from 'react-native';
import C, { apply, extend } from 'consistencss';

extend({
  colors: {
    primary: 'cornflowerblue',
    secondary: 'green',
    randomcolor: '#f2d687',
  },
});

const App = () => {
  return (
    <View style={apply(C.bgPrimary)}>
      <View style={apply(C.bgRandomcolor)}></View>
    </View>
  );
};

or change the default base size (4):

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 <View style={apply(C.mt4)}></View>;
};

even you could set default styles for componentes, like View, Text and TouchableOpacity

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 <View></View>;
};

Uses the classNames API, and create your custom classes !

import C, { apply, extend, classNames, View, Text } from 'consistencss';

extend({
  classes: {
    debug: apply(C.border1, C.borderRed),
  },
});

const App = () => {
  return (
    <View style={C.debug}>
      <Text style={classNames('debug')}>
        ...
      </Text>
    </View>;
};