{"_id":"@braposo/styled-system","_rev":"1-e2ac55f5e72a67235bcacd0b5cdefa7f","name":"@braposo/styled-system","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","dist-tags":{"latest":"1.0.0-2.beta.1"},"versions":{"1.0.0-2.beta.1":{"name":"@braposo/styled-system","version":"1.0.0-2.beta.1","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepublish":"babel src -d dist","start":"webpack-dev-server","build":"NODE_ENV=production webpack -p","test":"ava"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"ava":"^0.19.1","babel-cli":"^6.24.1","babel-core":"^6.25.0","babel-loader":"^7.0.0","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-register":"^6.24.1","funcup":"^1.0.0-0","grid-styled":"^2.0.0-2","react":"^15.6.0","react-dom":"^15.6.0","react-live":"^1.6.1","react-test-renderer":"^15.5.4","react-x-ray":"^1.0.0-2","webpack":"^2.6.1","webpack-dev-server":"^2.4.5"},"dependencies":{"glamorous":"^3.23.2","styled-components":"^2.1.0"},"gitHead":"8d4c077e135b80ad0a621d494e00caeb1fe8dd04","_id":"@braposo/styled-system@1.0.0-2.beta.1","_npmVersion":"5.0.0","_nodeVersion":"7.10.0","_npmUser":{"name":"braposo","email":"braposo@gmail.com"},"dist":{"integrity":"sha512-IUa2W5Mld/v1Q33oWCrvpQnhcRctUHEIzl8uGQkYO5KXZli3qUeoMwbNZjGynUCmRLU9ss1aIRhqAhtd1zADDg==","shasum":"775a1f51c12c1b64c6c0aa51b2afc248ac342af1","tarball":"https://registry.npmjs.org/@braposo/styled-system/-/styled-system-1.0.0-2.beta.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZneO+y2M/4YYkmCRfssE+1kWFu4d/NGWFhSd1BuQZZQIgJuSRbf0VC770QoUX5rrLqfXBt96uB87VyYpZ9lx6na4="}]},"maintainers":[{"name":"braposo","email":"braposo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system-1.0.0-2.beta.1.tgz_1497782815545_0.07686793082393706"}}},"readme":"# styled-system\n\nDesign system utilities for styled-components, glamorous, and other css-in-js libraries\n\n[![Build Status](https://travis-ci.org/jxnblk/styled-system.svg?branch=master)](https://travis-ci.org/jxnblk/styled-system)\n\n```sh\nnpm i styled-system\n```\n\n## Usage\n\n```jsx\n// With styled-components\nimport styled from 'styled-components'\nimport { space, width, fontSize } from 'styled-system'\n\nconst Box = styled.div`\n  ${space}\n  ${width}\n  ${fontSize}\n`\n```\n\n```jsx\n// Or with glamorous\nimport glamorous from 'glamorous'\nimport { space, width, fontSize } from 'styled-system'\n\nconst Box = glamorous.div(space, width, fontSize)\n```\n\n```jsx\n// width: 50%\n<Box width={1/2} />\n\n// font-size: 20px\n<Box fontSize={4} />\n\n// margin: 16px\n<Box m={2} />\n\n// padding: 32px\n<Box p={3} />\n\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\n## width\n\n```js\nimport { width } from 'styled-system'\n```\n\nThe width utility parses a component's `width` prop and converts it into a CSS width declaration.\n\nNumbers from 0-1 are converted to percentage widths.\nNumbers greater than 1 are converted to pixel values.\nString values are passed as raw CSS values.\nAnd arrays are converted to [responsive width styles](#responsive-styles).\n\n## fontSize\n\n```js\nimport { fontSize } from 'styled-system'\n```\n\nThe fontSize utility parses a component's `fontSize` prop and converts it into a CSS font-size declaration.\nNumbers from 0-8 are converted to values on the [font size scale](#font-size-scale).\nNumbers greater than 8 are converted to raw pixel values.\nString values are passed as raw CSS values.\nAnd array values are converted into [responsive values](#responsive-styles).\n\n## space\n\n```js\nimport { space } from 'styled-system'\n```\n\nThe space utility converts shorthand margin and padding props to margin and padding CSS declarations.\nNumbers from 0-4 are converted to values on the [spacing scale](#spacing-scale).\nNegative values can be used for negative margins.\nNumbers greater than 4 are converted to raw pixel values.\nString values are converted passed as raw CSS values.\nAnd array values are converted into [responsive values](#responsive-styles).\n\nMargin and padding props follow a shorthand syntax for specifying direction.\n\n- `m`:  margin\n- `mt`: margin-top\n- `mr`: margin-right\n- `mb`: margin-bottom\n- `ml`: margin-left\n- `mx`: margin-left and margin-right\n- `my`: margin-top and margin-bottom\n- `p`:  padding\n- `pt`: padding-top\n- `pr`: padding-right\n- `pb`: padding-bottom\n- `pl`: padding-left\n- `px`: padding-left and padding-right\n- `py`: padding-top and padding-bottom\n\n\n## Responsive Styles\n\nAll props accept arrays as values for mobile-first responsive styles.\n\n```jsx\n// 100% below the smallest breakpoint,\n// 50% from the next breakpoint and up,\n// and 25% from the next breakpoint and up\n<Box w={[ 1, 1/2, 1/4 ]} />\n\n// responsive font size\n<Box fontSize={[ 1, 2, 3, 4 ]} />\n\n// responsive margin\n<Box m={[ 1, 2, 3, 4 ]} />\n\n// responsive padding\n<Box p={[ 1, 2, 3, 4 ]} />\n```\n\n## Breakpoints\n\nstyled-system uses a mobile-first responsive approach,\nwhere any value set works from that breakpoint and wider.\nThe default set of breakpoints aims to cover a wide range of devices from mobile to desktop.\nBreakpoints can be customized using styled-components' [ThemeProvider](#configuration).\n\n```js\n[ 40, 52, 64 ]\n// @media screen and (min-width: 40em)\n// @media screen and (min-width: 52em)\n// @media screen and (min-width: 64em)\n```\n\n## Font Size Scale\n\nUsing a typographic scale helps create visual rhythm and reduces the\nnumber of decisions needed when designing UI.\nStyled system uses a modular scale that covers most of a UI's needs,\nbut it can be customized with styled-components' [ThemeProvider](#configuration).\n\n```js\n[ 12, 14, 16, 20, 24, 32, 48, 64, 72 ]\n```\n\n## Spacing Scale\n\nUsing a scale for spacing helps ensure elements line up, even when nested inside one another.\nstyled-system uses a spacing scale based on an 8px, powers-of-two grid for margin and padding\nby default and can be customized with styled-components' [ThemeProvider](#configuration).\n\n```js\n[ 0, 8, 16, 32, 64 ]\n```\n\n## Configuration\n\nstyled-system can be configured with styled-components'\n[ThemeProvider](https://www.styled-components.com/docs/advanced#theming)\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\n// or import { ThemeProvider } from 'glamorous'\nimport MyComponent from './MyComponent'\n\nconst theme = {\n  breakpoints: [\n    32, 48, 64\n  ],\n  space: [\n    0, 6, 12, 18, 24\n  ],\n  fontSizes: [\n    12, 16, 18, 24, 36, 72\n  ]\n}\n\nconst App = props => (\n  <ThemeProvider theme={theme}>\n    <MyComponent\n      fontSize={4}\n      my={[ 2, 3 ]}\n    />\n  </ThemeProvider>\n)\n```\n\n## Related\n\n- [styled-components](https://github.com/styled-components/styled-components)\n- [glamorous](https://github.com/paypal/glamorous)\n- [grid-styled](https://github.com/jxnblk/grid-styled)\n\nMIT License\n\n","maintainers":[{"name":"braposo","email":"braposo@gmail.com"}],"time":{"modified":"2022-04-04T20:26:53.153Z","created":"2017-06-18T10:46:56.899Z","1.0.0-2.beta.1":"2017-06-18T10:46:56.899Z"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","readmeFilename":"README.md"}