crema-react-ui v1.0.0

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