Feb - 2012
Written by Tim Wuyts
Drupal is a very powerful and flexible Content Management System (CMS) that is used worldwide as the driving force behind numerous websites, from small companies to giant multinationals.
Something I – and many other front-end developers – always try to accomplish is keeping the code as clean & compact as possible. This doesn’t only look better, but also works a lot easier.
It irritates me immensely that Drupal generates a tangle of (mostly superfluous) HTML code – this as opposed to some other CMSs, like Wordpress. But how can this code be reduced to a minimum?
The power of CSS
Drupal allows you to set up a dynamic website out-of-the-box using modules (CCK, views, panels, …) and a basic theme (ZEN, basic, …). You can actually do this without writing a single line of code. Mostly we want a website with a customized look & feel. We will without a doubt have to use CSS. Because Drupal by default generates a big pile of HTML code and CSS is a pretty powerful markup language, you can achieve a pretty good result in a fairly short amount of time.
With a little bit more effort you can generate tidier HTML. Because your HTML is a lot slimmer then, you’ll have to be creative with the available CSS selectors. But isn’t that what makes it challenging? And what’s more, your work looks a lot cleaner too.
Every Drupal theme consists of a collection of template (tpl) files. These files describe how your content will be generated and rendered. At the start of every project you’ll place the global layout in page.tpl.php and put the content markup in de respective template files (node.tpl.php, block.tpl.php, …). We’ll try to trim these files down and keep them like that. Since most elements in these files are mostly superfluous, we can already cut back here. In some cases you don’t have a choice but to keep some elements, but in this case the principle is: “The lesser, the better”.
In many cases the files, such as node.tpl.php, contain only the following line:
- Search a function in the Drupal API;
- Place it in your template.php;
- Delete what you don’t find necessary.
Depending on the complexity and structure of your website, you might have to retrieve some of the tags, CSS classes or elements, but in any case your code will look much better. Offcourse this has to be considered case by case.
Example: Menus in Drupal.
To illustrate, I will explain in detail how you can provide the different Drupal menus with their own layout. First, override the following functions in template.php:
When you strip these functions of the redundant elements, you get something like this:
But how can you select your menu in CSS when the list doesn’t contain a class or id? First you can where possible use the above-mentioned elements (e.g. #header, #footer, …). This is not always the way to go. In that case, try to find a work-around or retrieve some of the necessary elements.
Some disadvantages & points of attention.
- Don’t always delete everything with the risk of throwing overboard some necessary functionalities. Try to find a golden mean depending on the project’s kind and necessities.
- If you use a WYSIWYG editor, a bad and superfluous markup is almost inevitable. Try to limit or even avoid its use as much as possible.
What you want to do with this, how far you want to go and how much importance you attach to this is entirely your choice. The end user won’t notice that big of a difference. But for me it’s always a worthy challenge to keep the code as clean & compact as possible.
(The examples in this post were based on Drupal 6.20)