Beautiful Printable Pages with CSS

In Donor Tools every page is a report. Adopting this simple philosophy has allowed us to almost completely eliminate the need to build dedicated reporting features. And it was almost effortless to implement – it took maybe a couple of hours.

CSS aficionados should recognize this trick already: it’s called print style sheets. Basically you have one set of stylesheet for screen display, and a separate set of styles for printing. This works in just about every modern browser, even the inferior ones. And the great thing about print styles is that we often don’t need to worry about complicated positioning or page flow – just provide some basic style instructions, hide non-printable controls and headers, and it looks beautiful on paper.

This has, of course, been discussed elsewhere, but I’m going to show you how we put it to work for Donor Tools.

I like to use CSS Edit, which in my opinion is the cream of the crop