My CSS Framework

I’m in the situation of working with a Microsoft Content Management System (CMS) that for not unsurmountable reasons is configured to use a single style sheet. On the last project—a major intranet development—I also spent longer than I felt I needed to in implementing a three-column fluid layout where the two outer columns were of fixed width. I already employ good Cascading Style Sheet (CSS) management practises—separate CSS files for colour, fonts and layout but I promised myself to ease the pain and quicken development still further by developing my own CSS framework.

Criteria:

• Only able to call a single style sheet.
• Need to achieve CSS validation for WCAG 1.0 Checkpoint 3.2 for the main style sheets.
• Cross-browser compatibility—including Internet Explorer (IE) 5.x on the Mac.
• Hacks for IE in separate file(s).
• Quick template creation.
• A few comments / examples of rendering bugs to save time on the interweb.

Now, I haven’t really invented anything—just pulled a lot of research and hardwork by a bunch of clever people into the way I wanted to work. I spent a lot of time on Position is Everything (PIE), Centricle, MacEdition and a few blogs collating the CSS filters (hacks) and for the quick template generating I turned to Nate Koechley work with Yahoo!’s YUI grids CSS.

First task was to review and merge the Yahoo! reset CSS with a similar file I have used for about a year now that was co-written by Faruk Ates and Robert Nyman. I should back up a little here and explain that this file contains some selectors that establish a baseline of style—mostly padding, margin and font sizing across all the browsers by overriding their default treatments of certain HTML tags.

Second thing was to strip out the hacks from the YUI grids CSS and put them into a separate file and then amend the em-based widths on the main template divs (#doc, #doc2 and #doc3). The math is clever stuff and derived off a base font size of 13px. I had two problems with this though, one unresearched and possibly unfounded but the second was real and had to be resolved. Whereas em-based dimensions did scale the text on my test page, and indeed the Yahoo! developer website, they also caused a horizontal scrollbar to form at “Largest” in IE and two text size increases in Firefox. Not good for my internal customers stuck at 800×600 screen resolution (which is independent to the size the browser window may be set too) let alone the external site visitors.

I reverted the default body text size to 62.5% and then set the font size for all template divs at 1.2em—the equivalent of about 12px. Remember, this is a framework so you will want to read Richard Rutter’s post on sizing text with ems to appreciate the maths involved. Naturally, this throws Yahoo!’s math out of the window here so I reverted the fixed-width designs to traditional pixel-widths, the grid and unit divs appear to work OK still though.

To digress for a moment, the day before I spoke about this framework at the Refresh Cambridge group meeting Yahoo! updated grids.css to accomodate these different design widths—my framework was originally built the week before around YUI 0.11.0 with a modification made for a fluid layout. Happily, all I added to the new fluid layout (#doc3) was min and max widths and the corresponding JavaScript expression in the IE-only style sheet. Hat-tip here to Matthew Pennell‘s comment on Cameron Moll’s blog for the latter solution.

Anyway, back to the CSS… now the challenge began—how to link all these style sheets together? I’d known for some time that you can link to style sheets from other style sheets so I added a bunch of @import url("stylesheet.css"); rules for the main style sheets.

/* Initialise default styling */
@import url("initial/initial.css");

/* Now, call in via @import the font, colour and layout stylesheets */
@import url("fonts/fonts.css");
@import url("colour/colour.css");
@import url("layout/layout.css");

This method hides the styles from Netscape Navigator 4 and IE 4 so anyone still using these browsers will get good old black and white pages. If I have time then I can take some basic styles from the font and colour style sheets for these browsers and place after all the @import statements.

But how was I going to feed the IE-only files if I can’t use conditional comments any more? Luckily, I had come across Centricle last year and was hoping to find some hackery there. Voila!

/* Next, call in the stylesheets to fix IE */
@import: url("fonts/ie-fonts.css");
@import: url("layout/ie-layout.css");

See that colon there? That is the filter. Very subtle.

The next style sheet I want to call in now is for IE5.x on the Mac and uses the band pass filter as explained in pictures by Doug Bowman.

/* Only IE/Mac sees this stylesheet */
/*\*//*/@import "layout/ieMac-layout.css";/**/

IE5.x Win style sheets are referenced using the mid pass filter, devised by Tantek.

/* Only IE5.x Win sees this type of stylesheet import */
@media tty{i{content:"";/*" "*/}} @import 'fonts/ie5-fonts.css'; /*";}}/* */

If you need a specific style sheet for IE5 / Win then you need the subtley different IE 5.0 / Win band pass filter:

/* Only IE5.0 Win sees this type of stylesheet import */
@media tty{i{content:"";/*" "*/}}; @import 'fonts/ie50-fonts.css'; {;}/*";}}/* */

or for IE5.5 Win only, the IE 5.5 / Win band pass filter:

@media tty {i{content:"";/*" "*/}}@m; @import 'ie55winbandpassbefore.css'; /*";}}/* */

The final style sheet to reference is for printing. This could be done using a standard @import. Unfortunately whereas you can define the media type for print, IE will ignore the reference completely as a result. Instead of writing @import url("print/print.css") print; The media type is added to the print style sheet by wrapping all the selectors between @media print{}. It’s outside the scope of this article but if you are interested in developing print style sheets then you’ll find some useful links in my del.icio.us bookmarks tagged “printing”.

You’ll notice a lot of comments in the various style sheets—these are to save me running to the web to remind myself of stuff and also to provide the basis for my CSS management. It’s horses for courses here, I prefer to structure my style sheets to match the document structure and I don’t bother with indenting. It’s really up to you but when all is done you’ll probably want to shave as many bytes off the style sheets as possible by deleting comments and some whitespace for your production copy of the CSS. You can use a CSS compressor such as the one offered by CSS Drive or do it by hand.

That about wraps my CSS framework up, except to reiterate that you should head over to Yahoo!’s Grid CSS developer page for clear, in-depth instruction on creating your layouts. Feel free to use and abuse and if I’ve screwed up anywhere do let me know. I’ve created a demo page to look at and zipped the files up for you to download from this link. I didn’t add any viruses or crap like that but you should confirm that yourself with whatever anti-virus software you have running.

Update 1 December 2006:
The IE 5.x imports need to be last in the styles.css due the specific parsing error that is being exploiting. My framework is fine though as the only styles listed afterwards are wrapped up in the @media print {} section.

Update 21 December 2006:
I’ve amended the default font size to 13px and “small” in the fonts.css and ie-fonts.css files.

Update 4 January 2007:

• Richard’s excellent article in the last “24 ways” series on typographic rhythm has been incorporated into the framework. I needed to break out Excel to do the math but we’re cooking on gas now.
• I’ve added some basic version information to the CSS and the zip file so we all know when I last changed something

Update 19 January 2009:
Please note that I made an updated post about this “framework” in March 2008. This was a unique problem, with a unique solution. I don’t use YUI grids in the wild or any place else either, preferring my own, different approach nowadays (two years on!) Thanks for making this my most popular blog post though. Have you seen what I’ve been up to with HTML 5?

Technorati Tags: Cascading Style Sheets, CSS, YUI, framework