Check your version

This video 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.

Theming by Component

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:00
    Theming by Component with Emma Jane Westby.
  • 0:07
    EMMA JANE WESTBY: The problem with theming Drupal is that once you
  • 0:09
    know how to do it, it's kind of intuitive.
  • 0:12
    And figuring out all of those steps are about as easy
  • 0:16
    as those learn-to-draw books where you've got step one is a circle.
  • 0:19
    Step two is a circle.
  • 0:20
    And step four is a finished cat.
  • 0:21
    And you've got no idea how to actually add the fur in.
  • 0:24
    In this lesson, we're going to talk about some
  • 0:27
    of the strategies that are involved in the theming process.

PSD to Drupal Theme

Loading ...

Theming by Component

Loading...
8 minutes 10 seconds // Drupal 7 // HDCC //

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