RespBreak uses an up()-down() pattern, inspired by Ruby on Rails DB Migrator. Every state, except one nominated state (typically state 0), has up() and down() methods. On calling up(), the DOM is brought into that state. When calling down(), the DOM is moved down to the previous state.
RespBreak is a small helper class which works out which up() and down() methods to call. This allows you to create mobile-first responsive designs. On page load, and on subsequent window resizes, RespBreak works out which state the document should be in. For example, if the HTML is served for mobile first and is viewed on a desktop, RespBreak will call up() on the tablet state object, and the desktop state object. You can do anything you want in up() — changing the structure of the page, or loading additional content may be typical usages. A call to down() should reverse the changes to move the document to the previous state.
As an example, consider the following HTML document:
The ishere() method of each state establishes whether the document should be in a particular state. The up() method moves the document from one state to another (e.g. from mobile to tablet or from tablet to full). The down() method reverses this operation.
Once you’ve created state objects, you can just initialise a new RespBreak object with the state objects. The second parameter of the constructor is the state number that the HTML is, by default, served in. (In the above example, 0 for mobile, 1 for tablet or 2 for desktop).
I’ve uploaded a first version on https://github.com/brendonboshell/RespBreak.
Any feedback would be greatly welcomed. I’m keen on developing this idea a bit further. Automatically handling common tasks — such as removing, inserting or swapping elements — will probably be next on the agenda for the class.