Responsive Design with Drupal
Illustration by John Hersey

Understanding the Devel module


From:

Responsive Design with Drupal

with Chaz Chumley

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Understanding the Devel module

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.
Expand all | Collapse all
  1. 3m 19s
    1. Welcome
      51s
    2. Using the exercise files
      1m 25s
    3. Exploring the finished project
      1m 3s
  2. 16m 30s
    1. Installing Acquia Dev Desktop
      3m 37s
    2. Importing a Drupal website
      4m 7s
    3. Restoring database snapshots with the Backup and Migrate module
      3m 13s
    4. Understanding the Devel module
      5m 33s
  3. 5m 48s
    1. What is responsive design?
      3m 32s
    2. Understanding adaptive design
      2m 16s
  4. 15m 33s
    1. Discovering fixed-width layouts
      3m 47s
    2. Understanding breakpoints
      3m 33s
    3. Using Adapt.js with Drupal
      8m 13s
  5. 27m 21s
    1. Discovering fluid layouts
      3m 43s
    2. Exploring fluid widths
      8m 34s
    3. Working with fluid margins and padding
      7m 41s
    4. Making text fluid
      7m 23s
  6. 16m 37s
    1. Discovering fluid images
      3m 5s
    2. Exploring fluid image techniques
      5m 6s
    3. Working with fluid media techniques
      8m 26s
  7. 21m 36s
    1. Introduction to media queries
      3m 2s
    2. Writing our first media query
      6m 10s
    3. Creating a style sheet for each breakpoint
      3m 53s
    4. Understanding media query best practices
      8m 31s
  8. 8m 14s
    1. Introduction to responsive menus
      2m 32s
    2. Creating a responsive menu
      3m 5s
    3. Integrating responsive menus into Drupal
      2m 37s
  9. 14m 52s
    1. Introduction to responsive tables
      1m 25s
    2. Creating responsive tables
      7m 30s
    3. Integrating responsive tables into Drupal
      5m 57s
  10. 21m 6s
    1. Introduction to responsive forms
      3m 9s
    2. Creating responsive forms
      8m 30s
    3. Integrating responsive forms into Drupal
      9m 27s
  11. 6m 38s
    1. Adding min-width and max-width support with Respond.js
      2m 35s
    2. Exploring context-aware image sizing
      4m 3s
  12. 1m 11s
    1. Next steps
      1m 11s

please wait ...
Watch the Online Video Course Responsive Design with Drupal
2h 38m Intermediate Jan 11, 2013

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.

Topics include:
  • What is responsive design?
  • Understanding fixed-width vs. fluid layouts
  • Working with fluid margins and padding
  • Writing a media query
  • Creating responsive menus and forms
  • Adding min- and max-width support with Respond.js
Subjects:
Developer Web
Software:
Drupal
Author:
Chaz Chumley

Understanding the Devel module

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Responsive Design with Drupal.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.