React Inline Styles with responsive design
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
<html> | |
<body> | |
<div id="app"></div> | |
</body> | |
</html> |
React Inline Styles with responsive design
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
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); |
Also see another great example: http://codepen.io/jmcclure/pen/7486c9db71149ed602af37fbe5929a53