In this lesson we will convert the style guide into a series of stubs which we can view in a Web browser. The design was originally created using the templates from the 960gs. We'll use this same grid framework to ensure all of our margins are automatically adopted. Grid frameworks are excellent for rapid prototyping of designs. Ultimately many front end developers choose choose to write their own for the final theme; however, if you're just getting started try to stick with a grid framework to reduce the number of things that you need to fight with.
The original theme that was created for this design used the NineSixty base theme. There are some nifty features in this theme which are great for more complex designs; however, it is not responsive, and does not use Sass. To bring the lessons up-to-date we'll be using the 960-Compass Plugin to generate our stub files and give us some sample Sass output to work with.
By the end of this lesson you will be able to convert a style guide to a series of stub files in Sass (or CSS) using SMACSS conventions and a grid framework.
Additional resources
SMACSS (Scalable and Modular Architecture for CSS)
In the previous lesson you created a text-based style guide. It's now time to extract the necessary assets from our static design for use in our theme. To complete this lesson you will need a design application capable of opening a .psd file. The video demonstrates Photoshop, but I typically use Gimp. Either is fine. And if you don't have a graphics program, you can watch the video, but simply download the assets which were extracted during the lesson. By the end of this lesson you will be able to identify page-level design assets which need to be extracted from a design file for your Drupal theme.
Additional resources
Over the last couple of years we've seen the rise of object oriented CSS. There's been a lot of work done by smart folks to categorize different types of rules that we use to style our sites. We're going to take advantage of this work and use it to create a style guide. This foundation piece will help us to map the elements in our static design to the elements that we will build, and theme, in Drupal.In this lesson we'll create a style guide from our design with:
- Base rules
- Layout rules
- Component rules
By the end of this lesson you will be able to create a text-based style guide of your design which accurately describes your site according to base rules, layout rules, and component rules. You will be able to further supplement this style guide by adding relevant images which reference the exact component the style guide is describing.
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
SMACSS (Scalable and Modular Architecture for CSS)
In this lesson we'll take a tour of the theme you'll be building. The design we'll be working with was created by Betty Bisenthal. It's a fairly simple design with three columns and a banner image. It has been used as a starting point for several years by many people who are learning to theme. In this lesson we'll take a look at:
- the design we'll be working with
- variations of this design created by other students
- how Drupal was customized to accommodate our design
- the Sass used to create the layout for the site
By the end of this lesson you'll be able to describe the shape of the design used throughout this series, and identify variants of the design.
Additional resources
Emma Jane Westby introduces the series. In this series, you'll learn how to transform a static design file into a whole Drupal theme. We'll work through three major steps.
- Develop a style guide based on the design patterns we see in our design files.
- Build out Drupal so that it has all of the elements we need in place.
- Work with theming files to decorate Drupal.
Additional Resources
In addition to the lessons in this series, Emma has assembled an extensive FAQ on Drupal theming.
Now that users can post reviews on the Band Wagon site, we need to make sure that the content they publish, including their intro photos, is actually displayed correctly. To accomplish that, in this lesson, we're going to configure the field display settings and apply image styles.
Additional resources
The Media module for Drupal 7 solves a number of long-standing media-related problems in Drupal. At its core, Media provides a framework to manage media assets on a Drupal site, regardless of whether those assets exist on the site’s server or somewhere else on the Internet. Media has had much active development over time, and was a moving target when Using Drupal was written, so the latest version of Media is a fair bit different from the version we cover in this lesson, "2.0-unstable3." Version 2 of Media is very, very different from version 1, which is a much older version. We highly recommend that you learn the fundamental pieces of Media 2.0 using the source code that comes with the book and is covered in the About the Using Drupal series. That will allow you to follow the lesson without getting lost in the changes. Then, when you upgrade to the latest version down the road, you will have a solid foundation to explore the newer versions.
Additional resources
To get our music reviews built, we need to get started with a new content type. In this lesson we will get the basics in place by creating the new content type, with our main fields, and the ability to upload an image.
Additional resources
When you’re uploading photos to a website, it’s important to ensure that they are displayed at the right size. Otherwise, when you upload an exceptionally large image, chances are good that it will break your site’s layout. To prevent this, you’ll want to scale these images so that they’re a consistent size, and create thumbnails for use in listing pages. Image styles are a feature that’s part of Drupal core’s Image module, and it provides these options and many more for displaying images. In this lesson we'll get an overview of the core image styles feature so that we understand how it works, which styles and effects we have to work with, and some tips for troubleshooting when your images don't display properly.
Additional resources
Before we can nicely publish our favorite bands’ photos on our website, we need to make sure to set up image styles, in order to create scaled-down versions of the images while leaving the original images intact. In this lesson we'll modify an existing image style to customize it, and also see how we can improve our image quality.
Additional resources
In this lesson, we take a look at our Band Wagon case study, and then we'll go through our implementation plan and see how we're going to tackle this one. In our case study, John and Lisa decide to make a website to share information about all the music they love, including videos, photos and reviews, and they want their friends have a voice on the site as well.
First of all, they need to be able to upload images to the site, and have an image that's small in one location but full-sized in other locations. We'll want to embed some videos, as well.
Their friends don't know how to write HTML, so we let them use a simple form to select media, and maybe reuse other people's images. We want to provide them with a WYSIWYG tool bar, an editor that helps them write HTML without coding.
How will this work? We'll use Drupal Core's Image Module and image styles, and expand the Media Module. For our WYSIWYG editor we're going to use the WYSIWYG Module, and then we're going to need to get an editor that we can plug into it.
Additional resources
We've built a nice site for John and Lisa that meets their needs, and has them happily uploading photos and videos to their site. In this lesson we'll tour the Band Wagon site, walking through how we addressed our implementation points, and then wrap up with a review of the modules we used and referenced during the series.
Additional resources
If you’ve completed the Band Wagon site to this point, you’ve built a solid foundation for a Drupal-based music fan site that provides the main features we wanted. In this lesson we'll look at some more modules to explore, and how they could enhance the site we've created:
Additional resources
Because we already the Media module installed, it’s really easy to enable support to post videos from YouTube on the Band Wagon site. In this lesson we'll enable Media Internet Services and Media: YouTube modules, and make sure everything is working properly to embed a YouTube video into our content.
Additional resources
The Media module for Drupal 7 not only supports adding and managing media that is uploaded from a user’s computer into Drupal, but it also comes with a submodule, called Media Internet Sources, that allows using media assets from various Internet locations. In this lesson we'll look at what media internet sources can do for us and quickly explain what stream wrappers are and how they relate to what we want to do on the site.
Additional resources
Let’s set up the WYSYWIG editor for the Band Wagon website, using the WYSIWYG module and CKEditor. Note that if you prefer a different WYSIWYG editor, such as TinyMCE or Aloha, the installation instructions are very similar. In this lesson we'll we'll not only get WYSIWYG set up, but we'll also enable the Media filter and integrate that with our WYSIWYG editor.
Additional resources
Text formats are an important security feature of Drupal, so it pays to understand them. A text format will “scan” your content and make HTML formatting changes to it before sending it to the browser for display. In this lesson we'll see what formats and filters are, and how they relate to each other, walk through the filter workflow, as well as reviewing the default formats that come with Drupal core.
Additional resources
We now have a site with most of the basic functionality the Band Wagon project needs to start. However, one important piece remains: streamlining the content editing process, and allowing easy image and video integration in posts. In this lesson we will compare content editing tools and discuss how to integrate our media directly into the body of our content.