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 andnpm run dev:android
for Android.