Crema React UI

Theme

The theme consists of all project specific units, colors, font-sizes, etc. that determine the visual properties of the UI.

Example theme definition:

const theme = {
  platform: 'native', // web, native
  color: {
    primary: 'teal',
    secondary: 'orange',
    tertiary: 'slateGray',
    highlight: 'limeGreen',
  },
  borderWidth: {
    1: 1,
    2: 3,
    3: 6,
  },
  spacing: {
    1: 2,
    2: 4,
    3: 8,
    4: 12,
    5: 16,
    6: 20,
    7: 24,
    8: 28,
    9: 32,
   10: 36,
  },
  fontSize: {
    1: 12,
    2: 14,
    3: 16,
    4: 18,
    5: 20,
    6: 22,
  },
  fontWeight: {
    1: 200,
    2: 400,
    3: 600,
  },
}

Components

Each component is built from theme aware primitives:

• Box
• Text
• Grid
  • Row
  • Col

Box

Box is the base UI component. For the most part, it is a thin abstraction over the native View or div. This allows for a standard cross-platform API that ties directly into a standard theme structure while providing some conveniences (e.g. theme based spacing of child elements)

Theme Properties

• backgroundColor [theme.color]
• borderColor [theme.color]
• borderWidth [theme.borderWidth]
• borderRadius [theme.radius]
• margin [theme.spacing]
• opacity [theme.opacity]
• padding [theme.spacing]
• spacing [theme.spacing]

Convenience Properties

• childLayout ['col', 'row'] default 'col'
• childAlign ['start', 'end', 'center', 'stretch'] default 'stretch'
• childWrap ['wrap', 'nowrap'] default 'nowrap'
• childJustify ['start', 'end', 'center', 'space-between', 'space-around'] default 'start'

Standard Properties

Accepts all standard properties of View https://facebook.github.io/react-native/docs/view.html