Using CSS Frameworks to do the heavy layout lifting

CSS is great, until you’re faced with a deadline and a broken IE6 layout.  You get the cowboy gear out and – ‘Welcome to Hacksville!’  

There’s been a growing trend of CSS frameworks recently as people are obviously crying out for ‘something’ to save them from the madness. 

I’m trying out the 960 grid system at the moment, as it’s not too prescriptive and gives me the flexibility I need.

There’s a great review of the best frameworks on adactio.  I’m sure there’s one to suit almost every need.  Remember they’re just the starting point if you’re doing serious design, but they’ll take most of the pain away, because the heavy ‘hack’ lifting is done for you…   

Also – more on Wikipedia (Update: 17/09) – BlueTrip’s the way to go – best of several worlds – nice.

Using print stylesheets with ASP.NET Themes

ASP.NET themes are great (in principle), and allow you to have lots of control on how your pages look with theme-specific skins, stylesheets, images etc.  The only thing that’s a little bit annoying is that you can’t specify (without codebehind) what media the stylesheet should apply to. 

If you add a new stylesheet to your theme folder called ‘printer.css’, ASP.NET will omit the ‘media’ attribute when it’s output to the <head> section, and it will then be subject to the normal order of precedence rules, affecting your screen output.

There may be other easy ways to do this, but W3C generally think of everything, and then the world catches up – so just use the @media rule to surround all your media-specific styles.  The easiest way to organise this is obviously in different style sheets if you’ve got a complex layout.  My simple ‘printer.css’ is below (along with the stylesheet link generated by ASP.NET). 

This simply knocks out the left nav, right side bar and the footer (all divs of course), leaving a relatively clean page for printing. 

<link href=”../App_Themes/corporate/printer.css” type=”text/css” rel=”stylesheet” />