radium - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

docs/guides/computed-styles.md

		@@ -7,3 +7,3 @@ # Computed Styles in Radium

		To use computed styles, add a `computed` property to your Radium style object under your default styles, any modifier, or any browser state:
		To use computed styles, add a `computed` property to your Radium style object under your default styles, any modifier, or any browser state. In this example, we use the [color](https://www.npmjs.com/package/color) module to lighten the element's background color.

		@@ -17,3 +17,3 @@ ```js
		backgroundColor: function (styles) {
		return darken(styles.backgroundColor, 20);
		return color(styles.backgroundColor).lighten(0.2).hexString()
		}
		@@ -20,0 +20,0 @@ }

package.json

		{
		"name": "radium",
		"version": "0.9.0",
		"description": "",
		"version": "0.9.1",
		"description": "A set of tools to manage inline styles on React elements",
		"main": "modules/index.js",
		@@ -6,0 +6,0 @@ "repository": {

107

README.md

		# Radium

		Radium is a toolchain for handling modifiers, states, computed styles and
		responsive styles when working with inline styles in react components
		(at Formidable, we call this _component styling_ because styles are specific to,
		and scoped to, the component rather than in external style sheets).
		Radium allows you to handle complex component styling in a declarative,
		easy to write way. Component styling in React provides a number of
		benefits over traditional CSS:
		```
		npm install radium
		```

		- Scoped styles, meaning no more global variables
		Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

		_Inspired by_ <a href="https://speakerdeck.com/vjeux/react-css-in-js">React: CSS in JS</a>
		by <a href="https://twitter.com/Vjeux">Christopher Chedeau</a>.

		## Overview

		Eliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:

		- Scoped styles without selectors
		- Avoids specificity conflicts
		@@ -17,5 +22,13 @@ - Source order independence

		Inspired by <a href="https://speakerdeck.com/vjeux/react-css-in-js">React: CSS
		in JS</a> by <a href="https://twitter.com/Vjeux">Christopher Chedeau</a>.
		Despite that, there are some common CSS features and techniques that inline styles don't easily accommodate: media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!). Radium offers a standard interface and abstractions for dealing with these problems.

		When we say expressive, we mean it: math, concatenation, regex, conditionals, functions–JavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.

		## Features

		* Modifier styles based on component props
		* Media queries
		* Browser state styles to support `:hover`, `:focus`, and `:active`
		* Dynamic computed styles

		## Docs
		@@ -29,44 +42,58 @@

		## What does it look like?
		## Usage

		Start by writing a style object with a combination of default styles, browser states, media queries, and modifiers. Pass the object to `this.buildStyles()` and Radium will determine the correct group of style rules to apply to your component.

		```xml
		<Button kind='primary'>Radium Button</Button>
		```

		```js
		render: function () {
		var styles = {
		padding: '1.5em',
		borderRadius: 4,
		font-size: window.devicePixelRatio === 2 ? "16px" : "14px",
		height: function () {
		return window.innerWidth / 2 + "px";
		},
		var React = require('react');
		var { StyleResolverMixin, BrowserStateMixin } = require('radium');
		var color = require('color');

		states: [
		{ hover: { color: '#fff' }},
		{ focus: { boxShadow: '0 0 0 5px'}}
		],
		var Button = React.createClass({
		mixins: [ StyleResolverMixin, BrowserStateMixin ],

		mediaQueries: [
		{ small: { margin: 10 }},
		{ large: { margin: 30 }}
		],
		render: function () {
		var styles = {
		padding: '1.5em 2em',
		border: 0,
		borderRadius: 4,
		color: '#fff',
		cursor: 'pointer',
		fontSize: 16,
		fontWeight: 700,

		modifiers: [
		{
		type: {
		states: [
		{ hover: {
		background: color('#0074d9').lighten(0.2).hexString()
		}},
		{ focus: {
		boxShadow: '0 0 0 3px #eee, 0 0 0 6px #0074D9',
		outline: 'none'
		}}
		],

		modifiers: [
		{ kind: {
		primary: { background: '#0074D9' },
		warning: { background: '#FF4136' }
		}
		}
		]
		};
		}}
		]
		};

		return (
		<div style={this.buildStyles(styles)} />
		);
		}
		return (
		<button
		{...this.getBrowserStateEvents()}
		style={this.buildStyles(styles)}
		>
		{this.props.children}
		</button>
		);
		}
		});
		```

		For more in-depth usage, see the [overview guide](docs/guides/overview.md).

		## Examples
		@@ -73,0 +100,0 @@

radium - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics