Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @braposo/styled-system with all npm packages installed. Try it out:

var styledSystem = require("@braposo/styled-system")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@braposo/styled-system v1.0.0-2.beta.1

Design system utilities for styled-components, glamorous, and other css-in-js libraries

styled-system

Design system utilities for styled-components, glamorous, and other css-in-js libraries

Build Status

npm i styled-system

Usage

// With styled-components
import styled from 'styled-components'
import { space, width, fontSize } from 'styled-system'

const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
`
// Or with glamorous
import glamorous from 'glamorous'
import { space, width, fontSize } from 'styled-system'

const Box = glamorous.div(space, width, fontSize)
// width: 50%
<Box width={1/2} />

// font-size: 20px
<Box fontSize={4} />

// margin: 16px
<Box m={2} />

// padding: 32px
<Box p={3} />

// responsive width
<Box width={[ 1, 1/2, 1/4 ]} />

// responsive font-size
<Box fontSize={[ 2, 3, 4 ]} />

// responsive margin
<Box m={[ 1, 2, 3 ]} />

// responsive padding
<Box p={[ 1, 2, 3 ]} />

width

import { width } from 'styled-system'

The width utility parses a component's width prop and converts it into a CSS width declaration.

Numbers from 0-1 are converted to percentage widths. Numbers greater than 1 are converted to pixel values. String values are passed as raw CSS values. And arrays are converted to responsive width styles.

fontSize

import { fontSize } from 'styled-system'

The fontSize utility parses a component's fontSize prop and converts it into a CSS font-size declaration. Numbers from 0-8 are converted to values on the font size scale. Numbers greater than 8 are converted to raw pixel values. String values are passed as raw CSS values. And array values are converted into responsive values.

space

import { space } from 'styled-system'

The space utility converts shorthand margin and padding props to margin and padding CSS declarations. Numbers from 0-4 are converted to values on the spacing scale. Negative values can be used for negative margins. Numbers greater than 4 are converted to raw pixel values. String values are converted passed as raw CSS values. And array values are converted into responsive values.

Margin and padding props follow a shorthand syntax for specifying direction.

  • m: margin
  • mt: margin-top
  • mr: margin-right
  • mb: margin-bottom
  • ml: margin-left
  • mx: margin-left and margin-right
  • my: margin-top and margin-bottom
  • p: padding
  • pt: padding-top
  • pr: padding-right
  • pb: padding-bottom
  • pl: padding-left
  • px: padding-left and padding-right
  • py: padding-top and padding-bottom

Responsive Styles

All props accept arrays as values for mobile-first responsive styles.

// 100% below the smallest breakpoint,
// 50% from the next breakpoint and up,
// and 25% from the next breakpoint and up
<Box w={[ 1, 1/2, 1/4 ]} />

// responsive font size
<Box fontSize={[ 1, 2, 3, 4 ]} />

// responsive margin
<Box m={[ 1, 2, 3, 4 ]} />

// responsive padding
<Box p={[ 1, 2, 3, 4 ]} />

Breakpoints

styled-system uses a mobile-first responsive approach, where any value set works from that breakpoint and wider. The default set of breakpoints aims to cover a wide range of devices from mobile to desktop. Breakpoints can be customized using styled-components' ThemeProvider.

[ 40, 52, 64 ]
// @media screen and (min-width: 40em)
// @media screen and (min-width: 52em)
// @media screen and (min-width: 64em)

Font Size Scale

Using a typographic scale helps create visual rhythm and reduces the number of decisions needed when designing UI. Styled system uses a modular scale that covers most of a UI's needs, but it can be customized with styled-components' ThemeProvider.

[ 12, 14, 16, 20, 24, 32, 48, 64, 72 ]

Spacing Scale

Using a scale for spacing helps ensure elements line up, even when nested inside one another. styled-system uses a spacing scale based on an 8px, powers-of-two grid for margin and padding by default and can be customized with styled-components' ThemeProvider.

[ 0, 8, 16, 32, 64 ]

Configuration

styled-system can be configured with styled-components' ThemeProvider

import { ThemeProvider } from 'styled-components'
// or import { ThemeProvider } from 'glamorous'
import MyComponent from './MyComponent'

const theme = {
  breakpoints: [
    32, 48, 64
  ],
  space: [
    0, 6, 12, 18, 24
  ],
  fontSizes: [
    12, 16, 18, 24, 36, 72
  ]
}

const App = props => (
  <ThemeProvider theme={theme}>
    <MyComponent
      fontSize={4}
      my={[ 2, 3 ]}
    />
  </ThemeProvider>
)

Related

MIT License

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free