The Files

I thought I’d write up a short post outlining the discussion we had at Barcamp regarding building your CSS Framework (or template).

I’ve been using a standard three column template (both css and HTML) for a couple of years now. I wrote a post back in Feb ‘06 outlining my CSS Methodology (named rightly or wrongly…) I’ve refined and tweaked that set of tools a fair bit and have cut it down to only one main CSS file (if you exclude the IE CSS overrides and the print CSS)

What I now have are these two files:

• The base HTML file
• The CSS template/framework/whatever

Linking to those files means that you’re welcome to download and use as you see fit. I have decided to license them under Creative Commons (Attribution-Share Alike 3.0 New Zealand License) so please don’t be a dick - if you use it credit me somewhere (in the comment will be fine) and if you change/alter/make better please be sure to release it back into the wild. These files are what I use and I would love you all to help make them better - remember: this isn’t a competition - this is for the greater good!

The Holy Trinity of IE hacks

Note: these are IE6 hacks

During my talk I mentioned the holy trinity of IE hacks. I need to clarify and correct an error in that statement. I was too pepped up on coffee and didn’t list them correctly. So here is what I call the holy trinity of IE hacks:

• display: inline; this removes the 10px margin issue that floated elements tend to have
• position: relative; this fixes random issues (too many to name)
• height: 1%; this also fixes random issues (too many to name)

And as an added bonus here’s another one (which I listed at Barcamp instead of the above height:1%; one)

• overflow:hidden this forces IE to respect block level widths and/or heights set to an element. If this is omited the layout it likely to ‘blow-out’ if the content of the block-level element is too wide/tall

Please use the comments section below to ask any questions or pass on any other advice/tips/etc you may have.