Theme DOM

Theme DOM

I've mode some notes on the DOM needed for freedom in styling.
I suggest we write some jquery code to wrap elements with this DOM.
(I'm already working on the wrappers for my testing)
<span style="font-style: italic;">
<span style="font-style: italic;">
</span>I would like to hear your feedback.</span>
I chose <span style="font-family: courier new,monospace;"><dl></span> because that aren't used very often so there will be less collision hopefully.
Also I hope to have some mockups for the designs soon (soon not being defined very well =P ).
Classes:
<span style="font-family: courier new,monospace;">.resizable</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">.dragable</span><br style="font-family: courier new,monospace;">
Width:
<span style="font-family: courier new,monospace;"><dl class="skinWidth"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  <dt class="left"/>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  <dd class="content">{CONTENT}</dd></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
  <dt class="right"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></dl></span><br style="font-family: courier new,monospace;">
Height:
<span style="font-family: courier new,monospace;"><dl class="skinHeight"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  <dt class="top"/>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  <dd class="content">{CONTENT}</dd></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
  <dt class="bottom"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></dl></span><br style="font-family: courier new,monospace;">
Box:
<dl class="skinBox">
  <dl class="top">
    <dt class="nw"/>
    <dt class="n"/>
    <dt class="ne"/>
  </dl>
  <dl class="middle">
    <dt class="w"/>
    <dd class="content">{CONTENT}</dd>
    <dt class="e"/>
  </dl>
  <dl class="bottom">
    <dt class="sw"/>
    <dt class="s"/>
    <dt class="se"/>
  </dl>
</dl>
Modal (classes resizable and dragable optional, just an example):
<span style="font-family: courier new,monospace;">
<dl class="skinModal"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  <dl class="top"></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">    <dt class="nw"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    <dt class="n">
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">      <fieldset class="titlebar dragable"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
        <legend class="title">{TITLE}</legend></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">        <!-- other buttons like close, minimize, ext.. -->
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">      </fieldset></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
    </dt></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    <dt class="ne"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
  </dl></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  <dl class="middle"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
    <dt class="w"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    <dd>{CONTENT}</dd></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">    <dt class="e resizable"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  </dl></span>
<br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">  <dl class="bottom"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    <dt class="sw"/>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    <dt class="s resizable"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
    <dt class="se resizable"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  </dl></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
</dl></span><br style="font-family: courier new,monospace;">
Example textarea:
Before: <span style="font-family: courier new,monospace;"><textarea/></span>
Javascript: <span style="font-family: courier new,monospace;">
$('textarea').resizable("height");</span>
After:
<span style="font-family: courier new,monospace;"><dl class="skinHeight"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
  <dt class="top"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  <dd class="content"><textarea/></dd></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">  <dt class="bottom resizable"/></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></dl></span>
<br style="font-family: courier new,monospace;">
If we decide DOM wrapping is bad, I can try to work with:
<span style="font-family: courier new,monospace;"><textarea class="resizableHeight"></span>
... but it will be hard.
~Sean