{"_id":"@bentatum/rebass","_rev":"3-13f084cd6640e969b10daa6966f8233e","name":"@bentatum/rebass","description":"Configurable React Stateless Functional UI Components","dist-tags":{"latest":"0.2.7"},"versions":{"0.2.7":{"name":"@bentatum/rebass","version":"0.2.7","description":"Configurable React Stateless Functional UI Components","author":{"name":"Brent Jackson"},"license":"MIT","scripts":{"prepublish":"mkdir -p dist && babel src --out-dir dist","static":"static-react docs/components/Root.js --props docs/data.js > build/index.html","build":"mkdir -p build && mkdir -p build/demo && npm run static && npm run demo && npm run copy","copy":"cp demo/bundle.js build/demo && cp demo/index.html build/demo","demo":"webpack -p --progress --colors --config demo/webpack.config.js","demo:dev":"webpack-dev-server --progress --colors --config demo/webpack.config.js","deploy":"./deploy.sh","_deploy":"gh-pages -d build","watch":"npm run start && onchange 'src/**/*' 'docs/**/*' -- npm run start","test:watch":"mocha test --watch --compilers js:babel-register","test":"standard && mocha test --compilers js:babel-register"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0"},"devDependencies":{"babel-cli":"^6.5.1","babel-core":"^6.5.2","babel-loader":"^6.2.4","babel-preset-es2015":"^6.5.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","babel-register":"^6.5.2","expect":"^1.14.0","gh-pages":"^0.11.0","gx":"^1.0.0-rc3","jsdom":"^9.2.1","json-loader":"^0.5.4","jsonp":"^0.2.0","mocha-jsdom":"^1.1.0","mocha":"^2.4.5","object-assign":"^4.1.0","onchange":"^2.0.0","react":"^15.0.1","react-addons-test-utils":"^15.0.1","react-component-permutations":"^1.0.0-beta2","react-docgen":"^2.7.0","react-dom":"^15.1.0","react-element-to-jsx-string":"^3.0.0","react-geomicons":"^2.0.5","react-router":"^2.4.1","reflexbox":"^1.1.0","standard":"^7.1.1","static-react":"^3.1.0","webpack":"^1.13.1","webpack-dev-server":"^1.14.1"},"keywords":["components","react","react-component","ui","presentational","stateless","functional"],"main":"dist/index.js","repository":{"type":"git","url":"git+https://github.com/jxnblk/rebass.git"},"bugs":{"url":"https://github.com/jxnblk/rebass/issues"},"homepage":"https://github.com/jxnblk/rebass","dependencies":{"classnames":"^2.2.3","object-assign":"^4.0.1"},"standard":{"ignore":["docs/**/*","demo/**/*"],"globals":["before","after","beforeEach","afterEach","context","describe","it"]},"eslintConfig":{"parser":"babel-eslint"},"gitHead":"8c7cfb877fd7e16a0d9c843d94cad665d0143746","_id":"@bentatum/rebass@0.2.7","_shasum":"619612fbf3d9ef8c4edfddc974ca3cf2ef5de104","_from":".","_npmVersion":"3.5.2","_nodeVersion":"5.2.0","_npmUser":{"name":"bentatum","email":"bentatum@me.com"},"dist":{"shasum":"619612fbf3d9ef8c4edfddc974ca3cf2ef5de104","tarball":"https://registry.npmjs.org/@bentatum/rebass/-/rebass-0.2.7.tgz","integrity":"sha512-IKSjg3gmRGCTG705t3LuE90NnsMuZ+XuW261J6J210/TwDOGNp2YsUhcTPPpm1LNQrI9ljySFQYywE4+nFr56w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGHRDgWH+wjWWrL77jkUKTOZUS24aREfan1eEkwgiLCAIgA8KS+BV6iM/7bVhvCXcV/wBp1YKDqtW4HpVNCJvgJe4="}]},"maintainers":[{"name":"bentatum","email":"bentatum@me.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/rebass-0.2.7.tgz_1466780831640_0.9072777216788381"}}},"readme":"# Rebass\n\nConfigurable React Stateless Functional UI Components\n\n[![Build Status](https://travis-ci.org/jxnblk/rebass.svg?branch=master)](https://travis-ci.org/jxnblk/rebass)\n[![Code Climate](https://codeclimate.com/github/jxnblk/rebass/badges/gpa.svg)](https://codeclimate.com/github/jxnblk/rebass)\n\nhttp://jxnblk.com/rebass\n\n## Features\n\n- Uses inline styles\n- No CSS dependencies\n- No leaky global styles\n- [Presentational components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963) work with any application architecture\n- [Configurable](#configuration) with React Context\n- Great for prototyping\n- Production ready\n- [Tested](https://travis-ci.org/jxnblk/rebass)\n\nRebass is a React UI component library that uses inline styles to avoid CSS dependencies and prevent leaky global styles from affecting an application. Rebass components are built as stateless functional components and modeled as <a href='https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963'>presentational components</a>. With unit tests for each component, Rebass is great for prototyping and ready for production.\n\n## Getting Started\n\n```bash\nnpm i rebass\n```\n\n```jsx\nimport React from 'react'\nimport { Button, Badge } from 'rebass'\n\nclass App extends React.Component {\n  render () {\n    return (\n      <App>\n        <Button>Button</Button>\n        <Badge>Badge</Badge>\n      </App>\n    )\n  }\n}\n```\n\n## Component Documentation\n\nEach component exposes a simple API of props. View the source code or see <http://jxnblk.com/rebass> for more information.\n\n## Architectural Approach\n\nRebass is built around a component architectural approach inspired by Dan Abramov’s\n[Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963),\nwhere presentational components are the only ones that encapsulate styles and contain no application logic,\nand container components do not contain any styles or DOM markup and handle all the application logic.\n\nRebass only contains presentational components,\nwhich means controlling things like progressive disclosure mechanisms\nor dropdown menus should be handled at a higher level in container components.\nTherefore, Rebass itself does not require any client-side JavaScript,\nis well suited to server-side rendering,\nand can fit into virtually any higher level application architecture.\n\n## Configuration\n\nGlobal theme styles are set using\n[React Context](https://facebook.github.io/react/docs/context.html).\nThis means that the default global styles can be configured,\nand component-specific styles can be added to customize on a per-component basis.\n\nView the [demo](http://jxnblk.com/rebass/demo) to see some configuration options in action.\n\nTo configure the theme, add `childContextTypes` and `getChildContext` to your root component.\n\n```jsx\nclass App extends React.Component {\n  static childContextTypes = {\n    rebass: React.PropTypes.object\n  }\n\n  getChildContext () {\n    return {\n      rebass: {\n        colors: myCustomColors,\n        fontSizes: [ 64, 48, 24, 18, 16, 14, 12],\n        Button: {\n          backgroundColor: 'tomato'\n        }\n      }\n    }\n  }\n\n  render () {\n    // ...\n  }\n}\n```\n\nAfter setting context in the root component, all instances of Rebass components will use these values throughout the app.\nFor reference to the default values, see [`/src/config.js`](src/config.js).\n\nTo alter per-component styles, pass a style object that matches the name of the component,\nlike the `Button` object in the example above.\n\n## Per-Instance Overrides\n\nComponents accept overrides using the `style` prop to handle any one-off situations.\nFor example, to remove the margin bottom from an Input for a particular situation, do the following\n\n```jsx\n<Input\n  name='input_name'\n  label='Input Label'\n  style={{ border: 0 }} />\n```\n\n## Base Styles\n\nRebass components inherit styles where appropriate.\nSet your own base styles for color and fonts to customize the overall look and feel of an application.\nIt's recommended that you use `* { box-sizing: border-box }` and set `line-height: 1.5` on the body.\n\n**Example**\n\n```css\n* { box-sizing: border-box}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n  line-height: 1.5;\n  color: #111;\n  background-color: #fff;\n}\n```\n\n## Styling with CSS\n\nAlthough it's not recommended to use extensively, components can be styled with CSS.\nEach component has a className that matches the component name.\nTo control things like button hover styles, this can be a convenient way to style pseudo-classes.\nNote, that due to the use of inline styles, some properties may need to be overridden with an `!important` flag.\n\n```css\n.Button:hover {\n  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.125);\n}\n```\n\n---\n\n*Note: Unlike previous versions, Rebass is no longer explicitly associated with Basscss,\nbut shares a similar approach to application-agnostic UI development.*\n\n[MIT License](.github/LICENSE.md)\n\n","maintainers":[{"name":"bentatum","email":"bentatum@me.com"}],"time":{"modified":"2022-06-12T15:11:08.198Z","created":"2016-06-24T15:07:13.953Z","0.2.7":"2016-06-24T15:07:13.953Z"},"homepage":"https://github.com/jxnblk/rebass","keywords":["components","react","react-component","ui","presentational","stateless","functional"],"repository":{"type":"git","url":"git+https://github.com/jxnblk/rebass.git"},"author":{"name":"Brent Jackson"},"bugs":{"url":"https://github.com/jxnblk/rebass/issues"},"license":"MIT","readmeFilename":"README.md"}