CSS Tools of Yahoo User Interface

From ThemesWiki

Yahoo User Interface

Official Page

Project Documentation

Download

Source Book ISBN 978-1-847192-32-5 Publisher Packt Publishing Author(s) Dan Wellman

Contents 1 Creating Consistency With The CSS Tools 2 Tools of the Trade 3 Element Normalisation with reset.css 3.1 Element Rules 4 First Base 4.1 Headings 4.2 Lists 4.3 Tables 4.4 Miscellaneous Rules 5 Tidying up Text with fonts.css 5.1 The Body 5.2 Tables 6 Layout Pages with Ease Using grids.css 6.1 Setting up Your Page Structure 6.2 The Basic Building Blocks of Your Pages 6.3 Grid Nesting 7 A Word on Sam 8 Summary 9 Additional References 10 Source

Creating Consistency With The CSS Tools

Not only does the library provide you with a rich selection of easily implemented utilities and UI controls that save you time and effort when developing and debugging, it is also a gift that keeps on giving with a selection of CSS tools that every developer should have to hand.

The CSS tools that form the fourth and final section of the library are separate from the CSS files required by some of the controls in order to be displayed correctly; some of the controls contain a folder within their unpacked directories called 'assets', and in this folder there may be images, a stylesheet, or sometimes both depending on the control.

But the CSS files discussed in this tutorial do not reside within the assets folders, tucked away deep within the library's hierarchy. The CSS tools each have folders of their own within the library's directory structure, and are on a level with both the utilities and controls.

In this tutorial we're going to examine these tools in detail and learn exactly what they can do for your web pages and applications, whether used in conjunction with other components of the library, or completely on their own.

Tools of the Trade

There are some similarities between the CSS tools and the other components of the library and there are of course some differences. Like each of the other components, there is also a full version of each file with comments and whitespace preserved for readability, and a minified production version.

If you wish, you can also have Yahoo! serve the CSS files used by the tools to you across the internet by linking to the files held on their servers, just like you can with the other library components.

Several different configurations of the CSS tools have also been put together, which combine some of the different tools into single files, making them easier and more efficient to use together. resets.css and fonts.css have been amalgamated into one file for your convenience, which is probably because the YUI team recommend the use of these two tools in all YUI implementations. A reset-fonts-grids.css file has also been created due to the high likelihood that the huge range of page templates available in grids.css will also be used very frequently.

There is also a cheat sheet that combines information on all four of the CSS Tools, which makes more sense than supplying one sheet per tool. There wouldn't be much point providing a whole sheet for each of the tools anyway, as on the whole the CSS tools will do their job provided you use the correct class names and nesting structures in your mark up.

The one sheet provided does give you enough basic information about each of the tools for you to get started, and lists information such as how you should structure your basic pages for best effect with grid layouts, or the percentages you should specify to make use of different font sizes, and some of the different template class names, so it can still be an invaluable reference when working with these tools.

Element Normalisation with reset.css

Often, one of the most painful exercises in web development is simply getting everything to look consistent across the major browser platforms. Developers will often design and test an implementation in one particular browser, and then when everything is working and rendering correctly in their browser of choice, they will then refine it and tweak it until it works and renders similarly in all of the other major browsers.

Due to the differences between the default stylesheet in use in the various browsers, getting pages to render in the same way can be a challenge. Something that lines up perfectly in IE will undoubtedly be misaligned in other browsers, and of course when you correct the difference so that it renders in the way that you want it to in Safari, for example, you go back to IE and it's out of alignment there once again.

For a quick example of CSS inconsistencies at work, take a look at screenshot below; there are two <div> elements on the page, one nested within the other. Both of the <div> elements have specified width and padding values. The outer <div> is absolutely positioned while the inner <div> is fixed. In IE6 on Windows, you can see that the two <div> elements nest as intended. In Firefox however, the nesting is broken:

Until now, the quickest way around these issues has been to use a compliant browser to design in and resort to hacks or filters so as to make the various versions of IE play along, or to use the IE-specific conditional-comments method of supplying a different stylesheet for different versions of IE.

While both of these methods can make designing a site easier in the short-term, there is no guarantee that future browsers will not choke on any hacks or filters that you may be using in your stylesheet, so it is best to try avoid them whenever it is possible for you to do so.

Using a range of different stylesheets for different browsers and browser versions can also be problematic in terms of maintenance, as you will find that, when you want to make a change to the way in which your site is displayed, there are many more files that need to be updated.

The CSS tools can provide a firmer guarantee that future browsers will still display everything correctly and can cut down on the number of files that you need to actively maintain (as Yahoo will kindly maintain these for you).

The resets.css file provided by the YUI library avoids the need to use most hacks or workarounds by standardizing the default rendering of all of the most common HTML elements across the different browsers, saving you the tricky troubleshooting that sometimes needs to be done to get everything lined up and looking right in all browsers.

Margins and some of the other preset styles of various elements have been removed or set to zero in the resets stylesheet, so you can worry about presenting your content, without trying to remember whether additional padding in a particular browser is going to put everything out of place.

Element Rules

reset.css consists mostly of element selectors that match nearly all content containing HTML elements and resets them to a non-styled state. This enables the designer to apply consistent styling that works across all browsers.

The following common and frequently used elements each have their margin and padding values normalised to zero:

• the document body
• div and p elements
• All of the list elements: dl, dt, dd, ul, ol, li
• All of the heading elements: h1, h2, h3, h4, h5, h6
• pre and blockquote elements
• Some of the form elements: form, fieldset, input, textarea
• The table elements th and td

The next element to be standardized is the table element, which has its borders automatically collapsed and set to zero. Following on from this, fieldset elements and images both have their borders set to zero as well, as do any abbr and acronym elements that you use.

To prevent certain types of font-specific elements from rendering in either italic or bold typefaces in some of the more common browsers, the following list of elements all have their font-style and font-weight properties set to normal:

• address
• caption
• cite
• code
• dfn
• em
• strong
• th
• var

The next rule targets the standard ordered and unordered HTML list elements and sets their list-style property to none thereby removing the standard list item marker from the text that makes up each list item, easily allowing you to explicitly define your own if necessary. Following on from this, both caption and th elements are aligned strictly to the left with no indentation.

All heading elements (h1 through h6) are standardised to a font-size of 100% and a font-weight of normal, effectively setting all heading types to the same size and weight as standard text. The size that the text actually ends up is of course wholly dependent on the visitor's browser settings.

The final style rules supplied by the reset.css stylesheet are the two :before and :after pseudo-elements which act upon any q (a single-line or short quotation) elements used in the document. The rule specifies that no content should be placed directly before or after this element using the content:; rule.

As an example of what reset.css does to elements, the screenshot below shows a collection of all of the elements targeted by this CSS tool, before resets.css has been applied. Most of the elements have visible styling applied to them by the browser, and this varies slightly between different browsers.

I've chosen Firefox on Windows to highlight this example because the <fieldset> element is one of the few examples of this browser styling an element badly. Note that, no <br> elements or positional CSS has been used in this example at all; all of the styling has been applied automatically by the browser.

Next, we can see what a difference reset.css makes to this page by including a reference to the file in the <head> of the page. With reset.css linked, all elements are reset.

Hence, the resets CSS tool can be an invaluable asset when either used as part of a YUI implementation, or completely isolated from the rest of the library, and linked to by pages entirely of your own design. This tool is completely compatible across the A-grade browser spectrum.

It's also very easy to change the default rendering provided by this file. You may wish to have certain images that do have a border, so all you need to do is add your own class attribute to the <image> and define a new CSS class in a separate CSS file of your own making.

If you only ever use one file from the library, this one alone could provide the most benefit in the long-term (but of course you won't want to exclude the rest of the fantastic functionality provided by the YUI!).

First Base

Where the resets.css tool breaks down the default stylesheets of the different browsers, the base.css tool then builds upon this level foundation to provide basic styling across a range of commonly used elements.

There are certain elements on your page that just should be styled differently from other elements. Heading text for example, simply should stand out from body text; aside from any SEO benefits, that's the whole point of heading text in the first place.

So the base tool reintroduces some of the presentational styles of the common elements that the resets tool neutralizes, but it does so in a way that is consistent across browsers. Let's look at the basic stylesheet provided by the base.css tool.

Headings

The first three levels of heading elements are scaled up to sizes more appropriate for headings (so that they are bigger than standard body text). The new sizes are specified in percentages as follows:,

• <h1> elements are set to 138.5% which corresponds to a px size of 18
• <h2> elements are set to 123.1% which corresponds to a px size of 16
• <h3> elements are set to 108% which corresponds to a px size of 14

Additionally, the above three heading levels are also given a top and bottom margin equal to the height of one line, and left and right margins of zero. All of the heading elements (<h1> through <h6>) are also given back their bold font-weight properties.

Lists

Ordered, unordered, and definition lists are given a left margin to indent them by two lines. Ordered lists are given a decimal marker positioned outside, while unordered lists are given a disc marker, also placed on the outside of the list item's box.

The <li> elements of definition lists are given a left-margin setting of 1em to indent the text within the list item slightly. These lists are not given an item marker like the other two list types.

Tables

Both table header and table data cells are given a solid, black, 1 pixel border and an overall padding of half an em. This helps to space things out and make tables a little more readable. <th> elements are also given a bold style to set them out from <td> elements.

Like the <th> cells in a table, the caption element is also given the same overall margin of 0.5em and a centred appearance, and the entire table is given a bottom-margin of one line height as well.

Miscellaneous Rules

The base tool provides a couple of other rules as well; <abbr> and <acronym> elements are both given a dotted bottom and a help icon so that visitors can easily find extra information by hovering the mouse, and <em> elements are given an italic style.

Block quote elements, like the list family, are given an overall margin of 1em to help them stand out from standard body text, as are <p> and <fieldset> elements.

If we include a reference to the base.css stylesheet in our test page, some of the elements that were normalised by the reset tool will have styling applied, as demonstrated by the following screenshot:

Tidying up Text with fonts.css

The next CSS tool, fonts.css, is provided so that you can easily standardize all of your text to a single font-face, font-size, and line-height. It standardises all rendered text on the page to the Arial font, except for text within <pre> and <code> tags, which instead use the monospace typeface.

In terms of the amount of actual code, this file is tiny, much smaller in fact than the reset tool we looked at earlier, providing just five rules in total, and unlike the other tools provided in the library, the fonts tool does need to resort to a few filters to bring older versions of IE back into line.

The Body

The first rule targets the <body> tag and sets the font property to 13px, arial, Helvetica, clean, or sans-serif. This provides a clear font degradation path; if browsers or operating systems don't have Arial installed or for some reason can't display it, the platform tries Helvetica next, and so on, right down to sans-serif if necessary (although it's unlikely that the browser would need to travel all the way down to the end of the degradation path).

This is also important for Unicode support; if the font in use cannot map a Unicode character to a font-glyph in the current font set, it can use the font degradation path to map a Unicode character from another defined font set.

This helps to avoid those unsightly little squares that sometimes appear in emails or on web pages when the authors decide to use unusual or foreign font families (I use the word "foreign" hesitantly, because clearly this is relative to the visitors nationality and location.).

The final two rules in the <body> selector, *font-size:small and *font:x-small, are used to set the font-size in IE (which makes better use of the CSS keywords for font-size than it does of percentages) and addresses text-rendering peculiarities in older versions of IE, which can incorrectly interpret the font-size keywords specified by the CSS1 standard thus making all of your fonts appear bigger than they should.

Tables

Rule number two targets </code> elements and forces them to inherit the font-styles that are specified by their parent elements. This is especially important to overcome inheritance problems when browsers are running in quirks mode. It also sets all table text to the standardized size of 100%. Note - Quirks mode describes a mode of operation for browsers whereby they render pages according to the support of older, non-standards compliant versions of their browsers instead of according to W3C standards. If you don't include a complete DOCTYPE in the head of your page, it will trigger quirks mode in any browsers that view it. The final rule targets elements containing content that may be used to display some kind of programming code. The following elements receive the monospace font family:

• pre
• code
• kbd
• samp
• tt

An IE hack can also be found in this rule to correct a misinterpretation in this browser of the font-size calculated on these elements; as IE renders them slightly too small, the font-size is bumped up to 108%. In other browsers, it is set to 100% instead. Like the resets CSS Tool, fonts.css is extremely easy to use and requires no further participation from you once you have linked to the stylesheet. You don't need to use any particular class names or give elements specific id attributes in order to make use of the normalization services provided by these two tools, and the fonts CSS tool is compatible with all A-grade browsers. As we know, that A-grade browsers are browsers that have been tested extensively by the YUI developers and confirmed to support the highest level of visual presentation and interactivity that the library can provide. As before, we can see the effect that fonts.css has on our dummy page in the screenshot below. This is exactly the same page as shown before except that it links to fonts.css instead of reset or base.

So far we've looked at how these files act upon elements when used individually, so for completeness, let's have a look at all three in action at once on our test page:

Firefox has been used in all of the screenshots so far so that you can see the differences that each file makes relative to a single browser. For brevity, let's look at the page in Safari on OS-X:

Layout Pages with Ease Using grids.css

In comparison to the other three CSS tools, the grids.css file is a lot bigger, containing a much wider range of selectors and rules. This tool is used in a different way than the other two; instead of just linking to the file and forgetting about it, you will need to make use of specific class names, give elements-specific ids, and use the correct nesting structures in order to have your pages laid out in the format that you want.

One of the features of the grids tool is that it automatically centres your content in the viewport, which is achieved with the first very simple rule. Another of its features is the fact that the footer, if you wish to use it, is self-clearing and stays at the bottom of the page, whichever layout template you're using.

Setting up Your Page Structure

Yahoo! recommend a particular basic structure to use when building web pages; your document should be broken up into three different content sections: a header <div>, a body <div>, and a footer <div>. All three of these different sections should also be wrapped in an outer containing <div>. The following code shows how pages should initially be structured:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Mark-up Example</title>
  <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
  </head>
  <body>
  <div>
  <div id="hd">This is your Header</div>
  <div id="bd">This is the body</div>
  <div id="ft">This is your footer</div>
  </div>
  </body>
 </html>

You can use one of the four preset page widths when constructing pages linked to the grids tool by giving the outer containing <div>element one of the following values for its ids attribute:

• doc for a 750 pixel wide page geared towards resolutions of 800x600
• doc2 for a 950 pixel wide page that is aimed at 1024x768 resolutions
• doc3 for a full 100% fluid page width suitable for all monitor resolutions
• doc4 for a 974 pixel page width, an increasingly popular and robust width

These widths are controlled by three fairly straightforward selectors and rules defined near the top of the grids.css file.

The following screenshot shows how the four different page templates appear. To make the example clearer and to enable you to see the different page widths easily, I've added style rules that set the borders and heights of the different <div> elements making up the page:

All four of these page width specifications, as well as the six different templates (yui-t1 to yui-t6) have auto margins and have their content aligned to the left. The width is specified in em units, as these units of measurement scale better across platforms during text-size changes driven by the visitor. Using a combination of templates and different class attributes in your mark up you can specify a wide range of different page layouts.

The *width property is a filter used to specify the width specifically for IE versions six or under, which calculates ems slightly too large so that it needs to specify less of them. The third layout, for 100% page widths, includes a 10 pixel margin on both sides of the page so as just to prevent any bleed between the page contents and the browser's user interface chrome.

The Basic Building Blocks of Your Pages

Going back to the recommended layouts of pages, the developers at Yahoo! recognise that the main content, the body <div>, of your page will probably be split into different blocks itself, featuring perhaps a navigation menu on one side of the page as well as a main block of content.

These blocks of content can be represented in your HTML code by <div> elements with a class attribute of yui-b to denote a basic block. The main block should then be wrapped in a container <div> with a class attribute of yui-main. The main block is where your primary page content should reside. Although the basic yui-b block that is not nested within a yui-main block is known as the secondary block, it can still appear before the main block in your code and can appear either on the left or right-hand side of the page:

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>YUI Grids Page</title>
  <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
  </head>
  <body>
  <div id="doc3">
  <div id="hd">This is your Header</div>
  <div id="bd">This is the body

<div class="yui-b">This is the secondary block</div>

<div class="yui-main">

<div class="yui-b">This is the main block</div>

</div>
  </div>
  <div id="ft">This is your footer</div>
  </div>
  </body>
 </html>

This is great from an SEO perspective as it allows you to define your navigation model (probably based on a simple list of links in your mark up, which search engine crawlers and spiders love) before the code making up the main content block. As any budding SEO enthusiast knows, content near the beginning of a page can be treated by search engines as more important and is more likely to be indexed.

In order to use these content-organizing blocks, you'll also need to specify one of six preset templates. These block templates specify the width of the two blocks in much the same way as the three page templates specify page width. The following block templates are available:

• .yui-t1 for a 160 pixel secondary block on the left
• .yui-t2 for a 180 pixel secondary block on the left
• .yui-t3 for a 300 pixel secondary block on the left
• .yui-t4 for a 160 pixel secondary block on the right
• .yui-t5 for a 180 pixel secondary block on the right
• .yui-t6 for a 300 pixel secondary block on the right

In all of these templates, the main content block will take up the remaining space on the page (which is dependent on the page template in use). To use these templates, you just need to add one of them as a class attribute of the outer containing <div>, element, whichever template you wish to use.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>YUI Grids Page</title>
  <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
  </head>
  <body>

<div id="doc3" class="yui-t1">
  <div id="hd">This is your Header</div>
  <div id="bd">
  <div class="yui-b">This is a block</div>
  <div class="yui-main">
  <div class="yui-b">This is the main block</div>
  </div>
  </div>
  <div id="ft">This is your footer</div>
  </div>
  </body>
 </html>

The addition of the blocks and additional template will produce a page with a layout as shown in screenshot below. Again styling has been used for clarity:

These templates, combined with the three different document widths and the two types of class attributes, added to the different block configurations give you a total of up to 42 different visual presentation models. But that's not all; your main content block can be further subdivided with grids and units.

Grid Nesting

If you would like to split your main block of content into two or more different columns, you can nest some more <div> elements within your main block. You need to add a container <div> to the main block. This is known as a grid. The two new columns that are formed in the grid are known as units and are made up of two nested <div> elements within the grid <div>.

To make a grid, the container <div> within the main block <div> should be given a class attribute of yui-g and each unit <div> should have a class attribute of either yui-u first for the first unit or yui-u for the second unit, as illustrated by the following code sample:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>YUI Grids Page</title>
  <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
  </head>
  <body>
  <div id="doc" class="yui-t1">
  <div id="hd">This is your header</div>
  <div id="bd">
  <div class="yui-b">This is the secondary block</div>
  <div id="yui-main">
  <div class="yui-b">This is the main block

<div class="yui-g">

<div class="yui-u first">This is a unit</div>

<div class="yui-u">This is another unit</div>

</div>
  </div>
  </div>
  </div>
  <div id="ft">This is your footer</div>
  </div>
  </body>
 </html>

This screenshot shows how the grid units will appear on the page:

This is necessary due to the lack of support of the :first-child pseudo-selector in some A-grade browsers. When nesting grids within grids (to make four columns within the main content block for example), the first grid should have a class attribute of yui-g first.

By default, the two unit columns that make up a grid are of equal width, but you can easily deviate from this by using one of five 'special grids' which specify more than two columns or a range of different column proportions. The five special grids have class selectors of:

• .yui-gb for three columns of equal width
• .yui-gc for two columns where the first has double the width of the second
• .yui-gd for two columns where the second has double the width of the first
• .yui-ge for two columns where the first has three times the width of the second
• .yui-gf for two columns where the second has three times the width of the first

We can see one of these special grids in action by simply changing the class name of our grid in the previous example:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>YUI Grids Page</title>
  <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
  </head>
  <body>
  <div id="doc" class="yui-t1">
  <div id="hd">This is your header</div>
  <div id="bd">
  <div class="yui-b">This is the secondary block</div>
  <div id="yui-main">
  <div class="yui-b">This is the main block

<div class="yui-gb">
  <div class="yui-u first">This is a unit</div>
  <div class="yui-u">This is another unit</div>

A third unit created with the yui-gb special grid

  </div>
  </div>
  </div>
  </div>
  <div id="ft">This is your footer</div>
  </div>
  </body>
 </html>

This change in class name will result in our grid appearing as in the screenshot below:

There is a large number of different variations of page layouts that the grids tool allows you to implement. All you need to do is define your pages in the correct structure, and give the right elements the right class attributes and ids. It may seem a little daunting at first, trying to remember all those different class names and nesting rules, but with a little bit of practice, it all becomes second nature.

In addition to the online documentation and cheat sheets, the CSS Grids page on the YUI developer site also contains a very nifty little tool that allows you to generate page templates for use with the grids.css tool. Simply choose your desired layout, add in any header or footer text and the tool will then generate the basic template code for you to copy and paste into your own files:

A Word on Sam

Completely separate from the CSS tools, but still composed entirely of CSS, the Sam skin provides a default theme for each of the library's controls. Each control contains a skin CSS file in its assets folder and should be linked to using the standard <link> tag in the <head> of any pages on which the controls are displayed.

In order to use the skin files, as well as linking to the stylesheet used by the skin, you will also need to give the containing element (whether that is the <body> or a <div>) a special class name:

<body class="yui-skin-sam">

Or:

 <div class="yui-skin-sam">
  <div id="someControl"></div>
 </div>

This makes using the skin extremely easy. The Sam skin takes its name from its creator Sam Lind. New skins will be provided by the YUI developers in future releases of the library and there's nothing stopping you from creating your own.

Summary

The CSS tools are the smallest and without doubt the easiest component of the library to use, but their contribution in the form of time-saving and functionality provided is no less than that of the utilities and controls.

First the reset tool provides normalization services to the most common HTML elements so that borders, margins, and padding, among other things, are set to zero across all of the most common browsers.

The base tool then builds upon the level foundation provided by resets to give certain elements back some of the styling that marks them out from other elements. This tool is the only one that isn't part of the minified aggregated resets-fonts-grids.css file.

Next, all of your page text is standardized to the Arial font and is given a fixed line height. Sizes are also fixed to a consistent size across the document with the fonts tool.

Finally, the precise layout of your page can be declared through the use of a range of CSS classes, ids, and templates defined for you in the grids tool.

Additional References

• For instructions on Installing Yahoo! User Interface library, click here
• For instructions on Debugging Yahoo User Interface, click here

Source

The source of this content is Chapter 2: Creating Consistency With The CSS Tools of Learning the Yahoo! User Interface library by Dan Wellman (Packt Publishing, 2008).

Executive Editor Sean Lopez own  : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes

And Like The Global Information Network and Global Information Network

And Like Scholarship for Moms and Pearl Necklace and Pearl Necklaces and Iphone App Developers and Fine Jewelry and and Email Marketing and

Adoption and Pearls and

Ceramic Mills