DIY CSS Frameworks - A followup on our discussion at Barcamp Auckland
December 18th 4 commentsThe 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:
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.
Your session was a highlight man.
On the subject of using overflow in ie6. I still encounter block elements popping out of their container when using overflow now and then. Its a good idea to also use position:relative when using overflow:hidden. If your not floating objects inside your container you may need to set the containers position to relative. Theres an example of it on Snooks site: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
Cheers man, and nice to see some fresh meat on dontcom;)
Gday,
Could you link to an example of the usage of each hack, so that we can delete each rule in Firebug to see how it breaks?
Great presentation though. I ended up combining elements of four different frameworks as I saw fit. I’ll release the results when I’m done with my new project.
Personally I prefer zoom:1; rather than height:1%;
zoom forces IE to set the has-layout flag on the element.
It is preferable because:
a) you are not writing incorrect markup (1% works because the IE layout engine is non-standard)
b) it is an IE only attribute.
c) it is clearer what the intention is because it applies to IE only - the height trick is just ugly.
[…] dontcom.com - Personal website of Darren Wood ยป DIY CSS Frameworks - A followup on our discussion a… […]