Package Exports

styled-system
styled-system/package.json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-system) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Styled System

Responsive, theme-based style props for building design systems with React https://styled-system.com

size

npm i styled-system

Features

Add style props that hook into your own theme
Quickly set responsive font-size, margin, padding, width, and more with props
Influenced by constraint-based design system principles
Typographic scale
Spacing scale for margin and padding
Works with any color palette
Works with most css-in-js libraries, including styled-components & emotion
Used in Rebass, Rebass Grid, and the Priceline Design System

"This is honestly my favourite way to build UI components right now "

– Varun Vachhar

"If you haven't seen Styled System before, do yourself a favour and check it out. It's been a huge influence in my thinking on component-oriented styles."

– Mark Dalgleish

"The future of css-in-js is going to look something like styled-system with its responsive values."

– Kye Hohenberger

"Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for."

– Nathan Young

"If you make websites/apps with React check out Styled System if you haven't already. You will be amazed at how much faster you can build."

– David Yeiser

"If you like Tachyons you will love styled-system. If you don't like Tachyons, you will love styled-system."

– Adam Morse

Try It Out

Try the examples on CodeSandbox

Usage
Docs
Further Reading
Built with Styled System
Related

Usage

// Example uses styled-components, but styled-system works with most other css-in-js libraries as well
import styled from 'styled-components'
import { space, layout, typography, color } from 'styled-system'

// Add styled-system functions to your component
const Box = styled.div`
  ${space}
  ${layout}
  ${typography}
  ${color}
`

Each style function exposes its own set of component props that handle styles based on values defined in a theme.

// width: 50%
<Box width={1/2} />

// font-size: 20px (theme.fontSizes[4])
<Box fontSize={4} />

// margin: 16px (theme.space[2])
<Box m={2} />

// padding: 32px (theme.space[3])
<Box p={3} />

// color
<Box color='tomato' />

// color: #333 (theme.colors.gray[0])
<Box color='gray.0' />

// background color
<Box bg='tomato' />

Responsive Style Props

Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. Read more

// 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 ]} />

To learn more, see the Getting Started guide or read the docs.

Docs

Built with Styled System

MIT License

styled-system