Compass

Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain.

You can use Blueprint,YUI or 960.gs, or their own Compass core. Only Blueprint and 960 are stable, others are in Beta.

The syntax used is SASS. Compass provides:

1. A command line tool for managing your Sass projects.
2. Simple integration with Ruby-on-Rails, Merb, StaticMatic, and even non-ruby application servers.
3. Loads of Sass mixins to make building your website a snap.

Licence is a slightly modified MIT License.

Less CSS

Less CSS is similar to SASS, with a slightly different syntax (which is compatible with css).
It is also made with Ruby. They explain their difference with SASS

So why make an alternative to Sass? It’s simple: syntax. One of the key features of Sass is its indentation-based syntax, which gives you curly-brace and semi-column free code. But the cost of this is having to learn a new syntax and having to rebuild your current stylesheets.

LESS embraces CSS, and any additional functionality it comes with, is integrated in such a way as to make it as seamless as possible. Thus, you can gradually move your CSS to LESS, or if you’re only interesting in using variables, or operations, you aren’t forced to learning a whole new language.

License is Apache Licence 2.0

Pros and cons are similar to SASS, but there is no Compass equivalent.
But the fact that the syntax is css means that you can intregrate css frameworks (like YUI, 960.gs) without having to “adapt” them. And the IDE support might be a bit better since their syntax is closer to CSS.

Less has RoR integration too (and it’s called more, obviously).

SASS

SASS stands for Syntactically Awesome Style Sheets and defines itself as a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.
SASS is written in ruby, so you need to install ruby.

License is MIT.

pros

• Provides variables , structure, making the code simpler (you only define things once)

Cons

• You have to learn a new syntax
• Don’t expect too much IDE support apart from syntax highlighting
• no particular framework support (for that, there is Compass)
• you have to “compile” your css

First conclusions

Grid systems enable fast conversion from drawn designs to actual html. The price is hard-coded layouts (table-based design with a different syntax). The counter argument is that no one ever changes the layout without changing the markup, anyway.

Of the bunch, YAML and YUI are a bit more flexible, enabling some kind of source order independence and some kind of switching layouts by only switching the css.

Community wise, YUI is the biggest, but the CSS is just a part of the whole YUI. And YUI Grids 3 is not there yet. Next are Bluetrip and YAML (bigger in German than in English) and 960.gs

License wise, they are all GPL/MIT, except for YAML, which uses a CC-A 2.0) licence, and does not seem to follow Creative Commons recommendations NOT to use CC licences for software.

You still have to know css. You still have to work on the styling, once the layout is done (with the help of reset, typography and base css files). None provide variables, code reuse. (see lesscss to get an idea of what I mean.)

There is a debate about thou shalt not edit these files vs use generic files, but customize them. Each side has its argument: maintenance and standard vs size and (slightly) speed improvement.

Bluetrip

Bluetrip is a CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.

In particular, uses Hartija’s print stylesheet, 960.gs’s simplicity and Elements’ icons

Pros

• Grid based
• best of everything

Cons

• Grid based
• A fork of all of the above, now moving in its own direction
• small community

960.gs

960 Grid System (gs) is just a grid (960 px divided in 12 or 16 columns).
You have then the following classes:

• container_XX is used in the outermost box to determine how many columns. You can use container_12 or container_16 (which can be used separately or in tandem)
• grid_XX: XX is for how many columns you want the block to be. For example, grid_10 will be 10 columns wide. The exact pixel width is determined by how many columns you’ve divided the grid into
• prefix_XX allows you to add in blank columns before a block. XX specifies how many blank columns you want.
• alpha is for if you have children blocks. If you do this, you’ll want the first child to have no margin on the left side. alpha makes that happen.
• omega is similar to alpha, except that it gives no margin on the right side. Use it for the last child.

Uses Erik Meyer reset. Supports only A-Grade browsers.

Dual licensed as MIT and GPL.

Pros

• grid based, pixel based.
• Gridder GUI tool

Cons

• grid based: hard-coded location via the css classes
• Fixed columns and fixed max width (but Variable Grid System can generate 960-style css for any grid

Tripoli

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

Licence is GPL.

Pros

• Not grid based

Cons

• html 4 only
• one man code and still in beta

YAML

YAML (Yet Another Multicolumn Layout) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. It is not grid based.

It has no connection to Browser support (no IE8 as of 22 September 2009)

Licence is Creative Commons Attribution 2.0 License (CC-A 2.0) or commercial. The site says it is open source.

Pros

• Not fully grid based, which allows basic variations of the layout by changing only the css
• Form Construction Kit
• CSS builder
• Source-order Independence / content first possible with certain layout

Cons

• License (I am not sure it is open source. Plus CC are not recommended for software licence)

Blueprint

Blueprint uses a Grid based layout approach.

The Blueprint CSS Framework is available for use in all personal or
commercial projects, under both the (modified) MIT and the GPL license.

Their reset is based on Meyer’s reset.

Blueprint Browser compatibility list

Pros

• based on the grid system
• Scripts (in Ruby) for customization (which uses YAML for config )
• Grids builder (using Adobe AIR) and other tools
• Blueprint Sites

Cons

• based on the grid system
• Not semantic (css classes encode the position). On that, you can read The myth of content and presentation separation

YUI CSS

YUI CSS Package is composed of four files:

1. reset
2. fonts
3. grids
4. base

Licence is BSD.

Both Yahoo and Google serve YUI from their network.

In YUI3, grids is marked as deprecated (The post Re: Announcing YUI 3.0.0 beta 1 explains that grids is going to be entirely rewritten.)

Pros:

• Good docs
• strong community
• uses em
• Grid builder
• Graded browser support
• Offers source-order independence

Cons:

• Use of unnecessary nested div tags
• a bit bloated