For some initial context, read the discussion on this Github issue.
The component above has the following markup:
<div class="component-test" data-sauce-stateful-component>
<state media="(min-width: 500px)" value="red"></state>
<state media="(min-width: 700px)" value="blue"></state>
<state media="(min-width: 900px)" value="green"></state>
<state media="(min-width: 1100px)" value="green rounded"></state>
Hello, World
</div>
When resizing the browser window, the box should...
To find out more about how this works, have a look at the repository's README file.
Here's the entire minified script that powers this. Right now it's 2.2kB, before compression: