@builtbypixel/plasma NPM

@builtbypixel/plasma

Plasma UI

Install

yarn add @builtbypixel/plasma

Storybook

View the Storybook components for Plasma here which includes detailed component documentation and usage. View Storybook

Usage

import React from 'react'

import { ThemeProvider } from '@builtbypixel/plasma'
import { theme } from './theme'

class App extends Component {
  render() {
    return (
      <ThemeProvider override={theme}>
        <MyAppComponent />
      </ThemeProvider>
    )
  }
}

Creating your own theme

You can override and customise the Plasma theme by creating your own theme file as above.

Example theme file:

// Example theme.js
export default {
  colors: {
    myTestColor: '#000000
  },
  breakpoints: ['30em', '48em', '62em', '80em'],
  fonts: {
    heading: '"Avenir Next", sans-serif',
    body: 'system-ui, sans-serif',
    mono: 'Menlo, monospace'
  },
  fontSizes: {
    xs: '0.75rem',
    sm: '0.875rem',
    md: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
    '5xl': '3rem',
    '6xl': '4rem'
  }
}

<Box bg="myTestColor">Testing my custom background</Box>

Shorthand props

Plasma is built on top of Styled System which can be viewed here.

For example margin-top would be mt.

Responsive styles

Plasma UI support responsive styles out of the box. Instead of manually adding @media queries and adding nested styles throughout your code, Plasma UI allows you provide array values to add mobile-first responsive styles.

<>
  <Box
    height='40px'
    bg='teal.400'
    width={[
      '100%', // base
      '50%', // 480px upwards
      '25%', // 768px upwards
      '15%' // 992px upwards
    ]}
  />
  {/* responsive font size */}
  <Box fontSize={['sm', 'md', 'lg', 'xl']}>Font Size</Box>
  {/* responsive margin */}
  <Box mt={[2, 4, 6, 8]} width='full' height='24px' bg='tomato' />

  {/* Using breakpoint labels */}
  <Box bg='papayawhip' p={{ sm: 2, md: 4, lg: 6, xl: 8 }}>
    Padding
  </Box>
</>