@exah/prop-styles-system v1.2.0

prop-styles-system

Design system utils for CSS-in-JS libraries

• Support emotion, styled-components and glamorous
• All styles are responsive by default
• Customizable

📦 Install

$ yarn add @exah/prop-styles-system

📖 API

🤔 Why?

Prop What?

Prop Styles is when you can set CSS styles in runtime with component props.

For example if you want prop that hides element on mobile. Usually you will do something like this:

import styled from 'react-emotion'

// Add to component
const Box = styled.div((props) => props.hideOnMobile && {  
  '@media (max-width: 600px)': {
    display: 'none' 
  }
})

// Use prop
<Box hideOnMobile /> // @media (max-width: 600px) { display: none }

And in large scale project with many styles this is to verbose. With prop-styles-system you can add media queries to your theme and any created Prop Style than can be changed in specified media queries with special suffix.

import { createPropStyles, createTheme } from '@exah/prop-styles-system'

const myPropStyles = createPropStyles({
  hide: { display: 'none' },
  makeItRed: { backgroundColor: 'red' }
})

const myTheme = createTheme({
  media: {
    OnMobile: '(max-width: 600px)'
  }
})

import styled from 'react-emotion'
import { ThemeProvider } from 'emotion-theming'

const Box = styled.div(myPropStyles)

<ThemeProvider theme={myTheme}>
  <Box hideOnMobile makeItRed />
</ThemeProvider>

// background-color: red; 
// @media (max-width: 600px) { display: none }

More Useful Example

Add ready to use

• space — for setting margin, padding
• sizes - for width, height, ...
• colors — for color, background-color

prop styles to your component.

import styled from 'react-emotion'
import { space, sizes, colors } from '@exah/prop-styles-system'

const Box = styled.div(
  space,
  sizes,
  colors
)

Use them in runtime:

<Box mgx /> // margin-left: 8px; margin-right: 8px
<Box wd={(1 / 2)} /> // width: 50%
<Box tm='inverted' /> // background-color: #000000; color: #ffffff
<Box wdM='300px' /> // @media (max-width: 600px) { width: 300px }

Provide custom theme:

import { ThemeProvider } from 'emotion-theming'
import { createTheme } from '@exah/prop-styles-system' 

const theme = createTheme({
  media: {
    M: '(max-width: 600px)'
  },
  space: {
    default: [ 0, 16, 32, 64, 128 ],
    M: [ 0, 8, 16, 32, 64 ]
  },
  size: {
    card: '300px',
    site: '1300px'
  },
  palette: {
    default: {
      bg: '#ffffff',
      fg: '#000000'
    },
    inverted: {
      bg: '#000000',
      fg: '#ffffff'
    }
  }
})

<ThemeProvider theme={theme}>
  <Box bg="inverted" ht> // css-0
    <Box maxWd="site" mgx="auto" pdx> // css-1
      <Box tm wd={1 / 4} minWd="card" minWdM> // css-2
        <figure>
          <img src="/pic.jpg" alt="" />
          <figcaption>
            <Box pdx pdy={2}> // css-3
              <Box mgb> // css-4
                <h3>
                  Title
                </h3>
              </Box>
              <Box mgt> // css-5
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Etiam eu libero libero, sit amet commodo sem. Proin a quam
                  vulputate enim consequat sollicitudin.
                </p>
              </Box>
            </Box>
          </figcaption>
        </figure>
      </Box>
    </Box>
  </Box>
</ThemeProvider>

CSS-in-JS result:

.css-0 {
  background-color: #000000;
}

.css-1 {
  max-width: 1300px; 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: 16px; 
  padding-right: 16px;
  
  @media (max-width: 600px) { 
    padding-left: 8px; 
    padding-right: 8px; 
  }
}

.css-2 {
  background-color: #ffffff;
  color: #000000;
  width: 25%;
  min-width: 300px;
  
  @media (max-width: 600px) { 
    min-width: 100%;
  }
}

.css-3 {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 32px;
  padding-bottom: 32px;
  
  @media (max-width: 600px) {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.css-4 {
  margin-bottom: 16px;
  
  @media (max-width: 600px) {
    margin-bottom: 8px;
  }
}

.css-5 {
  margin-top: 16px;
  
  @media (max-width: 600px) {
    margin-top: 8px;
  }
}

🔗 Links

Sites

• strelkamag.com — 🌍 Real-world usage
• goremykina — 👀 Code (WIP)

Packages

• defaults.css — CSS reset
• styled-system — "Design system utilities for styled-components and other css-in-js libraries." Similiar project and probably better.
• prop-styles — "Utility to create flexible React components which accept props to enable/disable certain styles."
• polished — "A lightweight toolset for writing styles in JavaScript"

MIT © John Grishin