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. UnknownJuly 24, 2015 at 2:42 AM

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

    ReplyDelete
  2. UnknownJuly 29, 2015 at 1:26 AM

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

    ReplyDelete
  3. UnknownJuly 29, 2015 at 4:45 AM

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

    ReplyDelete
  4. Big Data Hadoop training institutesSeptember 12, 2019 at 1:19 AM

    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

Template Toolkit Debugging inside of Perl Dancer

The other day someone was asking how to enable Template Toolkit debugging inside of Perl Dancer in the #dancer IRC channel, it seemed like a good time for a write up. The template engine configuration directive supports passing through various options like start_tag and stop_tag as explained in Dancer::Template::TemplateToolkit POD. And alludes to being able to pass other options. How To pass TT options like those found in Template::Constants , there must be a DEBUG section in engines -> template_toolkit , usually found in config.yml . Example Snippet Here is an example: A few notes Remove leading DEBUG_ from TT constants. The option DEBUG_PLUGINS becomes plugins . Multiple options can be separated with a comma. Example: DEBUG: "provider,plugins" . Be warned, some of these options can lead to tons of information :) __END__
Read more

Please don't create tests like this in Perl

I just came across a test like: And of course, it was silently doing something/nothing/everything. I'd guess most experience Perl coders will notice that the eval will only run the test if the request doesn't throw an exception. Which might be kind of ok but there is no catch or check of the $@ later. If a check is added for $@ later, it will make the test pattern pretty messy Please don't write this type of test. Please. Instead use Test::Exception and drop into a sub. Something along the lines of: This is better for a couple of reasons: test will show some output in case of exception test will stop instead of just pushing on with a bunch of mostly false error (unless the test wants to this to check bad input :) test is simpler to understand (no response, give up) __END__
Read more

BootstrapX clickover

Birth The last few weeks, i've been pushing Bootstrap in various directions. Most of the time, its being hacking around Popovers. Our current design uses Popovers with forms. It provides a very nice balance between in page action and more subtle interruption to viewing the page than a modal. Over the last few weeks, I've found a few quirks with using Popover's trigger action of 'focus'. This works fine with forms but on Chrome and Safari 'focus' events are supported incompletely . In addition to that varied support we have a few other needs that inspired a new Bootstrap extension. BootstrapX - Clickover . Our requirements are: Click button/link/icon to toggle display of popover content Option to click 'away' from popover to close Ability to have 'popover' autoclose after some amount of time Option to have element inside of popover hide it I suspect, in the future, it will need to only auto close when user's mouse
Read more