{"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":"10c89ecb2e762743bf6be962c9f9b1234c4a1ee1","tarball":"https://registry.npmjs.org/styled-system/-/styled-system-3.0.0-0.tgz","fileCount":9,"integrity":"sha512-Jj4iWRUQrWMRuFOCaHRwgoGquk1b3D5vIl5YGLsROiLEwRezikAsJ6KS5jgJIptvVYgTr3HiQOCfNuZENlCM2w==","signatures":[{"sig":"MEYCIQDz+jeRd7FJdNXbtOyeyC9poZIgj+kV/xPSQAHQ8FJSYAIhANblkKSVm9a6TtMJSNRDpTGCdhzNspihzBiKFKyAMSOL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":41394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbQSfyCRA9TVsSAnZWagAAzwIQAJ+SBRhpLMN8Zq5/nRc3\nzH21lGH++0J+4p+rbK5vUqtCmwelx+eVP3VHkPyzE0CTft1McDdn9tslbDD/\n2DMuvCtagnRxPTicScsZOPkf1pOH3zG11ZCqYURIKTeCJfl9E2C4LlxUA95n\nrGJ5btT3O7FVo3oxcuBqKjdK9222qgaoynbQCSjmDvL/LdH3YYmZjw/rgt2E\nJhhi/A8+9SqdYNopyCCHCyHLteU8966qtLCohCvR+PsjBa0dirbfitFq9TdL\nx9REynLGcYFnWFhfOPUTV8yYZFJGDnpbGdjvSu5AG873MXLZdbn2N8/IeEbB\n91cv+9aKY6FhjxjFotKo4B9KVK1/vcdyoYi2ypYSl1O2puM5qpeI4PJzAL6y\nD+DBb4thboF9z/T3q1eQ8O446n7JDDSGRpXcnY7yNQEzxRe7UE7zjfmiOG98\nMCPY0o8uHUYhsY1a3wgRQBKVQvoluoBxymh9E54CkfhEuqwgeAfNlP5tuFP4\nQvgOrgghLUFPY+usun/psvEoE4A/m+C87JAUVRUuwCWwkuL4+wwe0QRLonae\nlmK/yMqFF1Q2wdeWT/bNboaCir0C+gvX4bDBqIcGksSdb+9dlrm889bf9sxW\nXDut/pmQZSLMQ48StDxj4N0oBLPO7dsY1eCoGjYHaEAZ/gPocjn3jdthVzas\nUKjy\r\n=uVPE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"styled-system","author":{"name":"Brent Jackson"},"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### 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-responsive) (margins & paddings)\n    - [width](docs/api.md#width-responsive)\n    - [fontSize](docs/api.md#fontsize-responsive)\n    - [color](docs/api.md#color-responsive) (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  - [Pseudo-classes](docs/api.md#pseudo-classes)\n  - [Complex styles](docs/api.md#complex-styles)\n  - [Utilities](docs/api.md#utilities)\n    - [themeGet](docs/api.md#themeget)\n    - [propTypes](docs/api.md#proptypes)\n  - [Customize](docs/api.md#customize)\n    - [style](docs/api.md#style)\n    - [responsiveStyle](docs/api.md#responsivestyle)\n    - [pseudoStyle](docs/api.md#pseudostyle)\n    - [complexStyle](docs/api.md#complexstyle)\n  - [Default Theme](docs/api.md#default-theme)\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/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][glamorous]\n- [emotion][emotion]\n- [fela][fela]\n- [nano-style][nano-style]\n- [cxs][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":"f809a776bd971eafc3b78c4623af7a5f851d22b1","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":"nyc ava","bench":"node bench","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","start":"x0 docs","prepare":"babel src -d dist","logo-svg":"scrs docs/Logo.js --svg > docs/logo.svg","pkg:test":"node scripts/test","pkg:clean":"node scripts/clean","prepare-v2":"babel ref -d _dist","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.1.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"}],"_nodeVersion":"8.1.2","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","codecov":"^3.0.2","babel-cli":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.17.0","lodash.sortby":"^4.7.0","@compositor/x0":"^6.0.0-4","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","babel-preset-stage-0":"^6.24.1"},"_npmOperationalInternal":{"tmp":"tmp/styled-system_3.0.0-0_1530996722278_0.7346089570270002","host":"s3://npm-registry-packages"},"_id":"styled-system@3.0.0-0","version":"3.0.0-0"}