I've used and supported many CSS Frameworks. There are quite a few out there that have huge fan bases and very active participants.

Here are some of the more popular ones:

• 960
• Blueprint
• BlueTrip
• Tripoli
• YAML
• YUI

All of them have good and bad points in my opinion. I think for a programmer who isn't familiar with CSS, a web shop that cranks out sites and wants to insure consistancy between them or just someone in a hurry, then they are a great idea. But for a serious UI designer/developer i think they are overkill.

The typical structure of a CSS framework is:

1. CSS reset - resetting every HTML tag (or using Eric Meyer's reset) to basically zero out everything.
2. Typography - Setting every HTML tag that you just zeroed out to something specific.
3. Grid - a series of classes that can be used to create a newspaper-like structure for layout.
4. Forms - defines classes or resets the basic HTML form tags to have a specific look.
5. Extras - Framework specific styles.
6. Plugins - Themes, icons, fancy text .... etc.

I'm a much bigger fan of the 1KB CSS Grid or the Malo framework. Honestly I just want to have some reusable layout classes. I will adjust other things as needed instead of doing everything upfront. I don't want to scan through 100's of CSS classes trying to figure out what is messing up my design. I believe "Less is More".

Just about everyone who surfs the web these days has a broadband connection to the Internet. So why bother spending a lot of time making an optimized web site.

Is the page size really important? So what if my web page is 250k instead of 50k. That is only a few seconds difference on a good connection. Right?!

I hate it when web programmers think this way. WAY back in the old days a boss of mine handed me a 16 page document that explained the concept of this new thing called HTML. This "company" called NCSA just put out a product called Mosaic and wanted everyone to download it. They changed the Internet as we know it. At the time 14.4 baud modems were new and getting a PC to connect to the Internet usually required a call to tech support.

A lot has changed since then that is for sure. There are a lot of languages you can use to create a website (ASP.Net, PHP, Ruby on Rails and many more) but the final output is HTML.

The big sites like Google spend as much time optimizing their sites as the do actually creating the code to render them. It saves them millions of dollars. What you didn't know it could save a company money? Well lets think about that a minute. The main Google web page is under 30k and millions of people hit that site every day. So they have to have the severs and the bandwidth to handle that. Imagine if the site was a monster 150k in size and had all kinds of bells and whistles. Every person who comes to the site to search would have to download that page prior to doing anything. Which means that Google would have to have extra servers and bandwidth to handle this traffic. Which costs a lot of money. By making a their main page smaller they are saving a lot of money. So by saving money, they make more money. Basic business concept.

Now Google is kind of extreme. Very few website have that kind of traffic. But every business owner would like that kind of traffic. So why not spend the extra effort when building a site to make it as fast as possible.

Here are a few links to help out.

• Ultimate Guide To Web Optimization (Tips & Best Practices)
• Let's make the web faster

I recently had to redo my CSS sprite image for links. The requirements were just a little different when it comes to the link types and the line-height was smaller too. So I used 12x12 pixel icons instead of the standard 16x16 pixel size. Here is the resulting sprinte image file.

I created a small example site for downloading.

Hope this is useful.

I'm not going to spend a huge amount of time explaining what a CSS Sprite is and how to create them. If you have found my site via a search engine on the keyword of CSS Sprite, then you have already visited several other sites on the topic. There are a lot of sites that explain the process already. Here are a few that were helpful for me:

• A List Apart: Articles: CSS Sprites: Image Slicing's Kiss of Death
• CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
• Creating easy and useful CSS Sprites | Css Globe

But what I like to do is provide CSS and files that are useful to everyone immediately. So here is my most used CSS Sprite project. It basically adds a small icon beside different types of links. Here is an example of the ten different type of supported icons.

• word.doc
• excel.xls
• powerpoint.pps
• adobe.pdf
• file.zip
• RSS
• External Link
• Contact
• VCF
• Site Map

Here is the image. It is a small 4k file:

Here is the CSS:

/* Links with icons */
.noicon {background:none;}
.rss {background:transparent url(images/sprite.png) no-repeat right -40px;padding-right:20px;}
a[href ^="http://"], a[href ^="https://"] {background:transparent url(images/sprite.png) no-repeat right -140px;padding-right:20px;}
a[href ^="mailto:"] {background:transparent url(images/sprite.png) no-repeat right -1px;padding-right:20px;height:16px;}
a[href $='.zip'] {background:transparent url(images/sprite.png) no-repeat right -120px;padding-right:20px;}
a[href $='.pdf'] {background:transparent url(images/sprite.png) no-repeat right -60px;padding-right:20px;}
a[href $='.doc'], a[href $='.docx'] {background:transparent url(images/sprite.png) no-repeat right -100px;padding-right:20px;}
a[href $='.xls'], a[href $='.xlsx'] {background:transparent url(images/sprite.png) no-repeat right -20px;padding-right:20px;}
a[href $='.pps'], a[href $='.ppsx'], a[href $='.ppt'], a[href $='.pptx'] {background:transparent url(images/sprite.png) no-repeat right -80px;padding-right:20px;}
a[href $='vcf'] {background:transparent url(images/sprite.png) no-repeat right -154px;padding-right:20px;}
.sitemap {background:transparent url(images/sprite.png) no-repeat right -170px;padding-right:20px;}

You should be able to save the image and copy the CSS and use it immediately.

I've also created a small demo HTML page that you can download and see in action. The .zip file also includes the Photoshop file I used to create the final image.

Feel free to use where ever you want. If you want to create a link back to this page or my site, I'd appreciate it. But certainly not required.

FYI - The icons are the standard 16x16 pixel size. So your line height must be set to be at least that size. Also The CSS selector used in most of these links, is only supported on "modern" browsers. IE6 is not modern!

Most of my professional career I have worked with Microsoft products and for companies that use Microsoft solutions. But often the way that things are handled by them is not always "standard".

Take the Masterpage and Theme concept. It is a huge time saver and 99% of the time it works for everything. But they didn't think about the order of multible CSS files inside the Theme folder and how that would change your cascading effect if you were not carefull. You basically have to name them in alphabetical order of how you want them to be ordered. Which I guess is an easy enough work around.

But it doesn't seem to me that them took any consideration for using different media types (screen and print). At least I haven't found a nice eloquent way of doing it. So I had to figure out a work around and it wasn't to bad.

Instead of doing this in the <head> tags:

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

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

I created two CSS files in the Theme folder:

style.css
print.css

Inside the style.css file I enclosed everything inside of:

@media screen

{

}

Then inside the print.css I did the same like this:

@media print

{

}

That is really all there is to it. Now you can do your standard print CSS file.

I've created a sample Visual Studio 2008 solution so you can see it in action.

Download this file and unzip it. Then open in Visual Studio and run it. You will see a simple one page web site. Then in your browser go to a print preview to see the print.css in action.