Quick YUI Panel styling sans Javascript

In doing some application mockups, I found a quick way to skin the YUI's Panel widget without having to create Javascript objects to do it for me.

For each panel you need to just add the class yui-panel.

Here is a markup example ( ripped out all but the body stuff out):
<body class="yui-skin-sam">
<div id="doc2" class="yui-t5">
<div id="hd">Header Stuff</div>
<div id="bd">
<div id="yui-main">
<div id="panel1" class="yui-b yui-panel">
<div class="hd">Panel Header</div>
<div class="bd">Here is stuff for the body of the panel</div>
<div class="ft">Panel Footer</div>
</div>
<div id="panel2" class="yui-b yui-panel">
<div class="hd">2nd Panel Header</div>
<div class="bd">Here is stuff for the body of the panel</div>
<div class="ft">Panel Footer</div>
</div>
</div>
<div class="yui-b yui-panel">
<div class="hd">Right Col header</div>
<div class="bd">Body</div>
<div class="ft">Footer</div>
</div>
</div>
<div id="ft"> Page Footer</div>
</div>
</body>
Now I just need to figure what the best way to handle all those div's are... And figure out when to use a block and unit and grid container...

Yikes, I thought YUI was suppose to make my life easier. I need to upload an example, maybe later.

References: Container (Panel is a ), YUI

Comments

  1. Nice Article... Its Useful to run Different Queries in Sql...
    Android Training in bangalore

    ReplyDelete
  2. Nice one explains about the concept of scripting language in queries.@ Oracle DBA Training in Bangalore

    ReplyDelete
  3. Java script is useful for widgets and procedures.@ PHP Training in Bangalore

    ReplyDelete
  4. Your info is really amazing with impressive content..Excellent blog with informative concept. Really I feel happy to see this useful blog, Thanks for sharing such a nice blog..
    If you are looking for any Data science Related information please visit our website data science institutes in bangalore page!

    ReplyDelete

Post a Comment

Popular posts from this blog

Changing Dancer::Plugin::Ajax's content type

BootstrapX clickover

2 ways to get SQLite to put dates into columns