Web designers are always looking for a simple ways to speed up design processes and improve their code in general, and one of the best ways to start is with a solid HTML/CSS framework. When designing a website from scratch there is a lot of extra time needed for creating the html markup and semantic styling. Fortunately for us designers, there is a plethora of great frameworks already out there that are based upon a well developed understanding of web design and web standards. Here are three of the best found on the web:

EASY

This framework, developed by user interface expert and self proclaimed “front-end ninja” Alen Grakalic, is an amazingly diverse framework that not only sets a solid foundation for HTML markup and CSS, but also for javascript. It includes built-in (jQuery powered) interactive functions that are so easy to use that you really don't have to know first thing about JavaScript. It also includes a library of preformatted and precoded CSS/HTML content blocks that you can simply paste into your master template. You don’t have to worry about browser rendering issues for certain elements in your code; Easy takes care of it for you.
The website has a lot of documentation and demos as well to help in cases where you need to go beyond the default settings. You can check it out here: http://easyframework.com.

960 Grid System

960px wide design has become more and more common in modern web design as web users have switched over to wide screen displays. What 960 Grid System does is give the designer an editable CSS and HTML framework that is contained within this web standard dimension. On the site, www.960.gs, there is a custom CSS generator as well as a HTML layout generator. Designers can walk through their designs on a wireframe basis, adding elements and containers, and then have 960 generate their custom HTML that can be placed into the master template for the site. The same goes for the custom CSS generator. Once dimensions and number of columns are chosen, 960 generates the CSS using easy to use semantic markup that is cross browser friendly. And if the design changes and element dimensions are altered, a few changes to the CSS are all that is needed.

Blueprint

One of the most widely used frameworks since Web 1.0, Blueprint fulfills all of the same CSS and HTML standards that the previous frameworks have but also includes a reset and print style sheets that are extremely helpful. All web designers know that a solid reset.css file can make all the difference when trying to get good cross browser styling. Older browsers that aren’t built upon new web standards need to have this “reset” so that they act appropriately when designers start adding their own styles. Blueprint also adds a print.css file that is often overlooked by many designers. Without it, printing a page from a website will pull all the “screen” styles from the browser and waste a lot of space and ink, which can be pretty annoying. The print style sheet removes all the background images and colors, resets widths and heights to ensure quality margins on the printed page, and has a solid cross browser performance (Yes, different browsers don’t just display website differently, they print them differently as well… go figure.)

You can find Blueprint here: http://www.blueprintcss.org.

These are only three of the vast amount of frameworks that are out there, but they are the ones that I’ve personally used on projects and have found extremely useful. Other frameworks include:

• YUI Grids
• YAML
• CSS Boilerplate
• Tripoli
• Molio

If you’re not sure which framework to use, I would suggest just trying them out. Each has a lot of good qualities and will get you farther, faster than if you didn’t use them. Play around and find a framework that you like the best. Once that is done, you’ll find that your design times can be cut in half and the quality of your work will vastly improve.