Hidden Pixels recently rounded up the available CSS frameworks into a list. I happen to be evaluating CSS frameworks as well to find a flexible system to provide on a CMS I'm working on. The Hidden Pixels list isn't very descriptive of the specific usage or value each framework has to offer, so I've provided a summary of each to make this a useful reference when evaluating the list.
The CSS presentation frameworks listed below provide the underlying CSS structure for typical web site needs. The idea behind most of these is that they provide rules for the kinds of markup and layout web designers do repeatedly. They may supply grid systems and typography support, but not all of these provide both. Most provide at minimum an Eric Meyer style CSS reset. I've divided the lists into separate the frameworks providing support for grid-based customizable layouts from the other types of systems.
Frameworks supporting grid-based customizable layout
- 960 Grid System
Similar to Blueprint, but provides 12 and 16 column grids at 960px wide. 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. - Blueprint
Provides a 950px wide grid, with 24 columns spanning 30px, and a 10px margin between columns. Also provides a typography stylesheet with a baseline of 18px, allowing for alignment if every element uses a multiple of 18px. - BlueTrip
Combines the grid system from Blueprint with the typography from Tripoli. - CleverCSS
A Python script that allows you to use a sort of CSS shorthand to write your rules quickly without all of the characters required by CSS syntax. The script then converts your shorthand into valid CSS. - Emastic
A flexible framework, similar in concept to Blueprint, that uses ems for elastic layout. Allows you to achieve fixed pixel or fluid grids using ems, pixels, or percentages for column widths. - ESWAT
File system framework for a simple site, including directories for the types of files you might want to use. Does not include grid or typography systems. - Logic
A collection of CSS files and PHP utilities to generate layouts. Flexible framework providing support for elastic, em-based typography, and grids with ems, pixels, or percentages. - That Standards Guy
Starts out as an apporach to call single style sheet within a Microsoft CMS. Pulls together various CSS libraries and hacks including YUI Grids. - Typogridphy
Framework that uses the 960 Grid System for fixed or fluid layout, and provides typographic style rules for ‘creating vertical rhythm’, whereby all adjacent lines of text line up horizontally, regardless of line breaks and new paragraphs. - YUI Grids
Yahoo's CSS Grids framework provides fixed and fluid layouts. Layouts are source-order independent, so your columns can be output in any order, regardless of the order in presentation. Grid accommodates IAB Ad Unit guidelines.
Related frameworks
These frameworks may provide either element support without layout rules or pre-configured layout options.
- Boilerplate
Based on Blueprint, but strips out Grid framework, so you'll have to write your own rules for columns. - Content With Style
A quick-start framework, providing common names for div elements (e.g. header, content, main, sub, local, nav) and provides 6 different layouts. - Elements
File system framework for a simple site, including directories for the types of files you might want to use. Includes specific prototype/scriptaculous and lightbox. Does not include grid or typography systems. - Schema
Provides support for a 2 column layout with right sidebar. Layout options are minimal, but provides styles for standard HTML elements. - Tripoli
Provides a base for creating dynamic layouts without interfering with typographic measurements. Includes rules for most commonly used HTML elements, and via a Layout plugin provides canned layout options. - WYMstyle
Framework using layout modules. You import modules into a main stylesheet to achieve one of the core layouts provided in the library. - Yet Another Multicolumn Layout (YAML)
Provides a fixed width and several multi-column layout options.