StyleBox

StyleBox is a React component system for styling your app. Uses custom components which can be composed easily and easy styling through props. Based mostly on UI component system from Danie Steigerwald => https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955

VWIP = Very Work In Progress

Not ready for production use

Usage

Stylebox has 3 parts:

• Components to style the page generally
• Grid system components
• Fela renderer

Stylebox is originally based on fela, but isn't dependent on it. You can supply your own renderer to <Styler /> and components will use it.

• Basic Setup

• Fela Setup

• Custom renderer Setup

• Grid system

• Style components

Basic Setup

1. Styler
2. reset and global styles
3. renderer
4. theme
5. commponents
6. guidelines
7. storybook
8. dev

Styler

Use <Styler /> to supply renderer, theme and icons to context of components.

<Styler renderer={renderer} theme={theme} icons={icons}>
  <App />
</Styler>

props

• renderer (Renderer) - Renderer to render styles to classNames. Recommended is fela renderer
• theme (UserTheme) - Theme declarations for styling
• Icons (Icons)

Fela Setup

Get fela renderer:

import { getRenderer } from 'react-stylebox/felaRenderer';

and use supply it to Styler

<Styler renderer={getRenderer(theme, fonts)}>

Custom renderer setup

// TODO