• A CSS reset that eliminates the discrepancies across browsers.
• A solid grid that can support the most complex of layouts.
• Typography based on expert principles that predate the web.
• Form styles for great looking user interfaces.
• Print styles for making any webpage ready for paper.
• Plugins for buttons, tabs and sprites.
• Tools, editors, and templates for every step in your workflow.

Within about an hour or so I pretty much had it down. Check out this quick-start tutorial and this more detailed one to get yourself going. It eliminates a lot of the repetitive CSS work you normally have to do for each new project you start and creating a standards compliant layout takes just minutes using their included CSS classes and “the grid”.

So, I remember reading about CSS sprites a year or so ago but never used them until the other day. Basically a sprite is an image with many images inside it. Facebook for example takes this to the extreme. They utilize CSS sprites to round the corners of your profile pic and for some other uses as well. Take a look at the linked images and you’ll probably get where this is going.

Basically instead of having multiple images swapped in and out by CSS you create one master image and use CSS to reposition the background-image to suit your needs depending on what section of the sprite you want to display to the user. No load lag and no flicker. Pretty snazzy…

I found two tutorials online which were easy to follow and within minutes I fully understood how to use and manipulate sprites via CSS. The first one I read was written by Dave Shea for the website “A List Apart”. The second one was from “Well Styled”.

Check out both the tutorials above and I’m sure you’ll agree this is the best, most elegant way to do this type of image manipulation. This may be old news so to speak but I thought it was still worth looking at again. I hope you find the info as useful as I did.