In this tutorial, we'll walk through the basics of how to implement a functional test by extending Drupal's BrowserTestBase class. We'll assume you've already determined that you need to write a functional test and that you've Set up a Functional Test.

In this tutorial, we'll:

• Determine the specifications of the test.
• Walk through the behavior we want to test.
• Document our test in the test class.
• Implement the testing steps.
• Decide how to deal with dependencies (for now). (We'll go into details about handling test dependencies in Implement Drupal Functional Test Dependencies.)

Before we start writing any React code, let's go over some basic concepts and terminology. Throughout this series we'll assume you're familiar with these things. They'll come up again and again as you work on projects that involve React, so it's worth taking the time to learn them.

In this tutorial we'll cover the following at a high level, and provide links to resources:

• Why choose React?
• What are React components?
• What are hooks, state, and JSX?
• The role of build tools when developing React applications

By the end of this tutorial you should have a firm grasp of the fundamental concepts and terminology necessary to start creating React applications.

Before we dive into advanced theming we are going to review the basic PHP you will need to use. This is a short review of PHP, including topics like data structures (arrays and objects), conditionals and operators, loops, and functions.

Additional resources

960 Robots

This next set of tutorials relates to controlling markup in Drupal when using the Views module. We’ll cover:

• What affects markup in Views
• Selecting an appropriate Views display format as a starting point for markup output
• Customizing field markup
• Customizing wrapper selectors and CSS classes
• Accessing theming information in Views
• Overriding Views template files

Additional resources

Views — Drupal.org

Now let's shift gears and take a look at how using Panels affects markup in Drupal. I will show you some unique-to-Panels concepts as well as how to apply Drupal theming principles to customize markup on a Drupal site that uses Panels.

In the tutorials that follow, you will learn:

• About Panels layouts
• How to add CSS classes using Panels
• How to override the panel pane template file
• What Panels means by “Style”—with a broad overview of Style Plugins and where to go for a deeper dive

Additional resources

Panels — Drupal.org
Chaos Tools Suite (CTools) — Drupal.org
Theming Basics for Drupal 7 — Drupalize.Me

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.

1. Develop a style guide based on the design patterns we see in our design files.
2. Build out Drupal so that it has all of the elements we need in place.
3. 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.

Drupal’s theming system gives designers complete control over how a site’s content is rendered for a web browser, and custom themes can give any site a distinctive look. But sometimes it’s useful to make minor tweaks to a site’s appearance using nothing but CSS rules. They allow designers to tweak font sizes, colors, and so on without altering the underlying HTML that defines the site’s structure. In this lesson we'll look at:

• CSS Injector module
• Explain how this works

Additional resources

Using Drupal, 2nd edition

Using Drupal source code

CSS Injector module

Drupalize.Me Guide: Using Drupal Book by O'Reilly Media

Before we can really dive in to learning Omega we need to do a couple of basic setup tasks. Mostly, we need a Drupal 7 site that has some content for us to look at while we are theming. In this lesson we're going to:

• Generate some content with devel generate module
• Install the 960 Robots theme from drupal.org
• Place some blocks in to the regions provided by the 960 Robots theme and talk a bit about what it gives us so that we can begin to understand how we might convert it to an Omega sub-theme

Under the Downloads tab, there is a copy of the final database and the files directory for this Demo site.

Additional resources

• 960 Robots theme
• Devel module

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.

In this tutorial, I will explain what a base, or parent, theme is in Drupal and why it can be advantageous to use it in theming. We'll take a look at what is commonly provided by a base theme, including discussing what a "starter kit" is and how it is intended to be used.

Additional resources

Using Base Themes — Drupal.org

In this series, Getting Started with Responsive Web Design in Drupal, we'll take an old Drupal theme based on a 960 pixel grid, and convert it, step by step, using just good ole CSS and HTML, to be more fluid, more flexible, more responsive than ever.

Our case study is the Anytown Farmers Markets. Anytown Farmers Markets has an existing web site that uses a theme based on a 960 pixel grid. It works great on larger screens, pretty well on iPads, but on an iPhone, the text is really small and you have to pinch and zoom and horizontally scroll to get around the screen.

Our goal will be to transition the site from a fixed width two column desktop site to a fluid and flexible site whose layout, images, and type gracefully transform at practically any size screen to provide a user-friendly experience where our site's content can be enjoyed by users browsing with a more diverse set of devices.

Throughout this series, you'll learn how to use, configure, and customize the style of a Drupal contributed module that provides a responsive, mobile-friendly main menu. We'll tackle images, tables, and slideshows and explore some select solutions for making these traditionally rigid elements flex with a fluid container. In the process of converting this theme to be responsive, you'll learn to tackle some real-world, sometimes messy and often times not-so-clear-cut problems and potential solutions.

To take advantage of this series, you'll want to be comfortable with HTML and CSS and the basics of setting up a theme in Drupal 7. You don't need to know Sass or any advanced theming. This series will help you understand common problems encountered in responsive web design and how to solve them in the context of a Drupal 7 theme.

Additional resources

Code: https://github.com/DrupalizeMe/demo-rwd-7x

Walks through the process of enabling the theme developer module and showing the themer info, which is like Firebug for Drupal theming. You can choose specific elements on the page to see what Drupal template files or theme functions were involved with outputting it to the screen. You can easily look at the candidate template names that are available, as well as see all of the variables that are available from that template file. A list of documented variables can be found within the node module's node.tpl.php file, but sometimes there are undocumented variables that are coming from contributed modules or elsewhere. It's a super handy tool to have available, but only enable it when you really need it since it can adversely affect the mark-up on your page and cause some wonky behavior.

Additional notes:
The Theme Developer module is on Drupal.org at http://drupal.org/project/devel_themer. Once you find a module on Drupal.org, you can see the "machine name" for the module in the URL (it is the same name as is used to for the module's .info file as well). That is the name that Drush uses. So, in this instance, Drush is looking for "devel_themer".
drush dl devel_themer

Additional resources

https://www.drupal.org/project/devel_themer

Drupal uses a series of nested template files to build out the rendered HTML pages we see in our browser. The template file page.tpl.php holds markup between <body> and </body> tags. We talked about the nested nature of template files in Lesson 3: Theming by Component.

In this lesson we will:

• create the file page.tpl.php
• add the relevant markup, and CSS classes for our grid framework
• insert relevant PHP variables so that Drupal can render each of its page components.

By the end of this lesson you will be able to create, or adapt, a page.tpl.php file to suit the conventions you identified in your style guide.

Learn the essential terminology of Drupal in this overview of content nodes, blocks, theming, menu system and modules. In Understanding Drupal, the first in The Lullabot Learning Series, the Lullabot team provides an overview of Drupal as a content management system, as a PHP web application framework, and as a developer community. Its documentary-style exploration covers all the terminology and fundamental concepts for both site administrators and developers. If you've ever been confused by Drupal or are still trying to wrap your head around the community and platform, then this video is a roadmap to accelerate your journey up the Drupal learning curve. Topics include:

• How content is entered and managed
• How users and user permissions are handled
• What blocks are and what they can do
• The concepts and capabilities of Drupal's powerful module system
• How Drupal handles navigation and its menu system
• How themes alter the site layout, design, and presentation
• Site configuration and administrative messages and settings

This video uses Drupal 6 for examples, however it is more focused on general Drupal concepts rather than version-specific how-tos.

Learn how to integrate jQuery scripts into Drupal, and how to leverage the JavaScript capabilities of the Drupal API in both 6.x & 7.x

Jeff Robbins and Nate Haug introduce the jQuery and Drupal integrations that we'll be building in this series, based on the foundations of theming, module development, and jQuery.

• How to add jQuery to a theme
• How to utilize Drupal's drag and drop behavior to reorder elements on a page within any form that has orderable items
• Drupal's direct integration with jQuery through the Forms API in Drupal 6 and Drupal 7
• Building a highly optimized AJAX request to Drupal that will return a JSON result
• The JavaScript state system in Drupal 7

Note: The examples in the video span across Drupal 6 and Drupal 7, and jQuery code that will work either in jQuery version 1.2.6 or 1.4.