Theming by Component for Drupal 7

Last updated

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

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.

Additional resources

Atomic Design

SMACSS (Scalable and Modular Architecture for CSS)

Balsamiq Mockups