This package provides abstraction of UI using two basic React components Box and Text. It serves as a foundation for creating your own custom UI library. Moreover designed components are annotated using Flow

Check out CSS in JS: The Argument Refined to dig deeper into the topic.

Basic Usage

Install this package via:

npm i --save base-styling-components

Prerequisites

• Fela.js

npm i --save fela@^4.2.0 fela-dom@^4.2.0 inline-style-prefixer@^2.0.1 react-fela@^4.2.0

Setup your APP for using Fela.js:

• add style node to app <header> section where all styles will be injected:

<style id="fela-stylesheet" type="text/css"></style>

• Setup Fela renderrer to prefix styles with vendor prefixes and wrap your app using Fela <Provider>:

import { createRenderer } from 'fela';
import { Provider } from 'react-fela';
import prefixAll from 'inline-style-prefixer/static';

const prefixerPlugin = styleObject => prefixAll(styleObject);
const config = {
  plugins: [prefixerPlugin],
};
const renderer = createRenderer(config);
const mountNode = document.getElementById('fela-stylesheet');

<Provider renderer={renderer} mountNode={mountNode}>
  <App />
</Provider>

Box and Text components accepts cammelCased CSS properties. Use the Box component for visual containers and grids and use Text component for headers, labels and any other typography.

// @flow
import { Box, Text } from 'base-styling-components';

<Box>basic div component</Box>
<Text as="h1">Heading 1</Text>

Configuration

Basic style configuration is using specified defaultTheme with following attributes:

Property	Description
scale (array)	scale used for margin and padding
textScale (array)	scale used for text size
text	default text props

Used default theme and specified theme flow type:

// @flow
const defaultTheme: themeType = {
  scale: [
    0, 2, 4, 8, 16, 32, 64,
  ],
  textScale: [
    12, 16, 18, 24, 36, 48, 72,
  ],
  text: {
    fontFamily: 'Roboto,sans-serif',
    color: '#555',
    bold: 600,
  },
};

export type themeType = {
  scale: number[],
  textScale: number[],
  text: {
    fontFamily: string,
    color: string,
    bold: 'bold' | 'normal' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  },
};

If you need to override default configuration or add some new attributes (eg. commonly used colors) you can do it by providing your own theme which will follow specified Flow theme type. You can pass your custom theme usgin Fela which will pass defined theme to all child components using context.

// @flow
import { ThemeProvider } from 'react-fela';
import { defaultTheme } from 'base-styling-components';
import type { themeType } from 'base-styling-components';

const myCustomTheme: themeType = {
  ...defaultTheme,
  scale: [0, 10, 20, 30, 40, 100, 120],
  colors: {
    color1: "#000000",
  },
};

<ThemeProvider theme={myCustomTheme}>
  <App />
</ThemeProvider>

Elements

Rendered element can be changed via as prop (default element is <div>):

<Box as="button">
  basic button component
</Box>

Accepted props

Margin and Padding

Margin and padding can be controlled using m and p props. They accept simple number value e.g m={4} or text value m="10px". If supplied number value is from range of indexes in set config scale value from supplied scale is used.

<Box
  p={5} //padding 32px will be aplied
>
  box component
</Box>

Margin and padding can be expressed using basic camelCase props such as margin, padding, marginTop, paddingTop, marginHorizontal, marginVertical etc. or using following shorthand props:

Prop	Meaning
m	margin
mt	margin-top
mb	margin-bottom
ml	margin-left
mr	margin-right
mv	margin-top and bottom
mh	margin-left and right
p	padding
pt	padding-top
pb	padding-bottom
pl	padding-left
pr	padding-right
pv	padding-top and bottom
ph	padding-left and right

Width and Height

CSS properties representing width and height such as width, height, maxWidth, minHeight etc. accepts number value or text value. If supplied number value is from range 0-1 value is represented as percentage, otherwise it is represented as pixel value.

<Box
  width={1/2} //50% width div
>
  box component
</Box>

Pixel props

CSS props which should receive value with unit and will be supplied without specified unit will be represented as px.

Eg. borderWidth={10} //10px

Font Size

Font size in Text component can be set using size property. It accepts simple number value or text value. If supplied number value is from range of indexes in set config textScale value from supplied scale is used. If number is grater than number of scale indexes, value is represented as px.

<Text size={5}>Some text</Text> //fontSize: 48px
<Text size={20}>Some text</Text> //fontSize: 20px

Typography

Other typography styles can be set using following props

Property	Description / Accepted values
align	'left' / 'right' / 'center' / 'justify'
bold	boolean to set text as bold
italic	boolean to set text as italic
decoration	'none' / 'underline' / 'line-through'
transform	'none' / 'capitalize' / 'uppercase' / 'lowercase'

Custom CSS

If you need to specify custom css property eg. media-query or some pseudo classes property style can be used.

<Box
  as="button"
  backgroundColor="red"
  style={{
    ':hover': {
       backgroundColor: 'green',
    },
  }}
>
  hover buttonn
</Box>

List of all accepted propos

Box component

• m,
• margin,
• mv,
• marginVertical,
• mh,
• marginHorizontal,
• mt,
• marginTop,
• mb,
• marginBottom,
• ml,
• marginLeft,
• mr,
• marginRight,
• p,
• padding,
• pv,
• paddingVertical,
• ph,
• paddingHorizontal,
• pt,
• paddingTop,
• pb,
• paddingBottom,
• pl,
• paddingLeft,
• pr,
• paddingRight,
• height,
• maxHeight,
• maxWidth,
• minHeight,
• minWidth,
• width,
• bottom,
• left,
• right,
• top,
• flex,
• backgroundColor,
• border,
• borderColor,
• borderBottomColor,
• borderLeftColor,
• borderRightColor,
• borderTopColor,
• borderRadius,
• borderBottomLeftRadius,
• borderBottomRightRadius,
• borderTopLeftRadius,
• borderTopRightRadius,
• borderWidth,
• borderBottomWidth,
• borderLeftWidth,
• borderRightWidth,
• borderTopWidth,
• borderStyle,
• alignItems,
• alignSelf,
• flexBasis,
• flexDirection,
• flexGrow,
• flexShrink,
• flexWrap,
• justifyContent,
• opacity,
• overflow,
• position,
• zIndex,

Text component

Text component is just wrapper around Box component so all Box props can be passed too.

• fontFamily,
• size,
• fontSize,
• align,
• textAlign,
• bold,
• color,
• decoration,
• textDecoration,
• transform,
• textTransform,
• italic,
• lineHeight,

License

basic-styling-components are available under MIT. See LICENSE for more details.