← Back to Blog

Theming Drupal views with BEM

BEM is a CSS naming methodology that advocates the concept of modular CSS (an acronym for Block, Element, Modifier). I first learned about this through an article on CSS Wizardry, and whilst Harry Roberts (aka CSS Wizardry) is not the inventor of this practice, it was this article that first got me into the idea of modular CSS.

Having utilised it on a few WordPress projects over the past couple of years, I’ve constantly been unable to really utilise it in Drupal because, as any Drupal themer will tell you; writing an elegant front-end in Drupal is an almost impossible pursuit.

In this article I’d like to discuss one way in which we’ve managed to utilise BEM in Drupal, to what we consider a satisfactory extent. It doesn’t involve overriding Views templates (because that is an utter pain), instead it simply involves rewriting our Views output.

Start by setting up a content type

Let’s begin by creating a basic content type. Create a content type called “Film” with the following fields:

  • Title – text
  • Cover – image
  • Director – text
  • Year – text
  • Synopsis – longtext

For the purpose of simplicity, let’s just use the widget types listed above. If you wish to use Date for the Year field, feel free to install it; it won’t affect this tutorial.

Before continuing, please add some dummy content to this content type.

Next, add a View

Create a new View – select the Film content type and let’s just create a page. On the View edit page, ensure that under Format we’re showing fields not content which is the default option. This will give us access to individual fields (i.e. Cover, Director etc).

Ensure we're showing fields, not content

Ensure we’re showing fields, not content

Next, add some fields. Under fields click add and then add all fields relating to our Film content type. Add them all so that we see something similar to the image below.

Screen Shot 2015-04-03 at 16.11.02

If you save the View and look at the page (/films) you’ll see a list of entries similar to the image below.

Screen Shot 2015-04-03 at 16.18.23

Note that all of the content is simply spilled out onto the page – this is intentional because it helps to clean up the markup. There are a couple of things you can do to prevent Views from adding extraneous things:

  • Under Format – Format click Settings and uncheck the two row classes options
  • Under Format Show click Settings and uncheck “Provide default field wrapper elements”
  • In each field under Style settings, uncheck Add default classes.

This simply prevents Views from adding additional markup and classes to the view output, and will results in purely content being spat out when viewed. This is what we want.

BEMification

Now that we’ve got mostly just raw content, we can start to style it up in our own way. To do this, we need to add a new field. So, under Fields once more, click Add and then select Global: Custom text.

Screen Shot 2015-04-03 at 16.24.28

This is essentially a blank, custom field which allows us to add HTML and more importantly, replacement patterns. In Drupal, each piece of variable data is called a replacement pattern, and these are available to us in Views. If you click on the Custom text field we just added, you should see the following patterns available to you (note: ensure the Custom text field is underneath all the other fields or it won’t work!).

Replacement patterns for our Film content type

Replacement patterns for our Film content type

Hopefully at this point you’re starting to see where we’re going with this. In the Custom text field you can write whatever markup you wish. For the purpose of this demonstration I’m going to keep it very simple and create a basic example of desired BEM output:

Behold! Drupal output with BEM!This is quite an elegant way of outputting Views data in Drupal because it enables you to control your class names, rather than having to style around the default output.

By default, all fields will output, so you will need to go into each of the above fields and check Exclude from display to ensure that you don’t get duplicated output.

The outcome

By rewriting the View output and implementing BEM (albeit a very basic example of BEM) into my markup, I now have a nice clean slate for styling up with CSS, meaning I could much more easily create modular CSS for my site. This example isn’t particularly reusable, but you get the picture.

Output and CSS side by side

TL;DR

  • Output Views data in fields, ensure they are excluded from display
  • Add a new Custom text field at the bottom of the list of fields
  • Enter desired HTML markup in here
  • Style glorious BEM-inspired markup with CSS
  • Enjoy a much less troublesome Drupal styling experience!

I’d love to know what other Drupal themers and front-end developers think of this approach. Obviously, it’s nothing new, but we started implementing it on a few Drupal projects and it’s turned out to be a big help when styling up Views output.

Posted in

  • tommy

    Thanks! I have been using Drupal for ages but did not know this.