YUI App Theme is a generic, skinnable layout for web applications.
What you are looking at is the basic page template. Because it is built on top of the YUI Grids foundation, you can easily change the page and column widths or even swap the columns around to suit your needs. Not only is it cross-browser compatible (we support all the major browsers including IE6), but it is super easy to extend as well.
It is particularly well suited for admin areas. You will find most of the standard UI elements are styled and ready for you to use: blocks, tabbed modules, tables, lists, one and two column forms, etc. Just explore the page to see what is available. Pay particular attention to the theme and layout panels on the side. They will let you preview alternate layouts and color schemes with one click.
Enjoy!
So this is a basic block module. It allows you to define a header using either an <h2> or <h3> tag. It can live in the main body column (here) or in the side bar to the right. It will automatically expand/shrink/do-the-right-thing where ever you put it — without requiring any markup changes.
Lorem ipsum dolor sit amet, some bold text followed by some italic text consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Highlighted text goes here, sunt in culpa qui officia deserunt mollit anim id est laborum.
small text
gray text
Don't miss the <hr> here ↑
The tabs at the top of this block are made using an <ul> — they're super-useful for sub-navigation elements. If you look at the source, you'll also notice that right above them is an <h2> tag which is hidden from view. This lets you define a header for SEO purposes without affecting your layout.
You can set the active tab by simply applying class="active" to the appropriate <li>.
2001-2010 R.&L. Pranschke, Tertrack Portal.