Draper

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

Usage

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>

Customizing

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,
  },
});

Extending

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 },
  }),
};

Modules

Absolute

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

📑source

Border

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

Dimensions

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

📑source

Flexbox

These entire flexbox module as utilities.

📑source

Typography

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.

Whitespace

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

Example

To run the example:

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

Credits

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