Stash

React UI components built on top of Perkins Framework, styled-components, polished and pose.

yarn add prey-stash --save

Basic Usage

Initialize by including something like this in your current React based app

import React, {Component} from 'react'
import styled, {ThemeProvider, createGlobalStyle} from 'styled-components'
import Core, {Layout, Block, LayoutStyle} from 'prey-stash'

import createTheme from "prey-stash"
const theme = createTheme({
  desaturation: 0,
  lightness: 0,
  hue: 0
})

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <GlobalStyle />
        <ThemeProvider theme={theme}>
        <Layout scrollableFix={false}
          gridTemplate={`
            'header header'
            'content aside'
            'footer footer'
          `}>
          <Block areaName="header">
            <p>Header</p>
          </Block>

          <Block areaName="content">
            <h1>Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla praesentium esse, maiores quae laudantium alias omnis est a, saepe eius atque, minus blanditiis. Provident atque veritatis beatae cupiditate impedit.</p>
          </Block>

          <Block areaName="aside">
            <p>Aside</p>
          </Block>

          <Block areaName="footer">
            <p>Footer</p>
          </Block>

        </Layout>
      </ThemeProvider>
    </React.Fragment>
    );
  }
}

export default App;