YUI App Theme

Hello, there.

YUI App Theme is a generic, skinnable layout for web applications.

What you're looking at is the basic page template. Because it's 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's super easy to extend as well.

It's particularly well suited for admin areas. You'll 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's available. Pay particular attention to the theme and layout panels on the side. They'll let you preview alternate layouts and color schemes with one click.

Enjoy!

Basic Block ← This can be an H2 or H3

Some H2 Text

Some H3 Text

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 ↑

Fake Header For SEO Purposes

Tab Example

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>.

Tab Example with Spaces

These tabs use the exact same markup as the previous example with an extra class="spaces" added to the containing block. This lets you switch between the two tab styles with very little fuss.

Table Example

Tables

ID Login First Name Last Name  
1 susan Susan Delgado view | edit | delete
2 eddie Edward Dean view | edit | delete
3 jake John Chambers view | edit | delete
4 calvin Calvin Tower view | edit | delete

Single Column Form Example

Attractive Looking Forms

Ex: some text

Ex: some more text

Lots of text can go in here

or Cancel

Message Style Examples

Messages

Notifying the user with an error, warning, or notice is easy with these simple alert boxes.

Error message

Warning message

Notice message

Two Column Form Example

2 Column Forms

Ex: some text

Ex: some more text

Lots of text can go in here

I bet you thought two column forms would be difficult, eh? Don't worry. We've got you covered.

Lorem ipsum dolor sit amet, 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

or Cancel

Lists! Lists!

Get your lists here!

Unordered List

  • Apple
  • Pear
  • Orange

Ordered List

  1. Mars
  2. Jupiter
  3. Venus

Dictionary List

Hollywood
Academy Awards
Television
Emmys
Broadway
Tonys

Copyright © 2009 Blah Your Website