CSS Frameworks – Blueprint, 960.gs, others

blueprints

The Goal

We are redoing the eRacks website (our partner and suppliers of rackmount servers)  in Django, and revamping it with best-practices code and frameworks throughout – so here is the benefit of our reviews and choices for our CSS framework.

CSS frameworks are a relatively new thing in the last couple of  years, largely borne out of a need to standardize what is largely a mess or patchwork (or lack) of standards, and minor implementation differences.  Note that these are largely caused by IE (Internet Explorer) and the “embrace and extend” mentality of Microsoft, which intentionally introduces minor incompatibilities which are in their interest to do, as long as they have the major market share.

All the frameworks seem to share in common Reset CSS as a starting point – the idea being to reset all the different browsers’ handling of default styles to a minimal baseline, and then build something consistent on top of that.

Seems pretty clean, although debugging in Firebug is slightly more difficult, as all the basic styles list all the tags, so you have to scroll through all the noise to find your actual changes  / styles.

Most or all the candidates add a “grid” of standardized column widths and typography heights to the minimalist reset CSS, and strive (mostly successfully) to greatly simplify the HTML/CSS development cycle by providing some easily followed guidelines for standard practices such as columns, headers, margins separation, font sizes, and so forth – taking the “CSS Box Model” well beyond the do-it-yourself mess of quirks that it is now.

They also all attempt to hide or eliminate (or have already dealt with) the many cross-browser quirks and issues, making your design instantly supported on most or all of the available browsers out there.

When followed, they minimize or eliminate the “Butterfly problem” – where small changes can have vast consequences – the storied example being, a butterfly flying on one side of the earth can cause vast disruption and unrest at the antipodean point 12,000 miles away :).  In other words, it eliminates the frustration and irritation of changing one little thing in CSS, and having it break your page layout completely – or even worse, it appears to fixit on the browser you’re using, but displays completely wrong on IE or some other browser-du-jour.

The Background

From Wikipedia, here is an excellent and comprehensive List of CSS frameworks.

The Players

The ones we looked at, are:

  • Blueprint CSS – This is the most established and well-known, with enough of a following that there are many third-party howto’s and plugins available, as well as integration with other frameworks, sprites, and so forth.
  • Boilerplate – This one is more minimalist, with more semantically meaningful class names than “span-4”, etc – although surprisingly, even though it claims to be more minimalist, it offers no compressed or one-file version to minimize downlaods, thus making the download footprint larger. Althgough it looked promising, it’;s also over a year old, and doesn’t show any recent activity.  “Needs documentation” is one of the 4 or 5 issues in Google Code.
  • 960 Grid System – This is one of the newer frameworks, and has gotten good reviews and critical acclaim, and uses a slightly different grid scheme with wider column spacing (10px on both the left and the right) and easier divisibility by more & different numbers (the number 960 has a lot of factors).  It also has nicer typography and a well-thought-out font list for graceful degradation on Linux OSes and with other browsers.
  • Bluetrip – This combines the Blueprint base framework with the more typography-oriented Tripoli framework – an takes the typography elemn
  • Elements – A project-wide framework and directory structure, for more than CSS. Includes a CSS lightbox.
  • Typogridphy – A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry
  • Fluid 960 Grid System – This is a really impressive one – and would be great for a fluid site, with colum and spacer/site margin widths based on percentages, that works – and without using tables. We’ll be taking a closer look at this one on the next fluid site we do.

The First try

So, since we liked the Linux and typography support of 960gs, along with its elegant simplicity, we started with 960gs.

A while after we got it set up, got the pages displaying, and we noticed:

  • It had three files, and although there were compressed versions in the standard distribution tree, still this would require three connections from the server at load time.
  • Despite having the CSS images for the grid in the distribution, there was no obvious way to highlight the grid with a class.
  • eRacks had a 160-pixel left column, and a 132-pixel right column – which did not fit neatly into either the 12-column nor the 16-column grid.
  • There were some nifty plugins, addons, and jQuery integration for Blueprint – and a huge community following.  So….

The Decision

We decided to give Blueprint a try – we also noticed that nonstandard grid sizes and columns were supported by multiple tools and generators – so we surfed over to the Blueprint Grid CSS Generator and generated our 28-column grid, which nicely accomodated the left and right columns, at almost their original widths, with a 970px total width.

We also kept the 960.gs Linux-friendly font list, for smooth and nice typography on all platforms – it was a one-line override in our list of site-specific CSS, which is so small (about 20 lines) we keep it in the header of the page itself.

The Result

So we have a great-looking, prototype site up and running, and we are working on the rest of the port to Django:

eracks.librehost.com

Please note that THIS IS A WORK IN PROGRESS, and may not be available, or may not look right, at the particular time you view it!

The plugins

Useful plugins that we are also considering, are here:

  • Tabs – integrates jQuery with the Blueprint classes, to do some nicely polished-looking Tabs
  • Liquid Blueprint – Makes the Blueprint Grid liquid (fluid)
  • SilkSprite – Integrates the Silk Icons set as sprites

The Feedback

Oh, and one more thing –

We welcome and encourage your feedback and opinions on either the new eracks site, or on the above review of CSS Frameworks and our decision.

j

One Response to “CSS Frameworks – Blueprint, 960.gs, others”

  1. Max H Says:

    Great article, really shows what you can do, and a lot of your available options. Bravo!

Leave a Reply