Drupal theming: Getting your hands dirty and building a house

by Colleen Carroll

I am primarily a themer.  I am not a designer, and not programmer/engineer, whatever you want to call it.  I am, however, what I like to call a "bridge", a bridge between the design community and the heavy Drupal developer community.  I have a background in art as well as business management in information systems (a.k.a.  CS "lite", for business people who can't program) -- so essentially I can talk the talk to both sides.

What I'm most excited about right now is creating themes and bringing designers and themers into the "inner circle" of Drupal without having to teach them how to use the issue queues and it was DrupalCon DC that got me here.  I'm super interested in sharing my experiences with Drupal and theming as well as my best practices for doing that, thus this blog post.

There are two schools of thought developing in the Drupal themer community: "strip-it-and-rebuild-it" theming and what I call "sustainable" theming.  Let me stress that both methods are valid, I've done both, but I now prefer one over the other.

The "strip-it-and-rebuild-it" method is the process of stripping Drupal's theme layer of all those annoying bits, those things that as a themer, CSS'er, HTML'er…drive you mad.  Those things are primarily the abundant CSS classes and HTML markup structure that Drupal core and contributed modules spit out at you.  This method works best when you want complete control over every part of the markup structure.  However, I'm not sure that it extends well.

At Palantir we strive to build sites that the client can maintain, while still providing a richly architected design, voice, and style guide.  We don't want our clients to have to rely on us to support or extend their site.  The greatest accomplishment for us is the day the client takes over their own site and extends it themselves.  In order to achieve this, however, you have to throw away the "strip-it-and-rebuild-it" method and embrace the "dirt".

The "sustainable" method, which I use on a daily basis, is a method of theming, not skinning.  It is embracing all the annoying bits that come out of Drupal and theming for them, because they are not only consistent, they are reliable, and are there for a reason.  We're not just building Web sites; we're developing Web sites that use content management systems.  They require themes because they are rich with logic and workflow and circumstances that are unpredictable.

Let me give you a bit more background about myself and it might make more sense why I: 
A. like getting my hands dirty and,
B. theme the way I do.  

My friend Joanna and I go to breakfast every Friday morning to gossip, catch up on each other's lives (from the past week, yes) and, well, talk about our struggles.  And this past Friday she said something so obvious to me that I can't believe I've never seen it before -- this is why she's my closest friend.  We were talking about my work and I gave her an analogy for the way I do things…because she's not a Web developer and it's easier (and honestly, funnier) if I make up an absurd analogy to describe something I'm working on.  The analogy was, "Imagine you're a laborer on a new house construction…and you…" (I'll fill in the rest in a bit, hold tight J).

Okay, so what's really funny and very obvious about that partial analogy are two things:
1. My boyfriend and I are currently in the process of looking for our first home and
2. I am the daughter of the president of the IAM Local #126 -- a.k.a. long time union worker, and specifically a machinist.

Joanna at breakfast, after hearing my analogy, responded first with a laugh and then a, "Um, you're just like your dad."

My father is both a perfectionist and a patient thinker when it comes to building things.  This is probably the very thing that I inherited most from him, and the same thing that I do everyday I come to work.

Back to the analogy… 

So what I was describing to Joanna was that, in my opinion, the differences between the "sustainable" method and the "strip-it-and-rebuild-it" method are the way you plan for the life of the Web site.  So for me, in analogy-speak, the "strip-it" method would be the process of finishing one room at a time in the house you're building.  You strip the building to its beams, rightly so.  Then you come back in and start to add electricity, drywall, and eventually add trim to the rooms, one at a time, not anticipating what room is next and whether or not the trim, specifically, is going to work in all rooms or be available the next time you go to the store.  Also, my admittedly imperfect analogy included going to the store and buying the trim before you even took a look at the rest of the rooms.   In my analogy, the "dirty" method would be more along the lines of saying…hmm…I have at least 10 doors and windows that need trim around them.  I suppose the owner could even add an addition down the road.  Let me go measure and then buy trim for the entire house, not just this one room that is almost done.

Okay, is it a bulletproof analogy?  No, definitely not, and the more I write this blog, the more I wish I had come up with a better analogy.  Did it get the point across? Yes, it did.  However, I feel that I need to thoroughly explain.  I'm not saying that the "strip-it-and-rebuild-it" method isn't right.  It's just not right for myself or for the type of sites that Palantir typically builds.  The "strip-it" method gives you incredible control over the theme and the output of the site, which is an awesome thing.  However, it doesn't give you the ability to let a client add a new view to the site and have it follow the theme/style guide.  I fear that it creates sites that are reliant on the developer/designer, and not the owner.

The "sustainable" method is not perfect by any means, but you can create a high-end theme where the style guide is logically complex and still apply it to a Drupal site where the client can add their own views, menus, and blocks, while the site retains its design.  It involves patience and an understanding for the markup and CSS class structures that are Drupal.

Why do I call it the "sustainable" method?  Well, because it involves patience, long-term planning and it truly involves getting your hands dirty with Drupal, getting to know its inner structure, even when it changes and annoys the crap out of you.  I'd rather work with it than against it.

Comments

Great article! I couldn't agree more, and it's nice to hear someone in the same boat feels this way. It's funny because I've been thinking about this a LOT lately.

I'm also in the "sustainable" theming camp, but it took a little while for me to get there. When I first started theming Drupal (4.7), being a control freak, I literally wrestled like mad to "fix" things I thought were broken. As if theming complex sites isn't hard enough at times, that approach only made things harder in the end for reasons you mention.

I'd rather work with it than against it too ;)

I still see the basic stuff that drupal puts out like a wasteland with all kinds of "crap" thats floating around the building ground (css classes) - and every time I wanna put in a really beautiful window, I have to clean out all the stuff thats laying around, figuring out why I cant use my usual bolts and screws (html stuff), and usually end up with a solution where i use a lot of paint and pretty plants to hide the cracks in the wall (display:none)

But yes off course thats gonna take a lot from the developer(s) and especially when / if youre handing the project to another developer + it make sense from the perspective of keeping the same "mistakes", so were at least consistence.

No seriously you have a point, but I still think that we should clean out the annoying stuff I wanna build castles on strawberry fields, and not in waste dumbs ..
ups did I just insulted around 86% of the coding community?
<3 formapi :P

Dont get me wrong I think that the mighty D has it right a lot of places but theres still room for improvement (oh hi D7 you look awesome)

btw love the idea of a building ground i just wish i could get my working class heros metaphor in here somewhere (and something about burning bridges) oh well get em next time

rock on!
/mdk

I feel very honored that the King of Denmark has given his feedback and I completely agree with you that there is a lot lot lot of mud in Drupal that I don't want there. And I do rely on display none to hide things. However, I find that some of the things I display none on (like h2.title on blocks, menu blocks etc) have important value to google, and 508 compliance which is often a requirement for our sites. This means that the design doesn't want it (display: none) but google likes it (still in the markup).

Also using Zen and the things it so wonderfully already resets for me is how I tolerate the junk that is getting spit out by Drupal.

You are most definitely correct that our methods are deeply rooted in long term support and the ability to pass the site around to different developers for tandem theming. But I feely strongly that these are things that all site developers should strive towards.

Lets just say that I look forward to Stark.

I loved this post.

I perhaps do not agree with everything, but does anyone? Honestly, I say do "whatever works best for you."

Since you love analogies, here's mine. During the Cold War there were Democratic ways to approaching the problem, and Republican ways. As a Nation we were built on stronger foundations than Russia, and ultimately, I think either approach would have worked. Sure, there were pros and cons to either, but Reagan's force of will and powerful determination won the day "right, wrong or otherwise."

So ... it appears to me that either of these ways will work, but it will depend (ultimately) on the person implementing them, or the WAY they implement them. Present me an "eh-eh" person on either end, and a "gung-ho" person on the other, and I'm picking "gung-ho".

Bradley

Hmmmm. Yeah, the bridge concept is great. Far too often people in this industry only speak design or development. It is a rare and valuable person that can bridge that gap. You're like the Golden Gate of the Drupal community.

As a Joomla "themer" slash designer I loved hearing about the sustainable approach to theming. I really believe it has the client's best interests at heart and will ultimately benefit the web development agency in the long run. I mean it is easy (and tempting) to produce a beautifully minimalistic site (I'm talking CSS), but that rarely takes into consideration the future. It almost like the sustainable approach to theming is a version of progressive enhancement. Nice post, even if it is about Drupal ;).

As a designer (and one of your clients), thanks for this article. I'm always trying to stay current on web items, but I admit it's not my strength and I find it hard to keep up. Like I said, I'm a designer, not a programmer! Your article helped me understand this better. Thanks.

I totally agree and use the building analogy all of the time.
One of my favorites when addressing the cliché wordpress/joomla/drupal comparison is the depth of a sites foundations and the ability to scale what now seems to be a 2 story house to a 100 story skyscraper with a tennis court on top.
Anyways the foundations are important but I think the real challange in drupal is how to take the ugly ducking and make it shine.
That's why I like working with great designers because we all know drupal's foundations are awes0me but I deeply respect the bridges and the interior and exterior designers of the drupal landscape - this is where creativity and style really come in to play.
Thanks for the "sustainable tricks" , it's like having an expert builder show you a new and interesting way of swinging a hammer.
Lior

I love the picture you're referencing here. This is exactly what it comes down to. You still need a balanced framework that you can layer an asymmetrical "cover" (theme) on top of, so that it doesn't "fall over". thank you!

Hi, thanks for the great blog. Could you express your opinions on drupal user mods? I was wonder how well drupal works with user modules. Thanks.

Fascinating how your analogy from the world of architecture and construction fits so well with theming. In many ways, both the aesthetics of themes and the structure of the code behind it can be compared to a house plan. Much like families who live in houses, end users of sites based on any CMS will have changing needs and also simple design preferences that need to be addressable. I like your sustainable approach because it's like building out of materials that anyone can work with, as opposed to a "proprietary" construction.

After creating custom themes for a handful of Drupal sites this year, I've come to learn how important planning for the whole site and unpredictable additions in the theme is. I've tried to do better at this with each new site and have learned a lot along the way. Your sustainable theming for views article was very helpful too, thanks!

I like this post, I've come to the same conclusion as you after battling with all those classes and divs. Views get criticized for this but its creator Merlinofchaos explains here why it is necessary and not really an issue http://www.angrydonuts.com/views-panels-economy-of-front-end-code-and-cl...

I'm glad to hear positive remarks about "bridges", I guess I'm one of those too and sometimes its frustrating to see so many vacancies which seem to require either hard core programmers or designers but nothing bridging the two.

If you build subthemes from the Zen starter kit you'll like this module http://drupal.org/project/zenophile saves a fair bit of time and you can use it to clone any subtheme you have already built.