{"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":"085a823496ecf87e496beb570d12ab5aef228e30","tarball":"https://registry.npmjs.org/styled-system/-/styled-system-3.0.0-5.tgz","fileCount":10,"integrity":"sha512-dsWrL+4inSfQbfHBO7kQaySAWZVeuxt3u92mz+nHxWrK903BVGSiMlqU4B7XVZlydP3qWhpfFAoX47LoBEBZKQ==","signatures":[{"sig":"MEUCIQCEksam40xTgHrcVT4Y9REwcLFfzSPbPaX8WyAy8NMGkwIgHowoj5OWfCeUrag1oGYUPM9nMjhRT8gdTT0C5Sh5dBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbR6/KCRA9TVsSAnZWagAAvYIP/2RP9unq0ZlE/PE91XzS\nAAGDInKvB09WRvXpC7VvC2uXFmBpof6Aw5nZDziDV9hbUtRG3lXQqdHVtfZA\nxBRKUrWRU+aV1zeahvBo9F20kulWhn0zCVrTKs2h5n+sMzKc1O5Vhvt9a/EJ\nwqz/X4mNk5u9lyV3bgbVU0YbHPv/pX9Wp0FydIYzMl3V6YQzgDwgdzWsEknB\nOc9xZi5/Cd11K2zWlqJC56EoTKMXU+muicAqYK1bZnayEB6uEo3YPa89aWbv\nIbQ0HIZj9fh4uV6v1gWjKdjmrdHP1u/xQksocmsrNovsvnVDQKT7b7/Rt++0\naLdVz912mDhTideXp/gJsb+dz4qLFtJtdyBO/CaOnAhT7JVnBnV3B05s9Qp5\nVOSLjpyzYMuOK17EzbkBnYzRFWtCNsoIpeMVhnJQCgWSItUUONfH5AHsY3Pe\ni1RViMgerblFv1eRPYBdGZLILHjjMfmu+wxRXhikJZPaUtkPp2iKEGkpkjRR\nQ9xdeiIDuvFnt3A4jDOwaoiEZ/MpIW92CbXHJT1IOsnSI04w0whMgCH3Q5cF\nMD4NNqgCH3zkcpH7Gel1XYAKPvG+t7PpLlFP1RvZVYFmS5DYTxJbNlhCOn8E\nKfYImFwitYb4zajXGHm+93RKgBkk15U2ktTuNYgQNlPR2l8tsDH8FVXb6Yq1\nvZ+I\r\n=Ic6e\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) (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/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":"e46ca72e5876c18b8ff8716c0ad69cd66c1b2259","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","start":"x0 docs","codecov":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","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"}],"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","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","babel-preset-stage-0":"^6.24.1"},"_npmOperationalInternal":{"tmp":"tmp/styled-system_3.0.0-5_1531424714709_0.8482311383792664","host":"s3://npm-registry-packages"},"_id":"styled-system@3.0.0-5","version":"3.0.0-5"}