Skip to main content

Drupal Planet

Element Styling Cheat Sheet

When I’m building a new theme at some point I like to style all the html elements in one shot. Often designers will send me a style guide with references to all manner of things so this gives me a chance to set some defaults from which I can then build on.

You might call this a “tip from a pro”, but this is something all budding themers can make use of, and save yourself a few minutes as well.

WTF are Gpanels?

Gpanels are drop in multi-column snippets for displaying blocks in vertical columns, such as 2 columns, 3 columns or 4 columns. Gpanels are an optional extra that come with the Genesis starter theme.

Gpanels are fluid, meaning they stretch and compress with the page width because they are built with percentages, this is similar to how regular Panels work although the layout method is quite totally different.

The Gpanels come in four delicious flavours…

Strike Back with Stylestripper

Almost as hot as a real stripper Stylestripper is a small module that allows you unset any stylesheet in Drupal—core or contrib.

The bane of my theming existence are modules that load their own stylesheets. Of course some simply must “load their own”. Admin menu would be pretty useless without one, so would Views UI. But some stylesheets IMO verge on being a total waste of time, take comment.css for example…

Starter Theme Performance Metrics

When we think about factors determining our choice of Starter theme how often do we think of performance? I’d hazard a guess very few consider factors such as database queries and memory usage, whereas we are more inclined to be interested in ease of theming, documentation and support.

These tests compare 6 Drupal starter themes—Stark, Framework, Ninesixty, Zen and both Genesis starter subthemes (6.x-2.x-dev). For these tests each theme was in “live production mode”, meaning that any registry rebuild features were disabled and for Ninesixty the debug stylesheet was unset.

I have been performance testing my themes for quite some time. I thought it might be interesting to see how they stacked up against some of the other starter themes, at least to show the differences by comparison. However that is not the focus of this report. There is no intention of stating which is the best starter theme, nor are these tests exhaustive. Indeed there are some glaring ommissions, such as size of JavaScript files and the comment.tpl.php is not factored into total page weight.

Those things aside this is at least an interesting comparison and I hope to encourage you to factor in performance when making your starter theme selection.

Equal height columns in Genesis

The Genesis starter theme (6.x-2.x) comes with a jQuery plugin to make equal height columns a breeze. Usage is completely optional and all you need to do is uncomment the script in genesis.info, clear cache data in Performance settings and it will work.

The savvy amongst us will note that the plugin can be re-used and is not necessarily just for equalising the height of columns. You could just as easily re-purpose this for any set of boxes.

Why title = $title is Bad

The title attribute is something that’s been around longer than most of us can remember and its become one of the most commonly used, if not abused, attributes.

As far back as I care to look (4.7, 5 & 6) ) Drupal’s default node template has included a title attribute in the node title link (the one that normally appears on teasers wrapped in an <h2> heading). Drupal 7 hasn’t learnt from this past mistake either.

Why we must Reset ol and ul Elements

Some things are so obvious and well known to the seasoned developer that they never think twice about them. On the other hand web-dev neophytes struggle with the basic how to, leaving little or no time for the why. This is a shame. Deep understanding can only come with knowing the why. Why is what makes us wise.

We know that browsers handle lists differently and certainly Eric Meyer’s reset, Tripoli or the universal selector reset will make short work of that. However, therein lies a problem.

POSH Reference in a Nutshell

A quick fire list of semantic (X)HTML elements with brief notes on usage. POSH is the acronym for Plain Old Semantic HTML. POSH gives us an easy to remember acronym that encapsulates the simplicity, best practice and benefits of using semantic markup. You can learn more about POSH on microformats.org.

Theme Developers Toolbox

For those just getting started in Drupal development peering into another developers tool-box-of-tricks may reveal a work flow not previously considered, and software never heard of. Frankly I’m pretty run-of-the-mill but I do have my favourites apps I just can’t break free of.

How to write an em dash

In the Drupal docs we often see misuse of the hyphen where an em dash should be the order of the day. For my own reference as well as yours here’s how to write an em dash.