Design recommendation for all interaction & effect demos

Design recommendation for all interaction & effect demos


Right now, all the interaction demos (re-sizable, draggable, etc.) all
use some pretty harsh red and green colors and Richard asked us for
some advice. I'd recommend using our CSS framework styles for all of
these demos so these will be easier to work with and themeable. We can
map most of these demos to the following classes:
* "ui-widget-content" class for all boxes/containers. if we need to
visually distinguish between 2 containers, use the "ui-widget-header"
class for the primary one and content for the other
* "ui-widget-highlight" class for selected elements
* as needed, use default/hover/active for specific interactions
I also think keeping these pretty simply visually (framework classes +
cursor changes) will be good because people will be creating their own
custom styles for specific interactions and it's nice to have "clean"
demos. Once we tidy these up, we could always create more custom
examples that use icons and other design elements but that can be
added later.
On another note, we'll need to add some padding to the body for all
these demo pages so they aren't jammed up against the iframe edge.
Does anyone forsee an issue with adding padding this way?