This page shows my usage of the Gumby framework to demonstrate some of it's features.
To see in more detail how the adaptive grid works (rows, columns, etc.) see the demo.html file.
Notice how the above header graphic shrinks according to the size of the container, down to the min-width that is preserved for display on a smartphone.
The below Gumby graphic also shrinks, but not much since its 3-column container doesn't change nearly as much as the above 12-column one.
I put some detailed comments (marked as Notes from Dr. K) in with the source code of this example to help you use it. Basically, you can use this page as a templastarting point to adapt to your needs.
Just some filler.
Pizza is delicious, and this is the first tab.
Hamburgers just want someone to love. This is the second tab.
Buffalo Chicken is a two-timing backstabber. It is also the third tab
Just some filler.
It is generally not good to show your drawers in public. It is a bummer that Gumby's drawers are black, so that you have to go into the ui.css styles to change that.
This Row demonstrates putting columns within columns. Turns out this is quite easy.
Suppose this is a column down the left side of the page -- nav or whatever.
blagh
blagh
blagh
This column needs it's own sub-columns, so that is done below. I simply added a new row with its own columns within this column
This is a row inside a column.
blagh
blagh
blagh
This is a row inside a column.
blagh
blagh