Home

Awesome

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

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:

<style id="fela-stylesheet" type="text/css"></style>
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:

PropertyDescription
scale (array)scale used for margin and padding
textScale (array)scale used for text size
textdefault 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 <ThemeProvider> 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:

PropMeaning
mmargin
mtmargin-top
mbmargin-bottom
mlmargin-left
mrmargin-right
mvmargin-top and bottom
mhmargin-left and right
ppadding
ptpadding-top
pbpadding-bottom
plpadding-left
prpadding-right
pvpadding-top and bottom
phpadding-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

PropertyDescription / Accepted values
align'left' / 'right' / 'center' / 'justify'
boldboolean to set text as bold
italicboolean 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

Text component

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

License

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