Responsive Web Design

Width is currently pixels.

Drag the window to resize it.  Note that the brightly colored panels adjust to the width, changing the number of columns, nesting inside each other, stacking, unstacking, etc. 

They're not just wrapping around.  When you get narrow enough, the blue panel moves between the red and yellow panels, not below the yellow.  Anything is possible! 

It's all data-driven, via a simple, but very flexible, data structure that's sent from the server, and honored by a few lines of JavaScript in the browser.

Tip: Use Ctrl-Shift-M in Windows Firefox (Cmd-Opt-M on Mac) to set it to the exact size of various mobile devices.

myBasePanel contract
None Id:A
Name: myBasePanel
Color: red
Start Contracted: False
myBasePanel contract
None Id:B
Name: myBasePanel
Color: yellow
Start Contracted: False
myBasePanel contract
None Id:B1
Name: myBasePanel
Color: green
Start Contracted: False
myBasePanel contract
None Id:B2
Name: myBasePanel
Color: lightgreen
Start Contracted: False
myBasePanel contract
None Id:C
Name: myBasePanel
Color: blue
Start Contracted: False
myBasePanel contract
None Id:C1
Name: myBasePanel
Color: lightblue
Start Contracted: False