Theming by Component for Drupal 7

Last updated March 5, 2020

Check your version

This tutorial covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Sprout Video

In this lesson we're going to learn about the front end development strategy of theming by components. This strategy relies on being able to break a design into individual components. Elsewhere on the Web this technique has been described as “atomic design” or “interface pattern pairing”. No matter what you call it, developing a pattern library of components is going to make it a lot easier to convert your design to a theme. This is an overview lesson that explains the strategy we'll be using in future lessons. More specifically, we'll look at:

  • two popular pattern libraries
  • an overview of how pages are built by Drupal so they can be rendered in a browser

By the end of this lesson you'll be able to identify components from a static design file by referencing a pattern library.

Atomic Design

SMACSS (Scalable and Modular Architecture for CSS)

Balsamiq Mockups