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

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • roblafeve
    • blaketarter