1. Technology
Send to a Friend via Email

CSS Frameworks

A CSS framework is a pre-built structure of CSS styles and properties that you can use to generate specific looks on your Web pages. CSS frameworks make it easy to get standard styles (like curved corners, layout grids, basic typography, and so on) onto your pages without having to build it all for yourself.

960 Grid System
This framework is set up to use in programs like Fireworks and Photoshop as well as a CSS framework to start using the grid. It allows you to create layouts of either 12 or 16 grid elements at a fixed width of 960 pixels.

Blueprint CSS
Blueprint includes an easy-to-use layout grid, typography, support for Drupal and other CMS's, as well as a print stylesheet. It doesn't create flexible width pages, but there are options and alternatives for people who want that.

BlueTrip CSS
This is a CSS framework based on both Blueprint and Tripoli. The author had tried a lot of the many CSS frameworks available and wanted one that had just what he needed - since the functionality of this one came mostly from Blueprint and Tripoli, "BlueTrip" was born.

Boilerplate
Boilerplate is a stripped down CSS framework written by one of the original authors of Blueprint CSS. The goal was to keep the framework light and only include the bare essentials to get a project going.

Elements CSS Framework
Elements is more than a CSS framework because it also includes project workflow. Elements includes the CSS for resetting the browser, lightbox images, external links, and navigation.

Emastic
Emastic is a CSS framework that relies on flexible widths (em and percent) to generate layouts. It also supports fixed widths within the grid.

ESWAT
ESWAT is a full Web project framework.

Hartija - CSS Print Framework
This is a framework for creating printer-friendly versions of your pages with CSS. It's not a full-fledged framework, but great if you need printable pages quickly.

How to Build a CSS Framework
In some ways, this article is a framework in itself, but it's much more useful as a how to for building your own framework. The biggest problem with frameworks is that they don't reflect how you build Web pages. You have to adapt your style to someone else's in order to use their framework. But with this document you can learn how to build your own using the standard elements that you prefer.

LogicCSS
LogicCSS includes both CSS and PHP files to generate an XHTML/PHP/CSS standards-based website quickly. It includes CSS for grids, typography, fonts, and common values.

My CSS Framework
This CSS framework was built to meet the constraints of a very challenging CMS. It includes grids based off Yahoo! UI, support for IE 5 on the Mac (wow!), WCAG validation, and more.

Schema Web Design Framework
Schema includes both CSS and HTML elements to create an entire system. There is a minimal CSS layout and PSD files for graphics.

SenCSs
SenCSs stands for "sensible CSS" and it provides CSS to style the repetitive parts of a website. It gives you a start on typography, clears up base browser styles, and gives you alternative fonts for Windows and Mac. It does not provide a layout or grid.

Simpl
Simpl is a CSS framework that was developed when the other frameworks didn't work out. It includes several layout options plus styles for tables, forms, fonts, and text.

Taffy CSS Framework
Taffy does browser reset, typography, ems for text sizes, and a basic stylesheet for older browsers.

Tripoli
Tripoli is the minimum CSS framework you can get. It doesn't tell you how to format your styles or layout your site. Instead it does all the resets and standardizations you need to have a clean slate before you apply your own CSS.

Typogridphy
Typogridphy is based on the 960 Grid System framework. It includes both typography and grids to create nice looking type and layout quickly.

WYMStyle CSS Framework
WYMStyle is a CSS framework that is built to manage pages with a very specific structure. It is built to be used in a testing environment with all applicable CSS styles moved to a single CSS document when you go live (or you can post the framework as it is).

Yahoo! UI Library
The Yahoo! UI library is a complex framework that includes four preset page widths, six preset templates, making over 1000 page layout combinations. And that's just in the grids section. There is also a reset section, a fonts section, and Ajax elements. The Yahoo! UI Library is much more than a CSS framework.

YAML Framework
Yet another multi-column layout is what YAML stands for, but it's much more than just a multi-column layout. It includes layouts for 2 and 3-column pages rotating where you put your primary content, it includes navigation, and it has a lot of examples to show you how to use it.

©2014 About.com. All rights reserved.