Skip to content

Latest commit

 

History

History
219 lines (169 loc) · 6.72 KB

README.md

File metadata and controls

219 lines (169 loc) · 6.72 KB
Raw

styled-system

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

Build Status Coverage Downloads Version

npm i styled-system

Features

  • Add style props that hook into your own theme
  • Responsive prop values for quickly setting responsive font-size, margin, padding, width, and more
  • Influenced by constraint-based design system principles
  • Typographic scale
  • Spacing scale for margin and padding
  • Default 8px grid
  • Works with any color palette
  • Works with most css-in-js libraries, including styled-components, glamorous, emotion, fela, and cxs
  • Used in Rebass, Grid Styled, and the Priceline Design System

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

– Varun Vachhar

"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

Table of Contents

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, width, fontSize, color } from 'styled-system'

// Add styled-system functions to your component
const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${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='grays.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

Optional Packages

Further Reading

Related

MIT License