Viewers: in countries Watching now:
In this course, Chaz Chumley takes you through the process of transitioning a Drupal website to a responsive model that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices.
The course starts with setting up the Drupal environment in Acquia and defines some basic principles of responsive design before moving on to creating a new Drupal theme with fluid layouts, fluid media, and responsive tables and forms. Chaz also covers writing media queries, which allow you to create different style sheets for each device type.
The course wraps up with a look at Respond.js and content-aware image sizing in Drupal—responsive design tools that can optimize your project for maximum performance.
If you've been developing or designing in Drupal 7 for any length of time, then you may have come across a module called Devel. If not, you may have asked yourself if there was any way to see exactly what variables Drupal 7 outputs and how to best work with those values. To make theming easier for us, let's take a look at where to find the Devel Module and some of the best ways to use this module for our own needs. The Devel Module is located at drupal.org/project/devel, and is another staple for any Drupal developer needing a way for debugging their own Drupal sites.
As part of the import of our fixed, adaptive, and responsive Drupal sites, I've taken care of the installation and enabling of this modules for you. So that we can take a look at the configuration of our site, you are going to need to first log in to the Drupal Instance we set up. Go ahead and tab back over to our site or go ahead and bring it up in the browser at drupal.fixed:8082/user and then go ahead and log in with the admin credentials. In this case, all lowercase, the word admin, the same for the Password, and then click on the Login button.
With the admin toolbar present, go ahead and navigate to Configuration > Development > Devel Settings. The Devel Module has numerous configuration settings that assist the Drupal designer or developer with a lot of information that you may not ever see otherwise. Such items as Query logs, page timers, memory usage, and page arrays. Let's see an example of that now. If I go ahead and click on the Display query log and then click on Save configuration, I see some options have been saved, but where is the information that I'm expecting to be seen? Let's scroll down at the bottom of the page, and I'll show you exactly where it's that.
We can see that 34 queries have been executed in 15.33 ms. And obviously, the number of queries in time doesn't have concern, what would be is if any of these queries were highlighted, that would indicate that there was something wrong with the database calls being made by Drupal. If I continue scrolling down, I do not see any highlighted areas. That's a good thing for us. Let me go ahead and turn this off for now and then click on the Save configuration button and quickly scroll down to make sure the information is no longer being displayed.
In most cases I use the Devel Module not from this interface, but actually from within templates, and Drupal functions when theming, the ability to see page, node, region, blocks, and even view variables that I can use to override or assist me with modifying the Drupal Instance output, makes the Devel Module something that I always make sure to install and configure within a Drupal Instance. In order to get a better idea how we would use this with theming, let's go ahead and tab over to our favorite Editor and then browse to the Drupal/drupal.fixed/sites folder, and inside of there we want to open the all/themes/responsive folder, which is the theme that we're currently using.
And in here you are seeing some different files that you may or may not have seen before. One is this template.php. This template.php has code that does a lot of overriding or hooks into or pre-processing or processing of the Drupal API and the output that it is displaying for us. We have the ability to, as a Drupal themer, manipulate all these variables. If I go ahead and expand the Includes folder and take a look at, for instance, the process_include and then look for the specific function called responsive_process_region, I can see a function here that's been commented out.
This is the KPR function, and this is a function that's built into the Devel Module. So even though I'm currently not having anything enabled from the admin interface, I do have ability to still use Devel to output information to the page. Let's see what happens when I uncomment this, save it, and then tab back over to our browser and go to the homepage. I'm now seeing some areas with some different content. Since we're dealing with the regions inside of Drupal, I can see that these are actually printing out page bottom, toolbar, branding, slider.
If I tab back to over to our Editor, comment this out and save it and then scroll down a little bit to the responsive_process_page function, and then uncomment the KPR function here, and then save it and then tab back over to our browser and refresh, I'm now seeing even more information available to us. If I actually expand this array, I can see that there is are tons of variables that if I wasn't using this function, I may not know it existed or that I actually had the ability to use these or manipulate these when it comes to Responsive Design.
So that we don't display this information on every page, let's tab back to over to our editor, comment out that function again, save the page, and then refresh it in the browser. Now we're back to where we were before. While there are many features that the Devel Module provides us, the ability to output Drupal variables is the most useful. Now that we've walked through how to configure and use the Devel Module for our theming needs, it's time to move on to discussing what responsive and adaptive design is and the workflow involved in Drupal 7 Responsive Design.
There are currently no FAQs about Responsive Design with Drupal.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.