Atomic, functional and modular styling for React Native. Inspired by Basscss and Tachyons.

npm i Draper -S

Build draper styles in a styles.js module:

import draper from 'Draper';
export default draper();

Then to use them:

import s from './styles';

<View style={[ s.bgWhite, s.p2, s.mt2, s.rounded ]}>
  { ... }
</View>

The base config contains defaults for rem, borderWidth, typeScale, (whitespace)scale, lineHeightScale and clrs. You can modify these by passing in options to the build function. For example:

import draper from 'Draper';
export default draper({
  clrs: { mauve: '#E0B0FF' },
  scale: [1, 2, 3, 4],
  typeScale: {
    f2: 1.5,
    f3: 1.25,
  },
});

import draper from 'Draper';
import { StyleSheet } from 'react-native';

export default {
  ...draper(),
  ...StyleSheet.create({
    myCustomClass: { color: 'magenta' },
    o0: { opacity: 0 },
    o10: { opacity: 0.1 },
    o20: { opacity: 0.2 },
    o30: { opacity: 0.3 },
    o40: { opacity: 0.4 },
    o50: { opacity: 0.5 },
    o60: { opacity: 0.6 },
    o70: { opacity: 0.7 },
    o80: { opacity: 0.8 },
    o90: { opacity: 0.9 },
    o100: { opacity: 1 },
  }),
};

Absolute positioning and zIndex utilities. It also aliases StyleSheet.absoluteFill.

📑source

Border radius and sizing utilities. Border radius scale: 1rem, 2rem, 3rem, 4rem, 8rem, 16rem. Border sizing supports three options:

• 0
• StyleSheet.hairlineWidth
• config.borderWidth

📑source

#### Colors

Text, border and background colour utilities. The colour values used in this module are from mrmrs/colors. For example:

{ black:        { color: '#515163' } }
{ bgBlack:      { backgroundColor: '#515163' } }
{ borderBlack:  { borderColor: '#515163' } }

📑source

Width and height utilities using this scale: 1rem, 2rem, 3rem, 4rem, 8rem, 16rem.

📑source

These entire flexbox module as utilities.

📑source

Font style, weight and size utilities. Font weight: normal, bold, 100 - 900. Font sizes are generated using a type scale.

const typeScale = {
  f1: 2, // * rem
  f2: 1.5, // * rem
  f3: 1.25, // * rem
  f4: 1, // * rem
  f5: 0.875, // * rem
  f6: 0.75, // * rem
};

📑source

In React Native lineHeight is not a multiplier. This makes it hard to create line height utilities. Instead you can create text components which have all the fontSize and lineHeight stylings. See text.js for an example.

Margin and padding utilities.

Padding
	base: p
	modifiers: h, v, t, r, b, l
	scale: 0, 1, 2, 3, 4, 5, 6

Margin
	base: m
	modifiers: h, v, t, r, b, l
	scale: 0, 1, 2, 3, 4, 5, 6

Example:
	mb1 = marginBottom: 0.5 * rem
	ph1 = paddingHorizontal: 4 * rem

📑source

To run the example:

• npm install
• npm run dev:ios for iOS and npm run dev:android for Android.

• Tachyons
• Basscss
• react-native-style-tachyons