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 where 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 800x600 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
6 Responses to “My CSS Framework”
Adrian McEwen
Excellent. Thanks for posting this. I think my first port of call is going to be your print bookmarks - tedium is long overdue the ability to print things out properly!
Ozbon
I found most of what you said pretty interesting.
One other way I've found of getting round the entire "only loading one file" (as well as a bundle of other stuff) was dynamic stylesheets.
Basically, if you can set your webserver to parse CSS files through the PHP or ASP engines then your 'css' file could actually just be a bunch of PHP/ASP includes, which would then output as one file.
Using this (and using a PHP Header or ASP Response.Header to still send it back out as a css file MIME type etc.) you can do a lot of very funky stuff with dynamic colourschemes etc. too.
Mike Cherim
You should probably drop the 62.5% font-size, Karl. I have since learned that to some people who set their overriding size on their browser the type can be overwhelmingly large. I was told but a couple of people who read my blog that one can get away with it on this theme and other well-made sites, but in many cases it gets messy.
I have found better, more consistent results with a different start, like so:
body {
font-size : 100.1%; /* percent % to avoid IE ems bugs and .1 for older Opera versions */
}
#wrapper {
font-size : 0.9em; /* then scale it down to a size you like */
}
This was news to me when I learned this but is now a standard practice for me. The results are a lot more consistent. ---Mike
Karl Dawson
Note to self (and reply to Mike): I now know the secret of the 13px default font size so will work that back in (done right it's still scalable). I'll update the post when I do!
Ben Bishop
TSG - Thanks for this, it has been a great help. You offer good reasoning and logic behind this framework and It provides an excellent starting point for designing sites that cater for all browsers and their quirks.
Just a quick question, the print style sheet is listed on the screen.css sheet in its entirety. Is this due to the problems with IE? Does this effect only IE6 and below or also IE7?
Thanks again
suz
re: your font-size update,
shouldn't you also update the IE5 sheet to include x-small too? - it's a quirk but IE5.x displays small as medium