<ul>     <li><a href="#">Home</a></li>     <li><a href="#">About</a>       <ul>         <li><a href="#">History</a></li>         <li><a href="#">Team</a></li>         <li><a href="#">Offices</a></li>       </ul>     </li>     <li><a href="#">Services</a>       <ul>         <li><a href="#">Web Design</a></li>         <li><a href="#">Internet             Marketing</a></li>         <li><a href="#">Hosting</a></li>         <li><a href="#">Domain Names</a></li>         <li><a href="#">Broadband</a></li>       </ul>     </li>    <li><a href="#">Contact Us</a>       <ul>         <li><a href="#">United Kingdom</a></li>         <li><a href="#">France</a></li>         <li><a href="#">USA</a></li>         <li><a href="#">Australia</a></li>       </ul>     </li>   </ul>

That’s it: some simple HTML that is both accessible and easy to edit.

Visually appealing?

If you have previewed the menu above, you’ll see a pretty boring list of items. And I promised you it would be visually appealing! Let’s add some style.

The first step is to remove the indents and bullets from the unordered list and define the width of our menu items.

ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	}

Next, we need to position our list items. Fortunately, these will stack vertically by default, which is what we require. However, we must set the position as relative, because we will need to position the sub-menus absolutely within them.

ul li {	position: relative;	}

Next step is the sub-menus. We want each sub-menu to appear to the right of its parent menu item when that item is hovered over.

li ul {	position: absolute;	left: 149px;	top: 0;	display: none;	}

Using the “left” and “top” attributes, we can absolutely position each sub-menu within its parent menu item. You will notice I have set the “left” property to 149px (1px less than the width of the menu items), which allows the sub-menus to overlap the main menu and not produce a double border. (You’ll see what I mean later.)

We have also set display to “none,” as we don’t want the sub-menus to be visible by default.

So now we have the framework in place, but it’s still looking a bit plain. Let’s style those links.

ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}

I have styled the links to my taste, but they can be changed to your preference, as you wish. It is important to set display to “block,” as we want each link to take up all the available space of its containing list item.

So things are looking a little better, although users of Internet Explorer for Windows may disagree. Unfortunately, IE Win interprets the line breaks between our nicely formatted HTML list items as white space, so you will notice that the menu items don’t stack up neatly in that browser. However, there is a way around IE’s bugs:

/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; }* html ul li a { height: 1%; }/* End */

We can apply the Holly Hack above, which hides these rules from all browsers but IE Win. Perfect. You will notice the height: 1% rule that has also been added. Unfortunately (again!) the float fix uncovers another IE bug, which requires a height value to make the links display as block-level elements.

You will also notice the need to close the menu, which can be done by adding the missing border to the bottom of the list. So, the ul rule becomes:

ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	border-bottom: 1px solid #ccc;	}

With some luck, everyone should now be able to see the unfunctional menu.

Making it work

Now the fun bit. We need to make those sub-menus appear when we hover over the menu items.

li:hover ul { display: block; }

Voila…here’s the bare bones menu in action.

“Woo hoo! It works!” I hear 1% of you shout. “Awesome!”

OK, OK, so that darn IE/Win has to ruin everything and not do as it’s told. IE/Win only allows the :hover pseudo-class to be applied to a link — so the li:hover that makes the sub-menus appear means nothing to IE.

A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.):

startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";  }  node.onmouseout=function() {  this.className=this.className.replace»	(" over", "");   }   }  } }}window.onload=startList;

Great thanks and appreciation is due here to Patrick Griffiths and Dan Webb, who introduced this trickery in a previous ALA article, Suckerfish Dropdowns. Thanks, guys!

So, the hover rule now becomes:

li:hover ul, li.over ul { 	display: block; }

Additionally, we also need to associate the JavaScript with our main ul, which becomes:

<ul id="nav">

Hopefully, with the above tweaks in place, everyone should be able to see a simple version of the menu in action.

IE5.01 Jumping Menu Bug

Anyone using IE5.01 on Windows will notice that the menu jumps around when you hover over some of its items. The problem is easily fixed by modifying our previous hacks as follows:

/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */

Mystery IE6 Bug:

During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.

  <ul>     <li><a href="#">Home</a></li>     <li><a href="#">About</a>       <ul>         <li><a href="#">History</a></li>         <li><a href="#">Team</a></li>         <li><a href="#">Offices</a></li>       </ul>     </li>     <li><a href="#">Services</a>       <ul>         <li><a href="#">Web Design</a></li>         <li><a href="#">Internet             Marketing</a></li>         <li><a href="#">Hosting</a></li>         <li><a href="#">Domain Names</a></li>         <li><a href="#">Broadband</a></li>       </ul>     </li>    <li><a href="#">Contact Us</a>       <ul>         <li><a href="#">United Kingdom</a></li>         <li><a href="#">France</a></li>         <li><a href="#">USA</a></li>         <li><a href="#">Australia</a></li>       </ul>     </li>   </ul>

That’s it: some simple HTML that is both accessible and easy to edit.

Visually appealing?

If you have previewed the menu above, you’ll see a pretty boring list of items. And I promised you it would be visually appealing! Let’s add some style.

The first step is to remove the indents and bullets from the unordered list and define the width of our menu items.

ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	}

Next, we need to position our list items. Fortunately, these will stack vertically by default, which is what we require. However, we must set the position as relative, because we will need to position the sub-menus absolutely within them.

ul li {	position: relative;	}

Next step is the sub-menus. We want each sub-menu to appear to the right of its parent menu item when that item is hovered over.

li ul {	position: absolute;	left: 149px;	top: 0;	display: none;	}

Using the “left” and “top” attributes, we can absolutely position each sub-menu within its parent menu item. You will notice I have set the “left” property to 149px (1px less than the width of the menu items), which allows the sub-menus to overlap the main menu and not produce a double border. (You’ll see what I mean later.)

We have also set display to “none,” as we don’t want the sub-menus to be visible by default.

So now we have the framework in place, but it’s still looking a bit plain. Let’s style those links.

ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}

I have styled the links to my taste, but they can be changed to your preference, as you wish. It is important to set display to “block,” as we want each link to take up all the available space of its containing list item.

So things are looking a little better, although users of Internet Explorer for Windows may disagree. Unfortunately, IE Win interprets the line breaks between our nicely formatted HTML list items as white space, so you will notice that the menu items don’t stack up neatly in that browser. However, there is a way around IE’s bugs:

/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; }* html ul li a { height: 1%; }/* End */

We can apply the Holly Hack above, which hides these rules from all browsers but IE Win. Perfect. You will notice the height: 1% rule that has also been added. Unfortunately (again!) the float fix uncovers another IE bug, which requires a height value to make the links display as block-level elements.

You will also notice the need to close the menu, which can be done by adding the missing border to the bottom of the list. So, the ul rule becomes:

ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	border-bottom: 1px solid #ccc;	}

With some luck, everyone should now be able to see the unfunctional menu.

Making it work

Now the fun bit. We need to make those sub-menus appear when we hover over the menu items.

li:hover ul { display: block; }

Voila…here’s the bare bones menu in action.

“Woo hoo! It works!” I hear 1% of you shout. “Awesome!”

OK, OK, so that darn IE/Win has to ruin everything and not do as it’s told. IE/Win only allows the :hover pseudo-class to be applied to a link — so the li:hover that makes the sub-menus appear means nothing to IE.

A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.):

startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";  }  node.onmouseout=function() {  this.className=this.className.replace»	(" over", "");   }   }  } }}window.onload=startList;

Great thanks and appreciation is due here to Patrick Griffiths and Dan Webb, who introduced this trickery in a previous ALA article, Suckerfish Dropdowns. Thanks, guys!

So, the hover rule now becomes:

li:hover ul, li.over ul { 	display: block; }

Additionally, we also need to associate the JavaScript with our main ul, which becomes:

<ul id="nav">

Hopefully, with the above tweaks in place, everyone should be able to see a simple version of the menu in action.

IE5.01 Jumping Menu Bug

Anyone using IE5.01 on Windows will notice that the menu jumps around when you hover over some of its items. The problem is easily fixed by modifying our previous hacks as follows:

/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */

Mystery IE6 Bug:

During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.

It’s remarkable that so few websites use print stylesheets as:

• Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
• They’re phenomenally quick and easy to set up

Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.

How to set up your print stylesheet

A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed. (There are many different media you can use for stylesheets, such as for handheld, TV, projection etc. – see a full list of media types for more.)

What to put in your print stylesheet

The CSS commands in the print stylesheet essentially override the CSS commands in the main stylesheet. As such, the only commands you need to put in the print stylesheet are ones to override the CSS commands in the main stylesheet. This means you don’t need to repeat any colour or branding CSS commands as they’ll already be taken from the main stylesheet.

Generally speaking, you’ll want your print stylesheet to make the following happen when users hit that print button:

Remove unwanted items

Usually it’s just your organisation logo and page content that you’ll want to appear on the printed version of the web page. You’ll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details.

There may be certain isolated items you’d prefer weren’t printed so you can simply assign these class="noprint" in the HTML. To get rid of these items, along with the header and navigation (assuming these are assigned <div id="header"> and <div id="nav">) use the display: none command:

#header, #nav, .noprint {display: none;}

You may also want to remove certain images and adverts, especially animated images as these won’t make sense when printed.

Format the page

There’s nothing worse than printing off a web page to find the last few words of each line cut off. It’s also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.

Generally speaking, the three CSS commands you’ll need are:

width: 100%; margin: 0; float: none;

These commands should be applied to any containing elements (<div>s for a CSS layout and <table>s for table layouts) to ensure the content spans the full width of the paper. So, the full CSS command would perhaps be something like:

#container, #container2, #content {width: 100%; margin: 0; float: none;}

Change the font?

Some print stylesheets do change the font size (often to 12pt) but this isn’t generally a very good idea. If users increase text size on the screen then the text will print in this larger font size… unless you specify a fixed font size in the print stylesheet.

Other print stylesheets change the font family to a serif font (such as Times New Roman) as this is slightly easier to read from print. Whether you choose to do this or not is up to you as users may be a bit surprised to see a different font printed out.

Do also bear in mind that background images and colours don’t print out by default. As such, you may wish to change the colour of text in a light colour so it has a reasonable colour contrast without its background.

Links

Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the print out. For example:

a:link, a:visited {color: #781351}

For bonus usability you could include a footnote on the page listing all the URLs from that page, with each link referencing its URL underneath with a number. It’s otherwise impossible to know where a link is pointing to when reading a print out from a web page. See this working example and find out how to do this by reading this Improving link display for print article.

Making the print stylesheet

When making the print stylesheet place the print CSS commands into the bottom of your main CSS file. As you keep adding more commands check how your web pages look on the computer screen (don’t do this on a live website!). Keep adding commands until you’re happy with the appearance, then cut these commands out of the main CSS file and paste into the print stylesheet.

To summarise, your print stylesheet may look similar to this:

/* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}
/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}
/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}
/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}


You’ve now got a print stylesheet! For something this quick and easy to set up that improves usability as much as it does, you’d be mad not to use one!

http://css-edge.blogspot.com

.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}

Here is what each of those CSS properties is for:

• opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
• filter:alpha(opacity=50); This one you need for IE.
• -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
• -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML

.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}

Here is what each of those CSS properties is for:

• opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
• filter:alpha(opacity=50); This one you need for IE.
• -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
• -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML

http://html-ipsum.com/

HTML Ipsum is the brainchild of Chris Coyier of CSS Tricks. It’s a simple, yet extremely useful tool for web designers. Instead of generating and breaking apart paragraphs from the Lorem Ipsum site for every project, simply copy the prefabbed piece you need. It’s already formatted in HTML and ready to go.

Typetester

http://www.typetester.org/

Typetester is an extremely comprehensive tool for determining how different typefaces will appear on the screen, and for the web. The controls let you compare up to three fonts side by side to help guarantee the perfect choice.

What the Font

http://new.myfonts.com/whatthefont/

In addition to having a great acronym, What The Font is perfect for identifying fonts. Upload an image of the typeface in question, verify the letters, and you’ll get a list of possibilities. I’ve linked to the newly overhauled beta design above.

Flipping Typical

http://flippingtypical.com/

Flipping Typical lets you browse through some of most popular typefaces installed on your computer, and then demo them with custom input text. It’s an interesting way of font selection using what you already own.

A Guide to Web Typography

http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

I Love Typography takes a great look at some of the key elements that make up web typography. If you’re baffled about good and bad typographic practices — start here.

Top Ten Web Typography Sins

http://www.smashingmagazine.com/2008/08/11/top-ten-web-typography-sins/

Many of these web typography sins are the result of laziness, but there are some fresh ideas and pointers that will help neaten up your own website’s copy.

Ampersands with Attitude

http://www.smashingmagazine.com/2008/08/15/ampersands-with-attitude/

This article showcases some alternative fonts with great ampersands. Just because you’re using one typeface, doesn’t mean you can’t mix and match ampersands.

Elegant Web Typography Presentation

http://www.slideshare.net/jeff_croft/elegant-web-typography-presentation

Excellent slide show cooked up by Jeff Croft of Blue Flavor. He takes a look at the basics of web typography, and then outlines some definitions for quality uses.

Typographic Contrast and Flow

http://www.webdesignerwall.com/tutorials/typographic-contrast-flow

A demonstration of how good use of type size and color can make a page much more scan-able and “flow” for readers.

10 Common Typography Mistakes

http://www.thedesigncubicle.com/2008/12/10-common-typography-mistakes/

Brian Hoff outlines some common pitfalls for typography. Interesting read if you’re new to typography especially.

The Paragraph in Web Typography & Design

http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design
 
There is an art and history to the paragraph. This articles explores some background, and puts in into the context of web typography.

The Elements of Typographic Style Applied to the Web

http://www.webtypography.net/toc/
 
What makes good typography? How do I make sure my type is arranged properly? This site is a bible for web typography pointers and basics.

Introduction to Font Families, Font Choices, and HTML punctuation

http://www.yourhtmlsource.com/text/webtypography.html

Did you know the family “slab serif” existed? I didn’t. This is a great, no shame, introduction to font families in web typography.

Typesites Blog

http://typesites.com/archives/

Typesites is a design blog dedicated to showcases websites with great use of typography. If you’re ever in need of inspiration, give this a look through.

Typechart

http://www.typechart.com/

Typechart is more or less a showcase for a variety of typefaces and settings. CSS for each is offered if you plan on using it yourself.

Better CSS Font Stacks

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

Don’t just write off the second and third members of your font families. This article outline effective ways of picking great CSS font families.

Increase Your Font Stacks with Font Matrix

http://24ways.org/2007/increase-your-font-stacks-with-font-matrix

Help plan effective CSS stacks with this matrix of  pre-installed fonts on a variety of systems.

Color Contrast Check

http://www.snook.ca/technical/colour_contrast/colour.html

Very simple tool to help determine if a pair of colors will work together in contrast or not.

CSS Type Set

http://www.csstypeset.com/

Flipping between the CSS and live HTML can become a hassle when tweaking the type on a page. Save yourself the guesswork. CSS Type Set allows you to make live changes and see the corresponding CSS. I found this especially useful for finding usable kerning.

Display Type and the Raster Wars

http://jontangerine.com/log/2008/11/display-type-and-the-raster-wars

On the web, browsers don’t just render type. With the invention of anti-aliasing engines like ClearType, fonts get smoothed and polished in a variety of ways depending on the browser and operating system. This article helps demonstrate the distinctions.

Five Simple Steps to Better Typography

http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/

Incredibly useful five step article for drastically improving your typography. Many of the points directly related to web design and CSS.

Compose to a Vertical Rhythm

http://24ways.org/2006/compose-to-a-vertical-rhythm

A tutorial on building a web copy that flows vertically.

Fawnt

http://www.fawnt.com/

Here’s one free font site you actually should take notice of. Fawnt has a great appreciation of higher quality fonts. Take a look at the top 50 typefaces on the front page and you’ll see the difference.

Font smoothing, anti-aliasing, and sub-pixel rendering

http://www.joelonsoftware.com/items/2007/06/12.html

Windows displays text differently from the Mac. This article outlines the differences and the design vs. readability background.

Lucida Hybrid: The ‘Grande’ Alternative

http://www.brownbatterystudios.com/sixthings/2007/03/14/lucida-hybrid-the-grande-alternative/

Lucida Grande is a great font for many website designs. Unfortunately not everyone has this font available to their system. This article explores possible alternatives to this font family problem.

1. 960 CSS Framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.

Demo can be found here

Tutorials Explaining how to use 960 CSS Framework

• A Detailed Look at the 960 CSS Framework

  

  “Jeffrey Way” takes a close look at the 960 CSS Framework, explaing the pros and cons of using it. He also takes us step by by step and create a simple “12 column” layout with a simple header and two column structure. Most important tip here is : you must assign a class to each div. Naming conventions require that that the class name begins with “grid_” and ends with the number of columns needed.

• 960 CSS Framework – Learn the Basics

  Stefan Vervoort takes the heavy work for you and explains the basics of this framework so you can start developing with 960 pretty fast. Basics principles explained here include: not to edit 960.css, Loading the grid, Containers, Grids / Columns, Margins and styling. Another post by Stefan where he solves some of the problem he faced while working with this framework.

• Fluid 960 Grid System

  

  The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library.

2. Blueprint CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

There are several Blueprint plugins available which can overwrite aspects of the framework or add new styles for you to use.

Check out the Live Demos

Tutorials Explaining how to use Blueprint CSS Framework and tools using it

• BlueprintCSS 101

  Jeff Croft explains Blueprint’s core feature, how we use it, how it has impacted our workflow, and what we like about it.

• A Closer Look At the Blueprint CSS Framework

  In this tutorial we will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to actually use the framework.

• Blueprint CSS Cheat Sheet

• Blueprint Grid CSS Generator

  This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png image file for use as a background image during development- very handy for making sure everything lines up properly. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

• PXtoEM

  

  PXtoEM.com is a website that makes converting PX values to EM values easier. The CSS file of the values you’ve choosen can be get based on the typography.css portion of Blueprint CSS to setup a default typography.

• Construct

  Construct, a visual layout editor based on Blueprint & jQuery, Construct, a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

3. The jQuery UI CSS Framework

jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

• Styling Buttons and Toolbars with the jQuery UI

  

  A real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content. Here are button examples that demonstrate how to incorporate the power of the CSS framework classes in a custom widget.

  Check out the Live Demos here

4. YAML

Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.

YAML comes with a a very nice Ajax builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.

Check out the Live Demos here

• Flexible Layouts with YAML

  

  Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article, providing an overview of what is possible with YAML and may deliver some ideas for your future layouts.

5. Yahoo YUI Grids CSS

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

The YUI Grids Builder — a simple interface for Grids customization.

Don’t forget to check the CSS Reset/Base/Fonts/Grids Cheat Sheet

Check out the Live Demos here

• Intricate Fluid Layouts in Three Easy Steps

  This tutorial explains how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids in three easy steps.

• YUI CSS Grids: awesome, but useless?

  Jeff Croft asks if YUI CSS Grids has a certain limitation for sites wider than 750px, Dustin Diaz comes in and explains some interesting features and usage we can do using YUI CSS Grids. “One cool thing I’ve done with it is made seven different templates with virtually the same html with the exception of one class name (yui-t (1-7)). It’s wonderful because it’s completely source order independent. If I wanted a style switcher on my site you could take the approach of swapping out a className rather than a whole new css file. Thus, no reason for the whole “Invasion of the Body Switchers””

Worth Checking CSS Frameworks

- typogridphy

A Typographical and Grid Layout CSS Framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking.

Download it here

- SenCSs

SenCSs stands for Sensible Standards CSS Framework, supplies sensible styling for all repetitive parts of your CSS, allowing you to focus on actually developing your website’s style.

View the example HTML file

- A CSS Framework

A CSS framework allowing rapid development of sites with pre-written and tested components, letting you get to the interesting stuff as quickly and efficiently as possible.

- Tripoli

Tripoli is a generic CSS standard for HTML rendering. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind. Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

- BlueTrip CSS Framework

A full featured and beautiful CSS framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons.

Check out the Live Demos

- Emastic

- WYMstyle

- Elements

- Malo

- LogicCSS

Articles Explaining what is CSS Frameworks and how/which to Use

- What’s not to love about CSS frameworks?

- CSS Frameworks + CSS Reset: Design From Scratch

- What Are The Benefits of Using a CSS Framework?

- Blueprint CSS Framework vs YUI Grids

- Battle of the CSS Frameworks

- The Lessons of CSS Frameworks

- When to use CSS framework?

- Source:www.noupe.com

1. 960 CSS Framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.

Demo can be found here

Tutorials Explaining how to use 960 CSS Framework

• A Detailed Look at the 960 CSS Framework

  

  “Jeffrey Way” takes a close look at the 960 CSS Framework, explaing the pros and cons of using it. He also takes us step by by step and create a simple “12 column” layout with a simple header and two column structure. Most important tip here is : you must assign a class to each div. Naming conventions require that that the class name begins with “grid_” and ends with the number of columns needed.

• 960 CSS Framework – Learn the Basics

  Stefan Vervoort takes the heavy work for you and explains the basics of this framework so you can start developing with 960 pretty fast. Basics principles explained here include: not to edit 960.css, Loading the grid, Containers, Grids / Columns, Margins and styling. Another post by Stefan where he solves some of the problem he faced while working with this framework.

• Fluid 960 Grid System

  

  The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library.

2. Blueprint CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

There are several Blueprint plugins available which can overwrite aspects of the framework or add new styles for you to use.

Check out the Live Demos

Tutorials Explaining how to use Blueprint CSS Framework and tools using it

• BlueprintCSS 101

  Jeff Croft explains Blueprint’s core feature, how we use it, how it has impacted our workflow, and what we like about it.

• A Closer Look At the Blueprint CSS Framework

  In this tutorial we will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to actually use the framework.

• Blueprint CSS Cheat Sheet

• Blueprint Grid CSS Generator

  This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png image file for use as a background image during development- very handy for making sure everything lines up properly. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

• PXtoEM

  

  PXtoEM.com is a website that makes converting PX values to EM values easier. The CSS file of the values you’ve choosen can be get based on the typography.css portion of Blueprint CSS to setup a default typography.

• Construct

  Construct, a visual layout editor based on Blueprint & jQuery, Construct, a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

3. The jQuery UI CSS Framework

jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

• Styling Buttons and Toolbars with the jQuery UI

  

  A real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content. Here are button examples that demonstrate how to incorporate the power of the CSS framework classes in a custom widget.

  Check out the Live Demos here

4. YAML

Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.

YAML comes with a a very nice Ajax builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.

Check out the Live Demos here

• Flexible Layouts with YAML

  

  Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article, providing an overview of what is possible with YAML and may deliver some ideas for your future layouts.

5. Yahoo YUI Grids CSS

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

The YUI Grids Builder — a simple interface for Grids customization.

Don’t forget to check the CSS Reset/Base/Fonts/Grids Cheat Sheet

Check out the Live Demos here

• Intricate Fluid Layouts in Three Easy Steps

  This tutorial explains how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids in three easy steps.

• YUI CSS Grids: awesome, but useless?

  Jeff Croft asks if YUI CSS Grids has a certain limitation for sites wider than 750px, Dustin Diaz comes in and explains some interesting features and usage we can do using YUI CSS Grids. “One cool thing I’ve done with it is made seven different templates with virtually the same html with the exception of one class name (yui-t (1-7)). It’s wonderful because it’s completely source order independent. If I wanted a style switcher on my site you could take the approach of swapping out a className rather than a whole new css file. Thus, no reason for the whole “Invasion of the Body Switchers””

Worth Checking CSS Frameworks

- typogridphy

A Typographical and Grid Layout CSS Framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking.

Download it here

- SenCSs

SenCSs stands for Sensible Standards CSS Framework, supplies sensible styling for all repetitive parts of your CSS, allowing you to focus on actually developing your website’s style.

View the example HTML file

- A CSS Framework

A CSS framework allowing rapid development of sites with pre-written and tested components, letting you get to the interesting stuff as quickly and efficiently as possible.

- Tripoli

Tripoli is a generic CSS standard for HTML rendering. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind. Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

- BlueTrip CSS Framework

A full featured and beautiful CSS framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons.

Check out the Live Demos

- Emastic

- WYMstyle

- Elements

- Malo

- LogicCSS

Articles Explaining what is CSS Frameworks and how/which to Use

- What’s not to love about CSS frameworks?

- CSS Frameworks + CSS Reset: Design From Scratch

- What Are The Benefits of Using a CSS Framework?

- Blueprint CSS Framework vs YUI Grids

- Battle of the CSS Frameworks

- The Lessons of CSS Frameworks

- When to use CSS framework?

- Source:www.noupe.com