{"x0":{"meta":[{"name":"twitter:card","content":"summary"},{"name":"twitter:site","content":"@jxnblk"},{"name":"twitter:image","content":"https://jxnblk.com/styled-system/logo.png"},{"name":"twitter:title","content":"Styled System"},{"name":"twitter:description","content":"Design system utilities for styled-components, glamorous, and other css-in-js libraries"},{"name":"description","content":"Design system utilities for styled-components, glamorous, and other css-in-js libraries"}],"title":"Styled System","basename":"/styled-system"},"ava":{"babel":"inherit","require":["babel-register"]},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"dist":{"shasum":"f7b0c9a0e825c9814b017a6813f8d0ce9710e511","tarball":"https://registry.npmjs.org/styled-system/-/styled-system-3.1.0-0.tgz","fileCount":7,"integrity":"sha512-TumL/CljF0fk4CFUWHFlQw3iQFQu+mlOIKtgIeVx/JzV6xY8CXmezlMXLVrTF2s1dEs26UgcgskP22dUVpHbQw==","signatures":[{"sig":"MEQCIFeO4FYjRDHOneX8Eqnek3n9iR4Bgw4mJzH3bChHq3NtAiBhvY2q/IkIrvcAlx9D97Vuum3GV1J0yeNsJihFLIsX6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfvEBCRA9TVsSAnZWagAAE1IP/Rgh7dQdBsx+hPkhSMYF\nRYsVl/90nh8L0FI0RIrpDyGmbLZjMbJ+wmxsWhf1YPvIIsbSffQV1RRKB+Rr\n4oqEePtYro1JcqCQBOcMGE6zZAjzqlVTb4ZP9dmSjbiZQNGju+1UrgUOgtNF\nmz64B6KWtDZc1GUKWkJ2T+8VqbAXpygmRNpsghynXTi4GDYyg06Xk3rYAVlm\ntSweG5o+jcPbxOS2/1AkaSqrsliaX17P3aG8Ld3XlLie8mgmS7KSkDML5Dn2\ns/xb/P/sjs4bnk0dWfD11VjmEgXpnlx7i+KLsuFGzi4OJKSGJj3ViUZQKo5X\nMYmvavEgU+wDS8P39HXJ+q9dpeGm9LP6L8bc3hbDmRRKCmiRSfLAh+1KI+zV\nPavG0nHdTfuhs4F+CrJRhYKqV2WzBKygw8SiZUcR388u53FbiVCTtZxoQmX8\n6Uhu+hRnY19VTG3Ekcn0R0RUIIR+vuzKIjapy87o9tucHVw9cZj/9CIPxOq6\nDVhvzlZ47pQSzgaJ608xA+J9BfEZZ6iSKXqi4PvhXlEsHIViXxLgDJYCmlg+\nbwxtRNzqaZYm3TcGIiNdyxuAn2TwSSEAOrScFTUkrljyUHuMVw4Yy5LLPCpj\n5Kx7ja8MRYFtV76ChQHxLkm2PLFIaHAgCmk+s3u4DuOlhkF3A3n+WPuc4/af\n5cn0\r\n=u4N0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","name":"styled-system","author":{"name":"Brent Jackson"},"module":"dist/index.esm.js","readme":"\n<img src='docs/logo.svg' width='128' height='128' />\n\n# styled-system\n\nDesign system utilities for [styled-components][sc] and other css-in-js libraries\n\n[![Build Status][build-badge]][build]\n[![Coverage][coverage-badge]][coverage]\n[![Downloads][downloads-badge]][npm]\n[![Version][version-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/jxnblk/styled-system/master.svg?style=flat-square\n[build]: https://travis-ci.org/jxnblk/styled-system\n[coverage-badge]: https://img.shields.io/codecov/c/github/jxnblk/styled-system.svg?style=flat-square\n[coverage]: https://codecov.io/github/jxnblk/styled-system\n\n[downloads-badge]: https://img.shields.io/npm/dw/styled-system.svg?style=flat-square\n[version-badge]: https://img.shields.io/npm/v/styled-system.svg?style=flat-square\n[npm]: https://npmjs.com/package/styled-system\n\n```sh\nnpm i styled-system\n```\n\n## Features\n\n- Add style props that hook into your own theme\n- Responsive prop values for quickly setting responsive font-size, margin, padding, width, and more\n- Influenced by constraint-based design system principles\n- Typographic scale\n- Spacing scale for margin and padding\n- Default 8px grid\n- Works with any color palette\n- Works with most css-in-js libraries, including [styled-components][sc], [glamorous][glamorous], [emotion][emotion], [fela][fela], and [cxs][cxs]\n- Used in [Rebass](http://jxnblk.com/rebass), [Grid Styled](http://jxnblk.com/grid-styled/), and the [Priceline Design System](https://github.com/pricelinelabs/design-system)\n\n> \"This is honestly my favourite way to build UI components right now ![party parrot][party-parrot]\"\n>\n> – [Varun Vachhar][varun-post]\n\n[party-parrot]: https://github.com/jmhobbs/cultofthepartyparrot.com/raw/master/parrots/parrot.gif\n\n<!--\n> \"Fantastic set of tools that offer the ease and API of tachyons/functional CSS but, are way more customisable.\"\n>\n> – [Varun Vachhar](https://mobile.twitter.com/winkerVSbecks/status/955619873463431168)\n-->\n\n> \"The future of css-in-js is going to look something like styled-system with its responsive values.\"<br/>\n>\n> – [Kye Hohenberger](https://mobile.twitter.com/tkh44/status/905474043729416192)\n\n> \"Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for.\"<br/>\n>\n> – [Nathan Young](https://mobile.twitter.com/nathanyoung/status/891353221880360960)\n\n> \"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.\"\n>\n> – [David Yeiser][david-tweet]\n\n[dalgleish]: https://mobile.twitter.com/markdalgleish/status/913191186944241665\n[mrmrs]: https://mobile.twitter.com/mrmrs_/status/913189805055401984\n\n## Try It Out\n\nTry the [examples](examples) on CodeSandbox\n\n- [Basic](https://codesandbox.io/s/github/jxnblk/styled-system/tree/master/examples/basic)\n- [Emotion](https://codesandbox.io/s/github/jxnblk/styled-system/tree/master/examples/emotion)\n\n### Table of Contents\n\n- [Usage](#usage)\n- [Getting Started](#getting-started)\n- [Docs](#docs)\n- [Optional Packages](#optional-packages)\n- [Related](#related)\n\n## Usage\n\n```jsx\n// Example uses styled-components, but styled-system works with most other css-in-js libraries as well\nimport styled from 'styled-components'\nimport { space, width, fontSize, color } from 'styled-system'\n\n// Add styled-system functions to your component\nconst Box = styled.div`\n  ${space}\n  ${width}\n  ${fontSize}\n  ${color}\n`\n```\n\nEach style function exposes its own set of component props\nthat handle styles based on values defined in a theme.\n\n```jsx\n// width: 50%\n<Box width={1/2} />\n\n// font-size: 20px (theme.fontSizes[4])\n<Box fontSize={4} />\n\n// margin: 16px (theme.space[2])\n<Box m={2} />\n\n// padding: 32px (theme.space[3])\n<Box p={3} />\n\n// color\n<Box color='tomato' />\n\n// color: #333 (theme.colors.gray[0])\n<Box color='grays.0' />\n\n// background color\n<Box bg='tomato' />\n```\n\n## Responsive Style Props\n\nSet responsive width, margin, padding, font-size, and other properties with a shorthand array syntax.\n[Read more](docs/responsive-styles.md)\n\n```jsx\n// responsive width\n<Box width={[ 1, 1/2, 1/4 ]} />\n\n// responsive font-size\n<Box fontSize={[ 2, 3, 4 ]} />\n\n// responsive margin\n<Box m={[ 1, 2, 3 ]} />\n\n// responsive padding\n<Box p={[ 1, 2, 3 ]} />\n```\n\nTo learn more, see the [Getting Started](docs/getting-started.md) guide or read the docs.\n\n<!-- link shims for previous readme -->\n<a name='getting-started'></a>\n<a name='how-it-works'></a>\n<a name='responsive-styles'></a>\n<a name='api'></a>\n<a name='system-components'></a>\n<a name='default-theme'></a>\n<a name='troubleshooting'></a>\n<a name='cleanelement'></a>\n\n## Docs\n\n\n- [Getting Started](docs/getting-started.md)\n- [Responsive Styles](docs/responsive-styles.md)\n- [How it Works](docs/how-it-works.md)\n- [API](docs/api.md)\n  - [Core](docs/api.md#core)\n    - [space](docs/api.md#space) (margins & paddings)\n    - [width](docs/api.md#width)\n    - [fontSize](docs/api.md#fontsize)\n    - [color](docs/api.md#color) (and background-color)\n  - [Typography](docs/api.md#typography)\n  - [Layout](docs/api.md#layout)\n  - [Flexbox](docs/api.md#flexbox)\n  - [Borders](docs/api.md#borders)\n  - [Position](docs/api.md#position)\n  - [Misc](docs/api.md#misc)\n  - [Variants](docs/api.md#variant)\n  - [Utilities](docs/api.md#utilities)\n    - [get](docs/api.md#get)\n  - [Customize](docs/api.md#customize)\n    - [style](docs/api.md#style)\n    - [variant](docs/api.md#variant)\n- [Table of Style Functions](docs/table.md)\n- [Custom Props](docs/custom-props.md)\n- [Troubleshooting](docs/troubleshooting.md)\n\n## Optional Packages\n\n- [clean-tag](clean-tag)\n- [system-components](system-components)\n- [system-loader](system-loader)\n- [system-classnames](system-classnames)\n- [clean-element](clean-element)\n\n---\n\n## Further Reading\n\n- [Component Based Design System With Styled-System][varun-post]\n\n\n## Related\n\n- [system-components](https://github.com/jxnblk/styled-system/tree/master/system-components)\n- [grid-styled](https://github.com/jxnblk/grid-styled)\n- [Rebass](http://jxnblk.com/rebass)\n- [Compositor Lab](https://compositor.io/lab)\n- [styled-components][sc]\n- [glamorous][]\n- [emotion][]\n- [fela][]\n- [nano-style][]\n- [cxs][]\n\n[sc]: https://github.com/styled-components/styled-components\n[glamorous]: https://github.com/paypal/glamorous\n[emotion]: https://github.com/emotion-js/emotion\n[fela]: https://github.com/rofrischmann/fela\n[nano-style]: https://github.com/jxnblk/nano-style\n[cxs]: https://github.com/jxnblk/cxs\n[varun-post]: https://varun.ca/styled-system/\n[david-tweet]: https://mobile.twitter.com/davidyeiser/status/965920740582285312\n\n<!-- new links -->\n[cole-tweet]: https://mobile.twitter.com/colebemis/status/996565848138526721\n[mrmrs-elements]: https://github.com/mrmrs/elements\n[broccs-react-starter]: https://github.com/broccolini/react-website-starter\n[dalgleish]: https://mobile.twitter.com/markdalgleish/status/913191186944241665\n\n[MIT License](LICENSE.md)\n","gitHead":"f5ed613b91900058aa546b34faca6041984d4f26","license":"MIT","scripts":{"docs":"x0 build docs -d site","logo":"repng docs/Logo.js -d docs -f logo.png -w 512 -h 512 -p '{\"size\":512}'","size":"bundlesize","test":"NODE_ENV=test nyc ava","bench":"node bench","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov","start":"x0 docs","codecov":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","prepare":"rollup -c","logo-svg":"scrs docs/Logo.js --svg > docs/logo.svg","pkg:test":"node scripts/test","pkg:clean":"node scripts/clean","pkg:prepare":"node scripts/run install"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"homepage":"https://github.com/jxnblk/styled-system#readme","keywords":["react","css-in-js","styled-components","glamorous"],"bundlesize":[{"path":"dist/*.js"}],"repository":{"url":"git+https://github.com/jxnblk/styled-system.git","type":"git"},"_npmVersion":"6.4.0","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","directories":{},"maintainers":[{"name":"johno","email":"johnotander@gmail.com"},{"name":"jxnblk","email":"jxnblk@gmail.com"}],"sideEffects":false,"_nodeVersion":"10.4.0","dependencies":{"prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"ava":"^0.25.0","nyc":"^12.0.2","scrs":"^1.1.0","is-ci":"^1.1.0","react":"^16.4.0","repng":"^3.0.0","sinon":"^4.3.0","rebass":"^2.0.0-7","rollup":"^0.64.1","codecov":"^3.0.3","babel-cli":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.17.0","lodash.sortby":"^4.7.0","@compositor/x0":"^6.0.2","babel-register":"^6.24.1","babel-preset-env":"^1.7.0","styled-components":"^3.3.2","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.0","rollup-plugin-babel":"^3.0.7","babel-preset-stage-0":"^6.24.1","rollup-plugin-commonjs":"^9.1.5","rollup-plugin-node-resolve":"^3.3.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2"},"_npmOperationalInternal":{"tmp":"tmp/styled-system_3.1.0-0_1535045889108_0.8573041590911215","host":"s3://npm-registry-packages"},"_id":"styled-system@3.1.0-0","version":"3.1.0-0"}