Adding CSS Resets in Your Drupal Zen Theme
- Thursday, March 4th, 2010 -
THE QUICK ANSWER: Put your resets at the very beginning of your html-elements.css file
We at Sharpdot recently completed a large series of websites using Drupal. After months of designing comps, coding them up, adding all of the special functionality, we discovered some style issues (and it wasn’t just IE problems this time!) After quite some time of trying to figure out what was going on, we discovered it was that the Zen theme does not add reset styles to there theme!
Unfortunately there has been an argument to not add reset styles in the Drupal Zen theme. This is quite concerning, mainly because our mission as a web shop is to code our sites up to be pixel perfect to the PSD’s and comps of the project. The arguments I have seen against resets are that they want the ability to style things quickly without being hampered by having to restyle all of the typographical elements and just let the browser do the work with it’s defaults. Well this can create many problems especially between Windows and Mac platforms and the differences in the way they render their text. Our standard operating procedure is to have resets at the beginning of all styles them restore defaults to the page elements. This approach normally works great, however we are dealing with Drupal here, and Zen’s sub-theme approach.
So where do you start? Well my first thoughts were to add a new resets.css file to the theme and include it using the .info file in the sub-theme like you are supposed to do for JavaScripts and IE hack stylesheets. Well after doing this the styles kept on being added after other elements I was trying to reset first in the stylesheet order. After more research and trial and error, I found that reset styles are supposed to go into your html-elements.css file at the beginning of the code. For some reason this is the way the Zen Drupal theme people made it work. I am sure there is some argument out there for it, but there you go it’s Drupal, where nothing is that simple, but it can do just about anything.
One thing we have built here at Sharpdot is a library of starting themes, boilerplate’s and functionality which we can use to streamline our development as well as keep a consistency on all projects. One of the next things I have on my list is to make a Drupal Zen theme boilerplate with our edits available (with CSS resets!), check back for that.
