deliteful-ResponsiveColumns

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<d-responsive-columns id="rc" class="fill"
                      breakpoints="{'small': '500px', 'medium': '900px', 'large': ''}">
    <div layout="{'small': '100%', 'medium': '200px', 'large': '10%'}" class="red">A</div>
    <div layout="{'small': 'hidden', 'medium': 'fill', 'large': '30%'}" class="blue">B</div>
    <div layout="{'small': 'hidden', 'medium': 'hidden', 'large': '60%'}" class="green">C</div>                     
</d-responsive-columns>

<div class="centered">
    <span>Screen class: </span><span id="currentSize"></span><br>
    Resize this frame width to change the screen class.<br>&#8596;
</div>

CSS

body { margin: 0; }
#rc {
	width: 100%%;
	height: 200px;	
}
.centered { text-align: center; }
.red { background-color: #D9534F; }
.blue { background-color: #5BC0DE; }
.green { background-color: #5CB85C;}

JavaScript

require.config({
  baseUrl: "http://ibm-js.github.io/libraries/master",     
});

require(["deliteful-build/layer"], function () {
  require(["deliteful/ResponsiveColumns",            
           "delite/theme!delite/themes/{{theme}}/global.css", // page level CSS
		   "requirejs-domready/domReady!"],
    function () {
        rc.deliver();
        currentSize.innerHTML = rc.screenClass;
        rc.on("change", function(event){ currentSize.innerHTML = event.screenClass;});
        document.body.style.display = "";
  });
});