Valhalla Island

A few days ago I wrote about CSS frameworks. I was a little disappointed that framework files weren’t included for download. The framework I spoke about was different and I mentioned I don’t actually have a working copy of my ideas, I just thought it’d be great. This afternoon I polished off a rough framework and thought I’d share it with you.

Frameworks are made to cut down time spent on repetitive tasks. I’ve always used a template of a HTML file linked to a CSS file and an empty images folder to kick off every website I make. That removes the repetitive task of properly indenting the base HTML, choosing a doctype, linking the stylesheet, creating a reusable CSS comment separator, inserting meta information, etc. There’s still repetitive tasks that could be easily made into a framework to save a lot of time.

The major process being writing/finding hacks to target different browsers. The aim of my framework is to break your CSS up into a core sheet surrounded by individual sheets that can be easily added to for multi-browser support. Additionally there’s a handheld and print sheet with obvious purposes. Here’s a breakdown of the files.

index.html

A raw template that links the core stylesheet. The most basic, nicely tabbed HTML.

core.css

In a perfect world this is the only CSS file you’d need. Well, you’d probably need print and handheld as well. This is where the huge majority of your CSS should be. I’ve included comments, nice big separators (the kind I use) and some example styles to help organise the file. Of course, you can ignore all that and organise however you like.

ie6.css and ie7.css

Instead of muddying the core file with direct child selectors that different versions of IE don’t understand they both have individual files. Conditional comments have been been used in the HTML to only serve each file if the browser’s there. So you’re free to fill them with IE only CSS.

webkit.css opera.css and gecko.css

Each file contains a valid CSS 3 selector that only that rendering engine understands. Inside these files that special selector must be used with every selector to only target those browsers. Of course you could just use those selectors on elements in your core sheet but keeping hacks separate is much nicer.

As browsers get better these advanced selectors are going to become more widely supported and styles using those selectors for targeting reasons will start to break. Already the hack in opera.css also affects the latest WebKit builds, including Safari 3. I’ll try to keep it updated as well as I can.

That’s it. Download it now, try it out, give me some feedback.