fromSeptember 2013
Column:

The Angry Themer

Anger Management
0

Welcome back to the ANGRY THEMER!

Faithful readers of this column who have followed my outbursts over the past few years might ask, “How can I prevent myself from turning into a grumpy old themer with high blood pressure like you?”

Fortunately, the Drupal project has grown to include new tools to help battle-hardened Vikings such as I cope with Drupal’s terrible markup and keep my rage more or less under control.

And you, dear themer, no longer have to dive into code or understand the inner workings of Drupal, while also battling Responsive, Web 2.0, Internet Explorer versions 6,7, 8, 9..., Safari, Chrome, Firefox, or Opera – not to mention the gazillion tablets and smartphones. (Ah, but that’s another story, best saved for another day.)

These are my favorite weapons – uh, I mean tools, tools of the trade – that I utilize when I need to slice through the Drupal Markup sludge.

Themes

Drupal contrib has a ton of “Starter Themes”; so you don't have to trudge through all the basics every time you design a site.

Of course my favorite theme is the Mothership (Full Disclosure: written by your very own Angry Themer), which isn’t so much a theme as a complete cleanup of Drupal’s approach to markup.

Mothership – Keelhaul the DIV!

The Mothership theme is not something you use to make your site pretty; this isn’t Wordpress. It’s designed to make your source code look and act awesome by knifing through the sea of divs, classes, and about 20% of old markup fixes that come packed with Drupal, and deep-sixing it – leaving sparkling-clean HTML5 in its wake.

The Mothership theme comes equipped to clean up nearly every dusty corner and musty absess of Drupal that needs cleaning up:

  • settings for removing class names
  • corrects the markup to HTML5 standards
  • modifies CSS & Javascript files

It also comes with commonly used basic CSS and JS libraries to help with responsive HTML5 sites, and now it even fixes the IE 9 CSS caching/respond.js issue.

As a bonus, you get to swagger and swear like a Caribbean pirate – and the ship’s captain strongly resembles Johnny Depp!

For those less-aggressive themers out there (and you know who your are), maybe Zen or Aurora – which have a more relaxed attitude towards markup – are more your speed.

Modules

Even Angry Themers need modules! Are you the module to my theme?

Magic

A new Magic module has entered the territory twixt themes and modules. While more and more themes are supplying the same basic cleanup functions (like removing CSS and JS files, exporting theme settings, bypassing cache during development, etc.), not all themes do it the same way, and not all developers use the same themes. Magic puts these cleanup tools in a separate module, so they can be used with any theme.

Just like Magic.

It’s going to be very exciting to see how this project evolves. Be sure to check it out at https://drupal.org/project/magic

HTML5 Tools

This module is especially helpful with input fields – like e-mail address for handheld devices (it changes the keyboard layout) – and providing sweet markup wrappers for views like <section>, <nav>, <article>. You can read more about it at the HTML5 tools project page

Views and Semantic Views

Views 3 is already amazingly effective in handing over control of the markup that fields are putting out. To put Views on EPO and provide fine-grained control over wrappers for each result, you cannot forget about Semantic views. It’s now dead simple to make sure view results are wrapped in a <section> tag and data is wrapped with <article> tags. Plus, you can totally customize your output, like putting a .butter-muffin class on the third result displayed. Read more about Semantic Views at https://drupal.org/project/semanticviews

Display Suite

Rumor has it that Display Suite was created to make whiny themers stop griping about the limited control they had in changing the display order of a node; it does, and they did.

Display Suite takes care of the missing layout modes – missing in core – by providing targeted control of each field in a layout. Creating new layouts for a display is easy, it’s almost like a mini-theme inside your theme!

Bonus: You can give your editors access to Display Suite and let them play around with field placement, which also makes it very useful as a prototyping tool. Check it out at https://drupal.org/project/ds

Fences

Another tool for working with Drupal displays is the Fences module – a smaller package than Display Suite. Fences only handles the fields’ output, which gives you a UI instead of needing to hand-code each and every field--[foo].tpl file. Fences can be found at https://drupal.org/project/fences

If neither Display Suite or Fences does it for you, then check out Semantic Fields or use good old hand-coded field template files (as demonstrated in my previous articles in Drupal Watchdog).

There you have it! A veritable tool-chest you should explore and try, with tools certain to make you a much-less-angry Angry Themer. Drupal is too awesome to have markup that looks more ancient than me. Drupal 7 will be two years old soon, and it can’t always keep up with the ever-changing technology. Rather than getting frustrated, it’s great that we have so many good tools in contributed modules that can fill in when we need them. Use these tools and you should be rocking HTML5 in no time.

Drupal 8 has a new theme engine called TWIG, which will be absolutely awesome, because you – yes, YOU – are going to help change Drupal’s markup to be even awesomer directly out of the box. So come help us out in the issue queue with creating #dreammarkup

Happy ANGRY theming!