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.
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
Last week we started off two new series on Media module, each covering a different major version. This week we are plowing ahead with the Using Drupal Chapter 4: Media Management series, which covers Media version 2.x. These lessons will give you an overview of the Media Module and the various things it will do for us. After that, we're going to dive right in to building our music review site by building out the review content type, and playing around with our field display to make sure things are looking the way we intend.
We're happy to give you Episode 29 of the Drupalize.Me podcast, with Christophe Galli and Miro Dietiker, to talk about Translation Management. This is a great project, available as a module on Drupal.org, that works with various multilingual modules to help you keep your site translation organized. There are a lot of moving pieces in a multilingual site, and these guys have been up to their elbows with it for a long time.
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.