Once all of the elements are in place, it's time to get down to the real work of theming the components. In this lesson we will:
- use our style guide and checklist to find each component
- check to see if the style looks "right"
- troubleshoot broken styles so that each component looks as good as the designer's original, static files
By the end of this lesson you will be able to identify elements on a rendered Drupal page which do not have the correct styles applied, determine the source of the problem, and alter the markup or styles to correct the output displayed in a browser.
Once your theme is uploaded you still need to enable it before it will be applied to your site. By the end of this lesson you will be able to enable new themes for your Drupal site.
It's always smart to do your development work in a local environment, but eventually you will need to upload your theme your server. In this lesson we'll upload our theme to our web server using Filezilla. By the end of this lesson you will know which folder your theme needs to be uploaded to, and at least one application suitable for uploading files.
Additional resources
The final step before we step back into Drupal is to create a checklist for all the things we need to implement in Drupal. Using our style guide as a starting point, we'll ensure that every design decision which has been made can be implemented in Drupal. Your checklist might also include notes about which modules should be used to build each of the components from within Drupal. Creating a checklist might seem like a trivial task, but it's really important that you know exactly what you're about to build so that you don't get overwhelmed once you step into Drupal. By the end of this lesson you should be able to create a document with all the instructions, and notes you will need to apply your style guide to a Drupal site.
In SMACSS there are both major and minor layout rules that need to be created. The major layout rules are often handled by a grid framework and are used to describe big areas on your site, such as your Drupal regions. The minor rules are used for the components (for example how a picture aligns next to a paragraph of text). In this lesson we'll start by review how Sass allows us to use semantic naming for our CSS layout classes. Then we'll adapt the sample Sass provided by the 960 Compass Plugin so that it uses the necessary structure for our design.
By the end of this lesson, you will be able to implement the layout rules from your style guide as a Sass file using the 960 Compass Plugin as a reference.
Additional resources
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.
Goodbye Membership Holds
Blog postDuring the recent Drupalize.Me site upgrade, we removed the ability to put temporary holds on memberships with an automatic billing reactivation. (Curiously, this functionally created more problems than it ever solved; lesson learned!) Now, we're giving you control by having you cancel your billing, and reactivate it when you are ready. If you wish to stop your membership for any length of time, simply cancel billing via your account dashboard.
Release Day: Wrapping up Media 2.x
Blog postThis week, we're finishing up our Using Drupal, Chapter 4 series, which covers media management with Media 2. We finish off our site by adding the ability to embed YouTube videos on the site very easily.
A very long time ago I was an account manager for a very tiny web development firm. We managed about 100 accounts, although at any given time there were only a dozen or so active projects. I enjoyed the juggling and the coordination of the tasks, but I grew impatient with our developer, and taught myself more and more coding skills so that I could take on more and more of the tasks myself. Since then I've worn many hats, and coordinated many projects, but this year was the first time I officially wore the hat of "Project Manager" in my new position at Drupalize.Me. I learned a lot along the way about how to work with an internal project team. Most of it was obvious, but it took the school of hard knocks to bring me back to basics. Here are a few of the truisms I wish I'd remembered sooner rather than later.
Learning Through Celebration
Blog postDuring DrupalCon Prague I had the pleasure of giving a presentation about teaching Drupal 8 as part of the core conversations track. In the presentation I talked a lot about providing a good learning environment for people starting with Drupal 8, and removing the fear and uncertainty that are so counter to learning. One of the key points that I made during the presentation was that I want to see the leaders in our community step up and promote the things that they are excited about in Drupal 8.
After a brief break from our video schedule, we are back on track this week, picking up the trail on the Using Drupal Chapter 4, Media Management series.
A Short Intermission
Blog postYou may have noticed that we don't have any new videos out for this week. We're taking a short break in our video production schedule so that we can focus on our brand new site that we just launched last week. We're really proud of the work we've done, and we've gotten lots of great feedback from our members. We still have a number of outstanding bugs we need to iron out, and our plan is to keep rolling out bug fixes this week. So keep your eyes peeled for more cool stuff on the way!
Fixing Things Up
Blog postWell, last week we launched the new version of our website, and while overall the feedback has been great, we also realize that we had a few mistakes on the site as well. We've been working hard to nip lots of little bugs over the last week, and we've also heard your feedback about watching the videos that belong to a series. I'm happy to say that we've just pushed a release that addresses some of our most pressing feedback.
Drupalize.Me Podcast Episode 30
Blog postWe launched our new site this week! It was a lot of work, and there is still a ton more work to do.
Welcome to Our New Site
Blog postWe redesigned the site and upgraded to Drupal 7! A lot of the site and features remain the same, but we do have some changes we'd like to point out.