i have used quite a number of css frameworks after discovering their existence. using css framework makes front-end web development more efficient.
if you don't already know, a css framework is a collection of css files with predefined rules for grid-based site layout and typography, and handles cross browser compatibility issues.
there are many css frameworks. this post looks at some of some free css frameworks i've tested and worked with, namely 960 grid system, blueprint, 1140 css grid and foundation.
960 grid system
designed for fixed content width 960 pixels. it is a pure grid system. it provides a few variants of column layouts: 12 columns (60 pixels), 16 columns (40 pixels) and 24 columns (30 pixels), with rtl versions.
the download package include codes for the different layouts, and comes with templates for use in design softwares (eg photoshop, illustrator, gimp) and printable templates for sketching designs on paper.
the downside of this framework is fixed-width. it's less flexible on devices and screens with different resolutions.
for more flexibility, there's fluid 960 grid system and adaptive css which adjust the layout to fit to the page.
there's also a variable grid system to define different content width, column widths and number of columns.
i've not used any of the variants.
blueprint
designed for content width 960 pixels with 24-column layout, with 30 pixels per column.
coding-wise it's very similar to 960 grid system.
blueprint comes with more than just a grid layout. it includes typography and predefined elements. it also has print styles which are printer friendly. (having print styles is quite important as for some reason some users prefer to read sites from prints.)
the 'extras' is a bonus to cut down styling your website if you like them.
1140 css grid
designed to fit into a 1280 monitor and bcomes fluid and adapt to smaller monitors. it uses 12-column layout with column widths defined in percentages. columns can be defined inside columns, ie nesting column support.
the download package comes with grid-based only layouts.
foundation
foundation uses percentage to define page width, by default 980 pixels and this value can be redefined. it automatically adjusts to smaller devices. it uses 12-column layouts with colun wideths defined in percentage. it also supports nesting columns.
foundation comes with additonal codes to style buttons and forms.
download package also include scripts to enhance user experience - i've not used these yet.