npm

Check out our latest tech talk, "JavaScript Supply Chain Security" presented by VP of Security, Adam Baldwin.Watch it here »

crema-react-ui

1.0.0 • Public • Published

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

Keywords

none

install

npm i crema-react-ui

Downloadsweekly downloads

24

version

1.0.0

license

MIT

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability