Merge branch 'css-in-js' into css-individual

README.md

@@ -2,7 +2,7 @@
 
 [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-Material-UI is a CSS framework and a set of [React](http:https://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html) specification.
+Material-UI is a set of [React](http:https://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html) specification.
 
 Check out our [documentation site](http:https://www.material-ui.com/) for live examples. It's still a work in progress, but hopefully you can see where we're headed.
 
@@ -17,8 +17,7 @@ Material-UI is available as an [npm package](https://www.npmjs.org/package/mater
 npm install material-ui
 ```
 
-Use [browserify](http:https://browserify.org/) and [reactify](https://github.com/andreypopp/reactify) for dependency management and JSX transformation. The CSS framework is written in [Less](http:https://lesscss.org/), so you'll need to compile that as well. For [Sass](http:https://www.sass-lang.com) users, [material-ui-sass](https://github.com/gpbl/material-ui-sass) contains the .scss version of the Less framework. People working with [Stylus](http:https://learnboost.github.io/stylus/) can use [material-ui-stylus](https://github.com/Autarc/material-ui-stylus) to import
-the proper .styl version of the files.
+Use [browserify](http:https://browserify.org/) and [reactify](https://github.com/andreypopp/reactify) for dependency management and JSX transformation. 
 
 ### React-Tap-Event-Plugin
 Some components use [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) to
@@ -63,19 +62,11 @@ module.exports = MyAwesomeReactComponent;
 
 ## Customization
 
-The styles are separated into 2 less files:
-* src/less/scaffolding.less
-* src/less/components.less
+Material-UI components have their styles defined inline. There are two approaches to overriding these styles:
+* [Override individual component styles via the `style` prop](http:https://material-ui.com/#/customization/inline-styles)
+* [Define a Theme to apply overarching style changes](http:https://material-ui.com/#/customization/themes)
 
-This allows you to override any variables defined in [custom-variables.less](https://github.com/callemall/material-ui/blob/master/src/less/variables/custom-variables.less) without having to modify material-ui source files directly. For example, your main.less file could look something like this:
-```less
-@import "node_modules/material-ui/src/less/scaffolding.less";
-
-//Define a custom less file to override any variables defined in scaffolding.less
-@import "my-custom-overrides.less";
-
-@import "node_modules/material-ui/src/less/components.less";
-```
+This allows you to override variables used by components without having to modify material-ui source files directly.
 
 ## Examples
 There are 2 projects that you can look at to help you get started. The first project can be found in the [example folder](https://github.com/callemall/material-ui/tree/master/example). This is a basic project that shows how you can consume material-ui components in your own project.

docs/src/app/app-routes.jsx

@@ -51,7 +51,7 @@ var AppRoutes = (
  <Route name="colors" handler={Colors} />
  <Route name="themes" handler={Themes} />
  <Route name="inline-styles" handler={InlineStyles} />
- <Redirect from="/customization" to="inline-styles" />
+ <Redirect from="/customization" to="themes" />
  </Route>
 
  <Route name="components" handler={Components}>

docs/src/app/components/master.jsx

@@ -43,7 +43,7 @@ class Master extends React.Component {
  onLeftIconButtonTouchTap={this._onLeftIconButtonTouchTap}
  title={title}
  zDepth={0}
- iconClassNameRight="muidocs-icon-custom-github"/>
+ iconElementRight={githubButton}/>
 
  <AppLeftNav ref="leftNav" />
 
@@ -64,7 +64,6 @@ class Master extends React.Component {
  _onLeftIconButtonTouchTap() {
  this.refs.leftNav.toggle();
  }
-
 }
 
 Master.contextTypes = {

docs/src/app/components/pages/customization.jsx

@@ -1,12 +1,12 @@
 var React = require('react'),
  PageWithNav = require('./page-with-nav.jsx');
 
-class CssFramework extends React.Component {
+class Customization extends React.Component {
 
  render() {
  var menuItems = [
- { route: 'inline-styles', text: 'Inline Styles'},
  { route: 'themes', text: 'Themes'},
+ { route: 'inline-styles', text: 'Inline Styles'},
  { route: 'colors', text: 'Colors'}
  ];
 
@@ -17,4 +17,4 @@ class CssFramework extends React.Component {
 
 }
 
-module.exports = CssFramework;
+module.exports = Customization;

docs/src/app/components/pages/customization/themes.jsx

@@ -48,7 +48,7 @@ class ThemesPage extends React.Component {
 
  render() {
 
- var usageCode = 
+ var usageCodeES6 = 
  'var React = require(\'react\');\n' +
  'var mui = require(\'mui\');\n' +
  'var ThemeManager = new mui.Styles.ThemeManager();\n\n' +
@@ -57,7 +57,7 @@ class ThemesPage extends React.Component {
  ' getChildContext() { \n' +
  ' return {\n' +
  ' theme: ThemeManager.getCurrentTheme()\n' +
- ' }\n' +
+ ' };\n' +
  ' }\n' +
  '};\n\n' +
  '// Important!\n' +
@@ -66,6 +66,24 @@ class ThemesPage extends React.Component {
  '};\n\n' +
  'module.exports = OuterMostParentComponent;';
 
+ var usageCodeES5 = 
+ 'var React = require(\'react\');\n' +
+ 'var mui = require(\'mui\');\n' +
+ 'var ThemeManager = new mui.Styles.ThemeManager();\n\n' +
+ 'var OuterMostParentComponent = React.createClass ({\n' +
+ ' // Important!\n' +
+ ' childContextTypes: {\n' +
+ ' theme: React.PropTypes.object\n' +
+ ' },\n\n' +
+ ' // Important!\n' +
+ ' getChildContext: function() { \n' +
+ ' return {\n' +
+ ' theme: ThemeManager.getCurrentTheme()\n' +
+ ' };\n' +
+ ' }\n' +
+ '});\n\n' +
+ 'module.exports = OuterMostParentComponent;';
+
  var customComponentCode = 
  'CustomReactComponent.contextTypes = {\n' +
  ' theme: React.PropTypes.object\n' +
@@ -175,7 +193,14 @@ class ThemesPage extends React.Component {
  access to the theme.
  </p>
  <Paper className="code-example">
- <CodeBlock>{usageCode}</CodeBlock>
+ <Tabs>
+ <Tab label="ES6">
+ <CodeBlock>{usageCodeES6}</CodeBlock>
+ </Tab>
+ <Tab label="ES5">
+ <CodeBlock>{usageCodeES5}</CodeBlock>
+ </Tab>
+ </Tabs>
  </Paper>
  <p>
  <b>Important:</b> The code above is <u>required</u> when using Material-UI. Without it, 
@@ -185,18 +210,6 @@ class ThemesPage extends React.Component {
  </p>
 
 
- <h3 className="mui-font-style-title">Custom Themes</h3>
- <p>
- To see an example containing all theme variables, checkout our <a href="https://github.com/callemall/material-ui/blob/master/src/styles/themes/light-theme.js">
- light-theme</a>. The code-block below defines the structure needed to have a valid custom 
- theme. Note that if a property is not defined in the custom theme, the default will be 
- what is defined in our light theme.
- </p>
- <Paper>
- <CodeBlock>{this.getThemeStructure()}</CodeBlock>
- </Paper>
-
-
  <h3 className="mui-font-style-title">Overriding Theme Variables</h3>
 
  <p>
@@ -211,8 +224,6 @@ class ThemesPage extends React.Component {
  </Paper>
 
 
-
-
  <h3 className="mui-font-style-title">Giving Custom React Components Access to Theme</h3>
  <p>
  If you would only like to create a React component with access to Theme, include the code 
@@ -224,6 +235,18 @@ class ThemesPage extends React.Component {
  <CodeBlock>{customComponentCode}</CodeBlock>
  </Paper>
 
+
+ <h3 className="mui-font-style-title">Custom Themes</h3>
+ <p>
+ To see an example containing all theme variables, checkout our <a href="https://github.com/callemall/material-ui/blob/master/src/styles/themes/light-theme.js">
+ light-theme</a>. The code-block below defines the structure needed to have a valid custom 
+ theme. Note that if a property is not defined in the custom theme, the default will be 
+ what is defined in our light theme.
+ </p>
+ <Paper>
+ <CodeBlock>{this.getThemeStructure()}</CodeBlock>
+ </Paper>
+
  </div>
  );
  }
@@ -497,7 +520,8 @@ class ThemesPage extends React.Component {
  <div className="component-examples-container">
  <DatePicker
  hintText="Landscape Dialog"
- mode="landscape"/>
+ mode="landscape"
+ style={{width: '100%'}}/>
  </div>
  <div className="component-examples-container">
  <DropDownMenu menuItems={menuItems} />

docs/src/app/components/pages/get-started.jsx

@@ -49,9 +49,7 @@ class GetStarted extends React.Component {
  <p>
  Material-UI is available as an <a href="https://www.npmjs.org/package/material-ui">npm package</a>.
  Use <a href="http:https://browserify.org/">browserify</a> and <a href="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/andreypopp/reactify">reactify</a> for
- dependency management and JSX transformation. The CSS framework is written in <a href="http:https://lesscss.org/">Less</a>,
- so you&apos;ll need to compile that as well. For <a href="http:https://www.sass-lang.com/">Sass</a> users, <a href="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/gpbl/material-ui-sass">material-ui-sass</a> contains
- the .scss version of the Less framework.
+ dependency management and JSX transformation. 
  </p>
 
  <h3 className="mui-font-style-title">React-Tap-Event-Plugin</h3>
@@ -79,16 +77,12 @@ class GetStarted extends React.Component {
  </mui.Paper>
 
  <h2 className="mui-font-style-headline">Customization</h2>
- <p>The styles are separated into 2 less files:</p>
- <li>dist/less/scaffolding.less</li>
- <li>dist/less/components.less</li>
+ <p>Material-UI components have their styles defined inline. There are two approaches to overriding these styles:</p>
+ <li><a href="#/customization/inline-styles">Override individual component styles via the style prop</a></li>
+ <li><a href="#/customization/themes">Define a Theme to apply overarching style changes</a></li>
  <p>
- This allows you to override any variables defined in custom-variables.less without having to
- modify material-ui source files directly. For example, your main.less file could look something like this:
+ This allows you to override any variables used without having to modify material-ui source files directly.
  </p>
- <mui.Paper className="code-example">
- <CodeBlock>{customizationCode}</CodeBlock>
- </mui.Paper>
 
  <h2 className="mui-font-style-headline">Examples</h2>
  <p>

src/enhanced-button.jsx

@@ -66,7 +66,8 @@ var EnhancedButton = React.createClass({
  font: 'inherit',
  fontFamily: this.context.theme.contentFontFamily,
  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
- WebkitApperance: 'button'
+ WebkitApperance: 'button',
+ cursor: 'pointer'
  },
  rootWhenLinkButton: {
  display: 'inline-block',