A few weeks ago, I saw as one of GitHub’s featured projects a bit about a CSS design framework called Compass. Actually, Compass is several framework, (Blueprint, 960 and YUI) wrapped up with some very exciting Haml/Sass code. Sense CSS has always take me more time then it should, I decided to give it a try. I wanted to make a static page first so I didn’t have to worry about testing models, and all the other thing that come part and parcel with Merb or Rails. I decided that I would redo my resume in HTML.
I am looking for a job, and have been using Craig’s list as part of my search. Sending along a link to my resume would let me keep track of how often it was looked at. A resume is also a rather static document that I could serve as strait HTML and CSS with a little hand editing as necessary. It turned out to be a great first project and I am happy with the result. Compass is an excellent way to make well structured layouts.
Compass solves one of the major complaints against grid systems: they mix formatting with content. Without a tools like Compass and sass, Grid stylesheets have to define CSS classes like ‘grid-12′ that you add to your mark-up. These class selectors are calculated and designed to form the grid. Compass uses those formulas and the power of sass to apply the appropriate styling directly to the content. All the domain knowledge you have from the grid api still holds. The code goes into your sass stylesheet outlines rather then into classes in your HTML. Bottom line, you get all the power of a grid framework unobtrusively.
While Compass offers three different grid systems, I decided to use Blueprint for this project for it’s flexibility, and manageable set of options. The Compass executable creates a nice project for you with sass files and directory for stylesheets and images. There is a configuration file that will let you point these directories to the appropriate place in an existing project. Using the executable in that directory subsequently will compile the sass file into CSS. There is even an option to have Compass watch for change in the sass files and recompile them. This is very helpful, and something I wish haml would do as well.
I started by writing my resume in haml essentially as a series of lists with titles. I then used the blueprint api to move the sections into the correct alignment. Then applied the typography and utilities modules to the lists to remove the bullets and make the page flow nicely. Fially I used a bit of non-framework code to tweak alignments and colors.
The process was the same for the print alignment, except that a letter size piece of paper at 96dpi is less then 950px across. I changes the size of my box model, in essence eliminating one 40px column to make everything fit on one page and still look nice. I think this is something more sites should do and would eliminate the need for a “printer friendly” version. Finally, had copied all the compiled files (html & css) to the public directory on my web server. From initial download to final product with no previous experience in either Blueprint or Compass was about six hours. In my opinion a far better result in less time then I would have gotten with a pure css implementation.
You can see my source files at Github and the finished product here.
My conclusion is that Compass will be my CSS framework of choice for the foreseeable future. My next project is to write my own blog engine in Merb, and I have already added Compass the the project.