Drupal-generated markup is not your friend...

Use a styleguide!

Maikel Koopman attended a track on the use of a styleguide in Drupal projects. A philosophy we have adopted some time ago at GoalGorilla. Read more about the difference in Drupal 7 en 8 below.

A part of our development team is visiting Drupalcon 2015 in Barcelona. There are many session tracks about different subjects during this five day event. Our developers share their experience on our blog. This second blog is written by Maikel Koopman, Front-end Developer at Goalgorilla. He attended a track on the use of a styleguide in Drupal projects. Styleguides are an interesting and trending subject in the front-end world. The track was presented by Robert Caracaus, Senior Front-end Developer at PreviousNext.


In his talk Robert went through the basics of styleguide driven development and why there is a need for this. At GoalGorilla we have adopted this philosophy some time ago and successfully released a few projects with this new approach. The hope for this talk was to learn something more than the basics and the concept. Luckily, the talk quickly went about the more advanced parts and the relation with Drupal. During his session, Robert pointed out the pain of standard Drupal output and how they tackle these problems.

Drupal-generated markup is hard to change in D7

The big problem of Drupal 7 is that the default markup (especially the nitty-gritty details) are hard to change and on top of that a lot of work. He pointed out there is a Display Suite option and the option to create many custom template files. For most projects this isn’t feasible. The best solution for Drupal 7 is called the ‘using fulgies’. This basically means that we create the right template files with ideal markup in handlebars files and the scss that goes with that. This is the way we want it to look in the ideal situation. Then is the sass files we put in the Drupal standard selectors (or slight modifications) and extend the chosen selectors in these selectors.

Updating the system is much easier in Drupal 8

For Drupal 8 we, of course, face the same problems to begin with. But since Drupal 8 is 1000x times more flexible in the theme layer, we can change close to 100% of the markup files to match our needs to our handlebars templates. This is great and what we want to achieve. Next thing is to create a full living styleguide. This means we do not only have single source for our styling, but for our markup as well. This makes updating the system much easier, and we do not have to worry about the styleguide being out of sync with the Drupal releases. This is where the talk really became interesting. Because Drupal 8 uses the Twig template system, which is much more flexible. If you can manage to integrate twig into the styleguide build tool, instead of handlebars, we would solve the puzzle of a living styleguide. By doing this you can rely on a single source for you markup and move on to a genuine living styleguide in Drupal.


We, the Front-enders at GoalGorilla, are really looking forward to start using Drupal 8 for new projects and see how we can further improve our workflow with the use of Twig. For Drupal 7, we have to rely on the “using fuglies” method, which is slightly disappointing. This is simply something we cannot change. The Drupal Association has promised to launch the Drupal 8 first release candidate in October this year. We cannot wait to get started with new projects in this awesome theme layer of Drupal 8.


Are you interested in the details of this session? Here is the video of the talk at DrupalCon:



*Photo made by James Drawneek



Bekijk ook onze andere nieuwsartikelen

Klik voor onze award winnende klanten