jurassix/React Inline Styles with responsive design.markdown

## index.html
<html>
  <body>
    <div id="app"></div>
  </body>
</html>

## React Inline Styles with responsive design.markdown

      
    Raw
  

              React Inline Styles with responsive design.markdown
            
          
    React Inline Styles with responsive design
See Live Demo
The breakpoint is set at 33% of screen size. Adjust the screen and the layout will be responsive with only inline CSS.
For edification please reference vjeux presentation on inline styles within React

  
## script.js
var style = {
  container: {
    display: 'flex',
    flexFlow: 'column wrap'
  },

  navigation: {
    flex: '1',
    background: 'aqua'
  },

  div: {
    flex: 1,
    background: 'red',
    display: 'flex',
    flexFlow: 'row wrap-reverse'
  },

  main: {
    flex: '3 1 auto',
    minWidth: '66vw',
    background: 'green'
  },

  aside: {
    flex: '1 1 auto',
    minWidth: '33vw',
    background: 'orange'
  },

  asideContent: {
    minWidth: '200px'
  }

}

var Demo = React.createClass({
  displayName: 'Demo',
  render: function () {
  	return React.createElement("div", {style: style.container},
      React.createElement("nav", {style: style.navigation}, "NAV"),
      React.createElement("div", {style: style.div},
        React.createElement("aside", {style: style.aside},
         React.createElement("div", {style: style.asideContent}, "SIDEBAR")),
        React.createElement("div", {style: style.main}, "MAIN")
      )
    );
	}
});

var el = document.getElementById('app');
React.render(Demo(), el);
	var style = {
	container: {
	display: 'flex',
	flexFlow: 'column wrap'
	},

	navigation: {
	flex: '1',
	background: 'aqua'
	},

	div: {
	flex: 1,
	background: 'red',
	display: 'flex',
	flexFlow: 'row wrap-reverse'
	},

	main: {
	flex: '3 1 auto',
	minWidth: '66vw',
	background: 'green'
	},

	aside: {
	flex: '1 1 auto',
	minWidth: '33vw',
	background: 'orange'
	},

	asideContent: {
	minWidth: '200px'
	}

	}

	var Demo = React.createClass({
	displayName: 'Demo',
	render: function () {
	return React.createElement("div", {style: style.container},
	React.createElement("nav", {style: style.navigation}, "NAV"),
	React.createElement("div", {style: style.div},
	React.createElement("aside", {style: style.aside},
	React.createElement("div", {style: style.asideContent}, "SIDEBAR")),
	React.createElement("div", {style: style.main}, "MAIN")
	)
	);
	}
	});

	var el = document.getElementById('app');
	React.render(Demo(), el);